change AttachmentTable type : add Entity type

scality · Aug 6, 2024 · bc380aa · bc380aa
1 parent 5712d52
commit bc380aa
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 37 deletions.
diff --git a/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx b/src/lib/organisms/attachments/AttachmentConfirmationModal.tsx
@@ -10,7 +10,11 @@ import { Icon, LargerText, Modal, SecondaryText, Stack, Wrap } from '../..';
 type AttachmentStatus = 'Waiting for confirmation' | 'Error' | 'Success';
 
 //The entity is the "thing" you want to attach to the resource, sorry about the naming :(
-export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
+export function AttachmentConfirmationModal<
+  ENTITY_TYPE,
+  RESOURCE_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   attachmentOperations,
   getAttachmentMutationOptions,
   resourceType,
@@ -21,7 +25,7 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
   onCancel,
   onExit,
 }: {
-  attachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+  attachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
   getAttachmentMutationOptions: () => UseMutationOptions<
     unknown,
     unknown,
@@ -30,6 +34,7 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
       type: ENTITY_TYPE;
       entityName: string;
       id: string;
+      completeEntity?: ENTITY;
     }
   >;
   resourceName: string;
@@ -39,8 +44,8 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
   cancelButtonDisabled?: boolean;
   onCancel?: () => void;
   onExit?: (
-    successfullOperations: AttachmentOperation<ENTITY_TYPE>[],
-    failedOperations: AttachmentOperation<ENTITY_TYPE>[],
+    successfullOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
+    failedOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
 }) {
   const history = useHistory();
@@ -70,12 +75,13 @@ export function AttachmentConfirmationModal<ENTITY_TYPE, RESOURCE_TYPE>({
     entityName: string;
     id: string;
   }[] = attachmentOperations.map(
-    (attachmentOperation: AttachmentOperation<ENTITY_TYPE>) => {
+    (attachmentOperation: AttachmentOperation<ENTITY_TYPE, ENTITY>) => {
       return {
         action: attachmentOperation.action,
         type: attachmentOperation.entity.type,
         entityName: attachmentOperation.entity.name,
         id: attachmentOperation.entity.id,
+        completeEntity: attachmentOperation.entity.completeEntity,
       };
     },
   );

diff --git a/src/lib/organisms/attachments/AttachmentTable.tsx b/src/lib/organisms/attachments/AttachmentTable.tsx
@@ -38,27 +38,36 @@ type AttachableEntityWithPendingStatus<ENTITY_TYPE> = {
   isPending?: boolean;
 } & AttachableEntity<ENTITY_TYPE>;
 
-export type AttachmentTableProps<ENTITY_TYPE> = {
-  initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[];
+export type AttachmentTableProps<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
+  initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
   initiallyAttachedEntitiesStatus: 'idle' | 'loading' | 'success' | 'error';
-  initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[];
+  initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
   entityName: { plural: string; singular: string };
   getNameQuery?: (
-    entity: AttachableEntity<ENTITY_TYPE>,
+    entity: AttachableEntity<ENTITY_TYPE, ENTITY>,
   ) => UseQueryOptions<unknown, unknown, string>;
   searchEntityPlaceholder: string;
   onAttachmentsOperationsChanged: (
-    attachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+    attachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
   ) => void;
   filteredEntities:
     | { status: 'idle' }
     | {
         status: 'loading' | 'error';
-        data?: { number: number; entities: AttachableEntity<ENTITY_TYPE>[] };
+        data?: {
+          number: number;
+          entities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
+        };
       }
     | {
         status: 'success';
-        data: { number: number; entities: AttachableEntity<ENTITY_TYPE>[] };
+        data: {
+          number: number;
+          entities: AttachableEntity<ENTITY_TYPE, ENTITY>[];
+        };
       };
   onEntitySearchChange: (search?: string) => void;
 };
@@ -131,31 +140,34 @@ const PrivateAttachmentContext = createContext<{
   setResetAttachementTable: Dispatch<
     SetStateAction<
       (
-        initiallyAttachedEntities: AttachableEntity<any>[], //Deliberately using any here because we can't use generics
-        initialAttachmentOperations: AttachmentOperation<any>[],
+        initiallyAttachedEntities: AttachableEntity<any, any>[], //Deliberately using any here because we can't use generics
+        initialAttachmentOperations: AttachmentOperation<any, any>[],
       ) => void
     >
   >;
 } | null>(null);
 const AttachmentContext = createContext<{
   resetAttachmentTable: (
-    initiallyAttachedEntities: AttachableEntity<any>[], //Deliberately using any here because we can't use generics
-    initialAttachmentOperations: AttachmentOperation<any>[],
+    initiallyAttachedEntities: AttachableEntity<any, any>[], //Deliberately using any here because we can't use generics
+    initialAttachmentOperations: AttachmentOperation<any, any>[],
   ) => void;
 } | null>(null);
 
-export const AttachmentProvider = <ENTITY_TYPE extends unknown>({
+export const AttachmentProvider = <
+  ENTITY_TYPE extends unknown,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   children,
 }: PropsWithChildren<{}>) => {
   const [resetAttachmentTable, setResetAttachementTable] = useState<
     (
-      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-      initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
     ) => void
   >(
     (
-      _: AttachableEntity<ENTITY_TYPE>[],
-      __: AttachmentOperation<ENTITY_TYPE>[],
+      _: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      __: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
     ) => {},
   );
   return (
@@ -177,7 +189,10 @@ export const useAttachmentOperations = () => {
   return ctx;
 };
 
-export const AttachmentTable = <ENTITY_TYPE,>({
+export const AttachmentTable = <
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+>({
   initiallyAttachedEntities,
   initiallyAttachedEntitiesStatus,
   initialAttachmentOperations,
@@ -187,7 +202,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   getNameQuery,
   filteredEntities,
   onEntitySearchChange,
-}: AttachmentTableProps<ENTITY_TYPE>) => {
+}: AttachmentTableProps<ENTITY_TYPE, ENTITY>) => {
   const privateAttachmentContext = useContext(PrivateAttachmentContext);
   const exposedAttachmentContext = useContext(AttachmentContext);
 
@@ -198,8 +213,11 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   //Desired attached entities and onAttachmentsOperationsChanged handling
   const convertInitiallyAttachedEntitiesToDesiredAttachedEntities = useCallback(
     (
-      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-      operations: AttachmentOperation<ENTITY_TYPE>[] = initialAttachmentOperations,
+      initiallyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+      operations: AttachmentOperation<
+        ENTITY_TYPE,
+        ENTITY
+      >[] = initialAttachmentOperations,
     ) => {
       return initiallyAttachedEntities
         .filter(
@@ -216,7 +234,9 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   );
   const convertInitiallyAttachementOperationsToDesiredAttachedEntities =
     useCallback(
-      (initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[]) => {
+      (
+        initialAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
+      ) => {
         return initialAttachmentOperations
           .filter((op) => op.action !== AttachmentAction.REMOVE)
           .map((op) => ({
@@ -232,21 +252,21 @@ export const AttachmentTable = <ENTITY_TYPE,>({
       (
         state: {
           desiredAttachedEntities: AttachableEntityWithPendingStatus<ENTITY_TYPE>[];
-          attachmentsOperations: AttachmentOperation<ENTITY_TYPE>[];
+          attachmentsOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
         },
         action:
           | {
               action: AttachmentAction.ADD;
-              entity: AttachableEntity<ENTITY_TYPE>;
+              entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
             }
           | {
               action: AttachmentAction.REMOVE;
-              entity: AttachableEntity<ENTITY_TYPE>;
+              entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
             }
           | {
               action: 'RESET_DESIRED_ATTACHED_ENTITIES';
               entities: AttachableEntityWithPendingStatus<ENTITY_TYPE>[];
-              operations: AttachmentOperation<ENTITY_TYPE>[];
+              operations: AttachmentOperation<ENTITY_TYPE, ENTITY>[];
             },
       ) => {
         switch (action.action) {
@@ -401,8 +421,8 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   useEffect(() => {
     privateAttachmentContext.setResetAttachementTable(() => {
       return (
-        newlyAttachedEntities: AttachableEntity<ENTITY_TYPE>[],
-        newAttachmentOperations: AttachmentOperation<ENTITY_TYPE>[],
+        newlyAttachedEntities: AttachableEntity<ENTITY_TYPE, ENTITY>[],
+        newAttachmentOperations: AttachmentOperation<ENTITY_TYPE, ENTITY>[],
       ) => {
         dispatch({
           action: 'RESET_DESIRED_ATTACHED_ENTITIES',
@@ -429,7 +449,11 @@ export const AttachmentTable = <ENTITY_TYPE,>({
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
   const onSelectedItemChange = useCallback(
-    (onChangeParams: UseComboboxStateChange<AttachableEntity<ENTITY_TYPE>>) => {
+    (
+      onChangeParams: UseComboboxStateChange<
+        AttachableEntity<ENTITY_TYPE, ENTITY>
+      >,
+    ) => {
       if (onChangeParams.selectedItem) {
         dispatch({
           action: AttachmentAction.ADD,
@@ -478,7 +502,7 @@ export const AttachmentTable = <ENTITY_TYPE,>({
             row: { original: entity },
           }: {
             value: string;
-            row: { original: AttachableEntity<ENTITY_TYPE> };
+            row: { original: AttachableEntity<ENTITY_TYPE, ENTITY> };
           }) => {
             const { data: asyncName, status } = useQuery({
               ...(getNameQuery

diff --git a/src/lib/organisms/attachments/AttachmentTypes.ts b/src/lib/organisms/attachments/AttachmentTypes.ts
@@ -1,16 +1,23 @@
-export type AttachableEntity<ENTITY_TYPE> = {
+export type AttachableEntity<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
   name: string;
   id: string;
   type: ENTITY_TYPE;
   disableDetach?: boolean;
+  completeEntity?: ENTITY;
 };
 
 export enum AttachmentAction {
   ADD,
   REMOVE,
 }
 
-export type AttachmentOperation<ENTITY_TYPE> = {
+export type AttachmentOperation<
+  ENTITY_TYPE,
+  ENTITY extends Record<string, unknown> = Record<string, unknown>,
+> = {
   action: AttachmentAction;
-  entity: AttachableEntity<ENTITY_TYPE>;
+  entity: AttachableEntity<ENTITY_TYPE, ENTITY>;
 };