From 7966f73cb1223ed540233590a5e68ccc3b0e65d9 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Thu, 15 Feb 2024 22:05:00 +0530
Subject: [PATCH 1/4] Align select dropdown styles in create directory

---
 src/dsync/CreateDirectory/index.lite.tsx | 6 +++++-
 src/dsync/types.ts                       | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/dsync/CreateDirectory/index.lite.tsx b/src/dsync/CreateDirectory/index.lite.tsx
index 7acafa7cd..61679aca9 100644
--- a/src/dsync/CreateDirectory/index.lite.tsx
+++ b/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}
diff --git a/src/dsync/types.ts b/src/dsync/types.ts
index e43665f93..049230518 100644
--- a/src/dsync/types.ts
+++ b/src/dsync/types.ts
@@ -13,6 +13,7 @@ export interface CreateDirectoryProps {
   classNames?: {
     fieldContainer?: string;
     input?: string;
+    select?: string;
     label?: string;
     button?: { ctoa?: string };
   };
@@ -92,6 +93,7 @@ export interface DirectoriesWrapperProps {
     button?: { ctoa?: string; destructive?: string };
     input?: string;
     textarea?: string;
+    select?: string;
     confirmationPrompt?: ConfirmationPromptProps['classNames'];
     secretInput?: string;
     section?: string;

From 9bffb460120ac339d4153fbb4cb1dfd15b672cc0 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Thu, 15 Feb 2024 22:36:09 +0530
Subject: [PATCH 2/4] Add the view action

---
 src/dsync/DirectoryList/index.lite.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/dsync/DirectoryList/index.lite.tsx b/src/dsync/DirectoryList/index.lite.tsx
index 0cfda9522..09e598ddd 100644
--- a/src/dsync/DirectoryList/index.lite.tsx
+++ b/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',

From 983dbf05a6a8214592c46fc61d6ebaab16105ae9 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Thu, 15 Feb 2024 22:36:48 +0530
Subject: [PATCH 3/4] Handle the action click in wrapper by using callback to
 effect route change

---
 src/dsync/DirectoriesWrapper/index.lite.tsx | 13 +++++++++----
 src/dsync/types.ts                          |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/dsync/DirectoriesWrapper/index.lite.tsx b/src/dsync/DirectoriesWrapper/index.lite.tsx
index 4983fc93e..24e663171 100644
--- a/src/dsync/DirectoriesWrapper/index.lite.tsx
+++ b/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>
diff --git a/src/dsync/types.ts b/src/dsync/types.ts
index 049230518..5b4757c4b 100644
--- a/src/dsync/types.ts
+++ b/src/dsync/types.ts
@@ -99,7 +99,7 @@ export interface DirectoriesWrapperProps {
     section?: string;
   };
   componentProps?: {
-    directoryList?: Partial<Omit<DirectoryListProps, 'handleActionClick'>>;
+    directoryList?: Partial<DirectoryListProps>;
     createDirectory?: Partial<CreateDirectoryProps>;
     editDirectory?: Partial<EditDirectoryProps>;
   };

From 114e23a6aaddb654685e80a36caf3f873f165148 Mon Sep 17 00:00:00 2001
From: Aswin V <vaswin91@gmail.com>
Date: Fri, 16 Feb 2024 00:03:51 +0530
Subject: [PATCH 4/4] Fix spacing between action buttons

---
 src/dsync/DirectoryList/index.lite.tsx   | 7 ++++++-
 src/dsync/DirectoryList/index.module.css | 4 ++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/dsync/DirectoryList/index.lite.tsx b/src/dsync/DirectoryList/index.lite.tsx
index 09e598ddd..3d21b6129 100644
--- a/src/dsync/DirectoryList/index.lite.tsx
+++ b/src/dsync/DirectoryList/index.lite.tsx
@@ -134,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>
diff --git a/src/dsync/DirectoryList/index.module.css b/src/dsync/DirectoryList/index.module.css
index 6420bd48d..84b740bf1 100644
--- a/src/dsync/DirectoryList/index.module.css
+++ b/src/dsync/DirectoryList/index.module.css
@@ -1,3 +1,7 @@
 .tableContainer {
   border-width: 1px;
 }
+
+.iconSpan:not(:first-child) {
+  margin-left: 0.5rem;
+}