Revamp Import Members dialog UI and logic

Author: andreaskienle

public/locales/en.json

@@ -8,7 +8,9 @@
   "Entities": {
     "ManagedControlPlane": "Managed Control Plane",
     "Project": "Project",
-    "Workspace": "Workspace"
+    "Workspace": "Workspace",
+    "Users": "Users",
+    "ServiceAccounts": "ServiceAccounts"
   },
   "ComponentList": {
     "tableComponentHeader": "Name",
@@ -171,7 +173,8 @@
     "addHeader": "Add User or ServiceAccount",
     "saveButton": "Save changes",
     "defaultNamespaceInfo": "Leave empty to use <span>default</span> namespace",
-    "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information."
+    "serviceAccoutsGuide": "You can also use our <link1>Service Account Guide</link1> for more information.",
+    "reuseMembersButton": "Reuse"
   },
 
   "ProjectsPage": {
@@ -313,10 +316,10 @@
     "maxChars": "Max length is {{maxLength}} characters.",
     "userExists": "User with this name already exists!",
     "atLeastOneUser": "You need to have at least one member assigned.",
-    "selectAtLeastOneOption": "Select at least one option",
     "notValidChargingTargetFormat": "Use lowercase letters a-f, numbers 0-9, and hyphens (-) in the format: aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
   },
   "common": {
+    "all": "All",
     "documentation": "Documentation",
     "close": "Close",
     "cannotLoadData": "Cannot load data",
@@ -425,12 +428,11 @@
   }
   ,
   "ImportMembersDialog": {
-    "dialogTitle": "Reuse",
-    "chooseParentLabel": "Choose parent resource to reuse members from",
-    "whatToImportLabel": "What would you like to import?",
-    "serviceAccountsLabel": "Service Accounts",
-    "addMembersButton": "Add members",
-    "selectAllButton": "Select all",
-    "deselectAllButton": "Deselect all"
+    "dialogTitle": "Reuse Members",
+    "reuseFromLabel": "Reuse from",
+    "filterForLabel": "Filter for",
+    "addMembersButton0": "Add members",
+    "addMembersButton1": "Add 1 member",
+    "addMembersButtonN": "Add {{count}} members"
   }
 }

src/components/Members/EditMembers.tsx

@@ -78,7 +78,6 @@ export const EditMembers: FC<EditMembersProps> = ({
       imported.forEach((m) => byName.set(m.name, m));
       const merged = Array.from(byName.values());
       onMemberChanged(merged);
-      setIsImportDialogOpen(false);
     },
     [members, onMemberChanged],
   );
@@ -128,7 +127,7 @@ export const EditMembers: FC<EditMembersProps> = ({
             icon={'cause'}
             onClick={handleOpenImportDialog}
           >
-            {t('ImportMembersDialog.dialogTitle')}
+            {t('EditMembers.reuseMembersButton')}
           </Button>
         )}
       </FlexBox>
@@ -140,13 +139,15 @@ export const EditMembers: FC<EditMembersProps> = ({
         onSave={handleSaveMember}
       />
 
-      <ImportMembersDialog
-        open={isImportDialogOpen}
-        workspaceName={workspaceName}
-        projectName={computedProjectName}
-        onClose={handleCloseImportDialog}
-        onImport={handleImportMembers}
-      />
+      {computedProjectName && (
+        <ImportMembersDialog
+          isOpen={isImportDialogOpen}
+          workspaceName={workspaceName}
+          projectName={computedProjectName}
+          onClose={handleCloseImportDialog}
+          onImport={handleImportMembers}
+        />
+      )}
 
       <MemberTable
         requireAtLeastOneMember={requireAtLeastOneMember}

src/components/Members/ImportMembersDialog.module.css

@@ -2,8 +2,17 @@
   min-width: 650px;
 }
 
-.table {
-  width: 100%;
-  max-height: 400px;
-  overflow-y: auto;
+.grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 1rem;
+  padding: 1rem 1rem 2rem;
+}
+
+.gridColumnLabel {
+  align-self: center;
+}
+
+.tableContainer {
+  padding: 1rem;
 }