show copy agency id button in admin agencies page

gip-inclusion · Jan 28, 2025 · cd3a498 · cd3a498
1 parent 4bcdcf3
commit cd3a498
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/front/src/app/components/agency/CopyAgencyId.tsx b/front/src/app/components/agency/CopyAgencyId.tsx
@@ -0,0 +1,24 @@
+import { Badge } from "@codegouvfr/react-dsfr/Badge";
+import { Button } from "@codegouvfr/react-dsfr/Button";
+import React from "react";
+import { AgencyId } from "shared";
+import { useCopyButton } from "src/app/hooks/useCopyButton";
+
+export const CopyAgencyId = ({ agencyId }: { agencyId: AgencyId }) => {
+  const { copyButtonIsDisabled, copyButtonLabel, onCopyButtonClick } =
+    useCopyButton("Copier");
+
+  return (
+    <div>
+      Id de l'agence : <Badge severity="success">{agencyId}</Badge>{" "}
+      <Button
+        type="button"
+        disabled={copyButtonIsDisabled}
+        iconId={"fr-icon-clipboard-fill"}
+        onClick={() => onCopyButtonClick(agencyId)}
+      >
+        {copyButtonLabel}
+      </Button>
+    </div>
+  );
+};
diff --git a/front/src/app/components/agency/EditAgency.tsx b/front/src/app/components/agency/EditAgency.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { AgencyStatusBadge } from "src/app/components/agency/AgencyStatusBadge";
 import { AgencyTag } from "src/app/components/agency/AgencyTag";
 import { AgencyUsers } from "src/app/components/agency/AgencyUsers";
+import { CopyAgencyId } from "src/app/components/agency/CopyAgencyId";
 import { useAppSelector } from "src/app/hooks/reduxHooks";
 import "src/assets/admin.css";
 import { agencyAdminSelectors } from "src/core-logic/domain/admin/agenciesAdmin/agencyAdmin.selectors";
@@ -28,6 +29,7 @@ export const EditAgency = () => {
       {/* //Todo remove this from agency tab to redirect on agency detail admin page when select an agency in autocomplete */}
       {agency && (
         <>
+          <CopyAgencyId agencyId={agency.id} />
           <AgencyTag
             refersToAgencyName={agency.refersToAgencyName}
             className={fr.cx("fr-my-4w")}

diff --git a/front/src/app/components/forms/agency/AgencyOverview.tsx b/front/src/app/components/forms/agency/AgencyOverview.tsx
@@ -1,18 +1,16 @@
 import { fr } from "@codegouvfr/react-dsfr";
-import { Badge } from "@codegouvfr/react-dsfr/Badge";
-import { Button } from "@codegouvfr/react-dsfr/Button";
 import React from "react";
 import { AgencyDto } from "shared";
-
-import { SubmitFeedbackNotification } from "src/app/components/SubmitFeedbackNotification";
 import { AgencyStatusBadge } from "src/app/components/agency/AgencyStatusBadge";
 import { agencyAdminSubmitMessageByKind } from "src/app/components/agency/AgencySubmitFeedback";
 import { AgencyTag } from "src/app/components/agency/AgencyTag";
 import { AgencyUsers } from "src/app/components/agency/AgencyUsers";
+import { CopyAgencyId } from "src/app/components/agency/CopyAgencyId";
 import { Feedback } from "src/app/components/feedback/Feedback";
 import { EditAgencyForm } from "src/app/components/forms/agency/EditAgencyForm";
+
+import { SubmitFeedbackNotification } from "src/app/components/SubmitFeedbackNotification";
 import { useAppSelector } from "src/app/hooks/reduxHooks";
-import { useCopyButton } from "src/app/hooks/useCopyButton";
 import { routes } from "src/app/routes/routes";
 
 import { agencyAdminSelectors } from "src/core-logic/domain/admin/agenciesAdmin/agencyAdmin.selectors";
@@ -40,23 +38,11 @@ export const AgencyOverview = ({
 }: AgencyOverviewProps) => {
   const feedback = useAppSelector(agencyAdminSelectors.feedback);
 
-  const { copyButtonIsDisabled, copyButtonLabel, onCopyButtonClick } =
-    useCopyButton("Copier");
-
   return (
     <div>
       <h1 className={fr.cx("fr-h1")}>{agency.name}</h1>
-      <div>
-        Id de l'agence : <Badge severity="success">{agency.id}</Badge>{" "}
-        <Button
-          type="button"
-          disabled={copyButtonIsDisabled}
-          iconId={"fr-icon-clipboard-fill"}
-          onClick={() => onCopyButtonClick(agency.id)}
-        >
-          {copyButtonLabel}
-        </Button>
-      </div>
+      <CopyAgencyId agencyId={agency.id} />
+
       {/* //Todo remove after feedback refactor */}
       {routeName === "adminAgencies" || routeName === "adminAgencyDetail" ? (
         <SubmitFeedbackNotification