save

src/react/ui-elements/SelectAccountIAMRole.tsx

@@ -1,3 +1,4 @@
+import { Stack } from '@scality/core-ui';
 import { Select } from '@scality/core-ui/dist/next';
 import { IAM } from 'aws-sdk';
 import { useState } from 'react';
@@ -6,64 +7,97 @@ import { Account } from '../../types/iam';
 import { useIAMClient } from '../IAMProvider';
 import { getListRolesQuery } from '../queries';
 import { useAccounts } from '../utils/hooks';
-import { Stack } from '@scality/core-ui';
 
-// { accountName: JBw, roleName: Dataconsumer }
+const filterRoles = (
+  accountName: string,
+  roles: IAM.Role[],
+  hideAccountRoles: { accountName: string; roleName: string }[],
+) => {
+  return roles.filter(
+    (role) =>
+      !hideAccountRoles.find(
+        (hideRole) =>
+          hideRole.accountName === accountName &&
+          hideRole.roleName === role.RoleName,
+      ),
+  );
+};
+
 const defaultOnChange = () => ({});
 export const SelectAccountIAMRole = (props: {
   onChange: (account: Account, role: IAM.Role) => void;
-  // hideRoles
-  // defaultValue
+  defaultValue?: { accountName: string; roleName: string };
+  hideAccountRoles?: { accountName: string; roleName: string }[];
 }) => {
-  const { onChange = defaultOnChange } = props;
+  const {
+    onChange = defaultOnChange,
+    hideAccountRoles = [],
+    defaultValue,
+  } = props;
   const { accounts } = useAccounts();
   const IAMClient = useIAMClient();
 
-  const [account, setAccount] = useState<Account | null>(null);
+  const defaultAccount =
+    accounts.find((account) => account.Name === defaultValue?.accountName) ??
+    null;
+  const [account, setAccount] = useState<Account | null>(defaultAccount);
+  const [role, setRole] = useState<IAM.Role | null>(null);
+
   const accountName = account ? account.Name : '';
   const rolesQuery = getListRolesQuery(accountName, IAMClient);
   const listRolesQuery = {
     ...rolesQuery,
     enabled: !!IAMClient && !!IAMClient.client && accountName !== '',
   };
   const roleQueryData = useQuery(listRolesQuery);
-  const roles = roleQueryData?.data?.Roles ?? null;
+  const roles = filterRoles(
+    accountName,
+    roleQueryData?.data?.Roles ?? [],
+    hideAccountRoles,
+  );
 
-  console.log('account', account);
+  const isDefaultAccountSelected = account?.Name === defaultValue?.accountName;
+  const defaultRole = isDefaultAccountSelected ? defaultValue?.roleName : null;
 
   return (
     <Stack>
       <Select
         id="select-account"
-        onChange={(accountId) => {
+        value={account?.Name ?? defaultValue?.accountName}
+        onChange={(accountName) => {
           const selectedAccount = accounts.find(
-            (account) => account.id === accountId,
+            (account) => account.Name === accountName,
           );
 
           setAccount(selectedAccount);
+          setRole(null);
         }}
         size="1/2"
         placeholder="Select Account"
       >
         {accounts.map((account) => (
-          <Select.Option key={`${account.id}`} value={account.id}>
+          <Select.Option key={`${account.Name}`} value={account.Name}>
             {account.Name}
           </Select.Option>
         ))}
       </Select>
 
-      {roles ? (
+      {roles.length > 0 ? (
         <Select
           id="select-account-role"
-          onChange={(roleId) => {
-            const selectedRole = roles.find((role) => role.RoleId === roleId);
+          value={role?.RoleName ?? defaultRole}
+          onChange={(roleName) => {
+            const selectedRole = roles.find(
+              (role) => role.RoleName === roleName,
+            );
             onChange(account, selectedRole);
+            setRole(selectedRole);
           }}
           size="2/3"
           placeholder="Select Role"
         >
           {roles.map((role) => (
-            <Select.Option key={`${role.RoleId}`} value={role.RoleId}>
+            <Select.Option key={`${role.RoleName}`} value={role.RoleName}>
               {role.RoleName}
             </Select.Option>
           ))}