Hide role from access management page and invite user modal in cloud (#12993)

Author: edmundito

airbyte-webapp/src/packages/cloud/views/users/InviteUsersModal/InviteUsersModal.tsx

@@ -42,19 +42,23 @@ const FormRow = styled(Row)`
   margin-bottom: 8px;
 `;
 
+const ROLE_OPTIONS = [
+  {
+    value: "admin",
+    label: "admin",
+  },
+];
+
 export const InviteUsersModal: React.FC<{
   onClose: () => void;
 }> = (props) => {
   const formatMessage = useIntl().formatMessage;
   const { workspaceId } = useCurrentWorkspace();
   const { inviteUserLogic } = useUserHook();
   const { mutateAsync: invite } = inviteUserLogic;
-  const roleOptions = [
-    {
-      value: "admin",
-      label: "admin",
-    },
-  ];
+
+  const isRoleVisible = false; // Temporarily hiding roles because there's only 'Admin' in cloud.
+
   return (
     <Modal title={<FormattedMessage id="modals.addUser.title" />} onClose={props.onClose}>
       <Formik
@@ -65,7 +69,7 @@ export const InviteUsersModal: React.FC<{
           users: [
             {
               email: "",
-              role: roleOptions[0].value,
+              role: ROLE_OPTIONS[0].value,
             },
           ],
         }}
@@ -88,11 +92,13 @@ export const InviteUsersModal: React.FC<{
                       <FormattedMessage id="modals.addUser.email.label" />
                     </H5>
                   </Cell>
-                  <Cell>
-                    <H5>
-                      <FormattedMessage id="modals.addUser.role.label" />
-                    </H5>
-                  </Cell>
+                  {isRoleVisible && (
+                    <Cell>
+                      <H5>
+                        <FormattedMessage id="modals.addUser.role.label" />
+                      </H5>
+                    </Cell>
+                  )}
                 </FormHeader>
                 <FieldArray
                   name="users"
@@ -105,22 +111,24 @@ export const InviteUsersModal: React.FC<{
                               {({ field }: FieldProps<string>) => <Input {...field} placeholder="[email protected]" />}
                             </Field>
                           </Cell>
-                          <Cell>
-                            <Field name={`users[${index}].role`}>
-                              {({ field }: FieldProps) => {
-                                return (
-                                  <DropDown
-                                    isDisabled
-                                    value={field.value}
-                                    placeholder={formatMessage({
-                                      id: "modals.addUser.role.placeholder",
-                                    })}
-                                    options={roleOptions}
-                                  />
-                                );
-                              }}
-                            </Field>
-                          </Cell>
+                          {isRoleVisible && (
+                            <Cell>
+                              <Field name={`users[${index}].role`}>
+                                {({ field }: FieldProps) => {
+                                  return (
+                                    <DropDown
+                                      isDisabled
+                                      value={field.value}
+                                      placeholder={formatMessage({
+                                        id: "modals.addUser.role.placeholder",
+                                      })}
+                                      options={ROLE_OPTIONS}
+                                    />
+                                  );
+                                }}
+                              </Field>
+                            </Cell>
+                          )}
                         </FormRow>
                       ))}
                       <Button
@@ -129,7 +137,7 @@ export const InviteUsersModal: React.FC<{
                         onClick={() =>
                           arrayHelpers.push({
                             email: "",
-                            role: roleOptions[0].value,
+                            role: ROLE_OPTIONS[0].value,
                           })
                         }
                         secondary

airbyte-webapp/src/packages/cloud/views/users/UsersSettingsView/UsersSettingsView.tsx

@@ -13,8 +13,6 @@ import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import { useListUsers, useUserHook } from "packages/cloud/services/users/UseUserHook";
 import { InviteUsersModal } from "packages/cloud/views/users/InviteUsersModal";
 
-import RoleToolTip from "./components/RoleToolTip";
-
 const Header = styled.div`
   display: flex;
   justify-content: space-between;
@@ -54,17 +52,19 @@ export const UsersSettingsView: React.FC = () => {
         accessor: "email",
         Cell: ({ cell }: CellProps<User>) => cell.value,
       },
-      {
-        Header: (
-          <>
-            <FormattedMessage id="userSettings.table.column.role" />
-            <RoleToolTip />
-          </>
-        ),
-        headerHighlighted: true,
-        accessor: "userId",
-        Cell: (_: CellProps<User>) => "admin",
-      },
+      // TEMP: Currently all cloud users are admins.
+      // Remove when there is more than role
+      // {
+      //   Header: (
+      //     <>
+      //       <FormattedMessage id="userSettings.table.column.role" />
+      //       <RoleToolTip />
+      //     </>
+      //   ),
+      //   headerHighlighted: true,
+      //   accessor: "userId",
+      //   Cell: (_: CellProps<User>) => "Admin",
+      // },
       {
         Header: <FormattedMessage id="userSettings.table.column.action" />,
         headerHighlighted: true,