Restore dsync user/group links (#903)

* Align select dropdown styles in create directory

* Add the view action

* Handle the action click in wrapper by using callback to effect route change

* Fix spacing between action buttons

Author: niwsa

src/dsync/CreateDirectory/index.lite.tsx

@@ -52,12 +52,15 @@ export default function CreateDirectory(props: CreateDirectoryProps) {
     get classes() {
       return {
         fieldContainer: cssClassAssembler(props.classNames?.fieldContainer, defaultClasses.fieldContainer),
-        label: cssClassAssembler(props.classNames?.label, defaultClasses.label),
         inputField: {
           label: props.classNames?.label,
           input: props.classNames?.input,
           container: props.classNames?.fieldContainer,
         },
+        select: {
+          label: props.classNames?.label,
+          select: props.classNames?.select,
+        },
       };
     },
     get shouldDisplayHeader() {
@@ -133,6 +136,7 @@ export default function CreateDirectory(props: CreateDirectoryProps) {
           <div class={state.classes.fieldContainer}>
             <Select
               label='Directory provider'
+              classNames={state.classes.select}
               options={state.providers}
               selectedValue={state.directory.type}
               handleChange={state.setProvider}

src/dsync/DirectoriesWrapper/index.lite.tsx

@@ -39,9 +39,14 @@ export default function DirectoriesWrapper(props: DirectoriesWrapperProps) {
     switchToCreateView() {
       state.view = 'CREATE';
     },
-    switchToEditView(action: 'edit' | 'view', directory: any) {
-      state.view = 'EDIT';
-      state.directoryToEdit = directory;
+    handleActionClick(action: 'edit' | 'view', directory: any) {
+      if (action === 'edit') {
+        state.view = 'EDIT';
+        state.directoryToEdit = directory;
+      } else {
+        typeof props.componentProps?.directoryList?.handleActionClick === 'function' &&
+          props.componentProps.directoryList.handleActionClick('view', directory);
+      }
     },
     switchToListView() {
       state.view = 'LIST';
@@ -79,7 +84,7 @@ export default function DirectoriesWrapper(props: DirectoriesWrapperProps) {
           <DirectoryList
             {...props.componentProps?.directoryList}
             urls={{ get: props.urls.get }}
-            handleActionClick={state.switchToEditView}
+            handleActionClick={state.handleActionClick}
             handleListFetchComplete={state.handleListFetchComplete}
             tenant={props.tenant}
             product={props.product}></DirectoryList>

src/dsync/DirectoryList/index.lite.tsx

@@ -35,6 +35,11 @@ export default function DirectoryList(props: DirectoryListProps) {
     },
     get actions(): TableProps['actions'] {
       return [
+        {
+          icon: 'EyeIcon',
+          label: 'View',
+          handleClick: (directory: Directory) => props.handleActionClick('view', directory),
+        },
         {
           icon: 'PencilIcon',
           label: 'Edit',
@@ -129,7 +134,12 @@ export default function DirectoryList(props: DirectoryListProps) {
           </Show>
         }>
         <div class={state.classes.tableContainer}>
-          <Table cols={state.colsToDisplay} data={state.directoryListData} actions={state.actions} />
+          <Table
+            cols={state.colsToDisplay}
+            data={state.directoryListData}
+            actions={state.actions}
+            classNames={{ iconSpan: defaultClasses.iconSpan }}
+          />
         </div>
       </Show>
     </LoadingContainer>

src/dsync/DirectoryList/index.module.css

@@ -1,3 +1,7 @@
 .tableContainer {
   border-width: 1px;
 }
+
+.iconSpan:not(:first-child) {
+  margin-left: 0.5rem;
+}

src/dsync/types.ts

@@ -13,6 +13,7 @@ export interface CreateDirectoryProps {
   classNames?: {
     fieldContainer?: string;
     input?: string;
+    select?: string;
     label?: string;
     button?: { ctoa?: string };
   };
@@ -92,12 +93,13 @@ export interface DirectoriesWrapperProps {
     button?: { ctoa?: string; destructive?: string };
     input?: string;
     textarea?: string;
+    select?: string;
     confirmationPrompt?: ConfirmationPromptProps['classNames'];
     secretInput?: string;
     section?: string;
   };
   componentProps?: {
-    directoryList?: Partial<Omit<DirectoryListProps, 'handleActionClick'>>;
+    directoryList?: Partial<DirectoryListProps>;
     createDirectory?: Partial<CreateDirectoryProps>;
     editDirectory?: Partial<EditDirectoryProps>;
   };