feat(odd-platform-ui): owner association wip (#1622)

odd-platform-ui/src/components/Management/OwnerAssociations/OwnerAssociationsList/OwnerAssociationsActive/ActiveAssociationRequest/ActiveAssociationRequest.tsx

@@ -9,8 +9,7 @@ import * as S from '../../OwnerAssociationsSharedStyles';
 
 interface ActiveAssociationRequestProps {
   ownerName: OwnerAssociationRequest['ownerName'];
-  // FIXME
-  // ownerId: OwnerAssociationRequest['ownerId'];
+  ownerId: OwnerAssociationRequest['ownerId'];
   username: OwnerAssociationRequest['username'];
   provider?: OwnerAssociationRequest['provider'];
   roles?: OwnerAssociationRequest['roles'];
@@ -25,18 +24,17 @@ const ActiveAssociationRequest: React.FC<ActiveAssociationRequestProps> = ({
   statusUpdatedBy,
   statusUpdatedAt,
   ownerName,
-  // FIXME
-  // ownerId,
+  ownerId,
 }) => {
   const { associationRequestFormattedDateTime } = useAppDateTime();
   const { t } = useTranslation();
   const { hasAccessTo } = usePermissions();
   const { mutateAsync: deleteAssociation } = useRemoveUserOwnerMapping();
 
   const handleDelete = async () => {
+    if (!ownerId) return;
     await deleteAssociation({
-      // FIXME: ownerId is missing
-      ownerId: 1,
+      ownerId,
     });
   };
 

odd-platform-ui/src/components/Management/OwnerAssociations/OwnerAssociationsList/OwnerAssociationsActive/OwnerAssociationsActive.tsx

@@ -84,7 +84,7 @@ const OwnerAssociationsActive: React.FC<OwnerAssociationsActiveProps> = ({ size
               <ActiveAssociationRequest
                 key={association.id}
                 ownerName={association.ownerName}
-                // ownerId={association.ownerId}
+                ownerId={association.ownerId}
                 provider={association.provider}
                 username={association.username}
                 roles={association.roles}

odd-platform-ui/src/components/Overview/OwnerAssociation/OwnerAssociationForm/OwnerAssociationForm.tsx

@@ -9,17 +9,13 @@ import type {
 } from '@mui/material/useAutocomplete';
 import { createFilterOptions } from '@mui/material/useAutocomplete';
 import { useTranslation } from 'react-i18next';
-import { getIdentity, getOwnerAssociationRequestCreatingStatuses } from 'redux/selectors';
+import { getIdentity } from 'redux/selectors';
 import type { Owner, OwnerFormData } from 'generated-sources';
 import { OwnerAssociationRequestStatus } from 'generated-sources';
 import { ClearIcon, UserSyncIcon } from 'components/shared/icons';
 import { AutocompleteSuggestion, Button, Input } from 'components/shared/elements';
-import {
-  createOwnerAssociationRequest,
-  fetchIdentity,
-  fetchOwnersList,
-} from 'redux/thunks';
-import { usePermissions } from 'lib/hooks';
+import { fetchIdentity, fetchOwnersList } from 'redux/thunks';
+import { useCreateOwnerAssociationRequest, usePermissions } from 'lib/hooks';
 import { setProfileOwnerName } from 'redux/slices/profile.slice';
 import { useAppDispatch, useAppSelector } from 'redux/lib/hooks';
 import * as S from './OwnerAssociationFormStyles';
@@ -30,9 +26,8 @@ const OwnerAssociationForm: React.FC = () => {
   const { isAllowedTo: associateImmediately } = usePermissions();
 
   const identity = useAppSelector(getIdentity);
-  const { isLoading: isRequestCreating } = useAppSelector(
-    getOwnerAssociationRequestCreatingStatuses
-  );
+  const { mutateAsync: createOwnerAssociationRequest, isPending: isRequestCreating } =
+    useCreateOwnerAssociationRequest();
 
   const searchOwners = fetchOwnersList;
   const methods = useForm<OwnerFormData>({
@@ -123,15 +118,14 @@ const OwnerAssociationForm: React.FC = () => {
     }
   }, [autocompleteOpen, optionsSearchText]);
 
-  const onSubmit = (data: OwnerFormData) => {
-    dispatch(createOwnerAssociationRequest({ ownerFormData: data }))
-      .unwrap()
-      .then(({ status, ownerName }) => {
-        if (associateImmediately && status === OwnerAssociationRequestStatus.APPROVED) {
-          dispatch(setProfileOwnerName(ownerName));
-        }
-        dispatch(fetchIdentity());
-      });
+  const onSubmit = async (data: OwnerFormData) => {
+    const { status, ownerName } = await createOwnerAssociationRequest({
+      ownerFormData: data,
+    });
+    if (associateImmediately && status === OwnerAssociationRequestStatus.APPROVED) {
+      dispatch(setProfileOwnerName(ownerName));
+    }
+    dispatch(fetchIdentity());
   };
 
   useEffect(() => {

odd-platform-ui/src/lib/hooks/api/ownerAssociationRequest.ts

@@ -5,6 +5,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 import type {
+  OwnerAssociationRequestApiCreateOwnerAssociationRequestRequest,
   OwnerAssociationRequestApiCreateUserOwnerMappingRequest,
   OwnerAssociationRequestApiDeleteActiveUserOwnerMappingRequest,
   OwnerAssociationRequestApiGetOwnerAssociationRequestListRequest,
@@ -85,6 +86,23 @@ export function useUpdateAssociationRequest() {
   });
 }
 
+export function useCreateOwnerAssociationRequest() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationKey: ['createOwnerAssociationRequest'],
+    mutationFn: async (
+      params: OwnerAssociationRequestApiCreateOwnerAssociationRequestRequest
+    ) => ownerAssociationRequestApi.createOwnerAssociationRequest(params),
+    onSuccess: async () => {
+      showSuccessToast({ message: 'Association request created successfully' });
+      await queryClient.invalidateQueries({
+        queryKey: ['ownerAssociationRequestList'],
+      });
+    },
+  });
+}
+
 export function useGetProviderList() {
   return useQuery({
     queryKey: ['providerList'],

odd-platform-ui/src/redux/actions/index.ts

@@ -18,7 +18,6 @@ export * from './terms.actions';
 export * from './termSearch.actions';
 export * from './activity.actions';
 export * from './dataEntityRun.actions';
-export * from './ownerAssociation.actions';
 export * from './dataCollaboration.actions';
 export * from './roles.actions';
 export * from './policy.actions';

odd-platform-ui/src/redux/selectors/index.ts

@@ -19,7 +19,6 @@ export * from './terms.selectors';
 export * from './termLinkedList.selectors';
 export * from './termSearch.selectors';
 export * from './activities.selectors';
-export * from './ownerAssociation.selectors';
 export * from './dataEntityRun.selector';
 export * from './dataCollaboration.selectors';
 export * from './roles.selectors';

odd-platform-ui/src/redux/slices/profile.slice.ts

@@ -24,12 +24,6 @@ export const profileSlice = createSlice({
     builder.addCase(thunks.fetchIdentity.fulfilled, (state, { payload }) => {
       state.owner = payload;
     });
-    builder.addCase(
-      thunks.createOwnerAssociationRequest.fulfilled,
-      (state, { payload }) => {
-        state.owner.associationRequest = payload;
-      }
-    );
     builder.addCase(thunks.fetchResourcePermissions.fulfilled, (state, { payload }) => {
       const { resourceId, permissionResourceType, permissions } = payload;
       state.permissions[permissionResourceType][resourceId] = permissions;

odd-platform-ui/src/redux/thunks/index.ts

@@ -18,7 +18,6 @@ export * from './termSearch.thunks';
 export * from './metadata.thunks';
 export * from './dataEntityRun.thunk';
 export * from './activity.thunks';
-export * from './ownerAssociation.thunks';
 export * from './dataCollaboration.thunks';
 export * from './roles.thunks';
 export * from './policy.thunks';