From 9d21b81cbb9877d6c2e1f8935cd89339592734a1 Mon Sep 17 00:00:00 2001
From: Qxisylolo <qianxisy@amazon.com>
Date: Thu, 19 Dec 2024 11:20:08 +0800
Subject: [PATCH] [workspace]Fix/the UI of workspace list table (#8219)

* fix/ fix the_UI_of_workspace_list

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/ fix the_UI_of_workspace_list_mostly_done

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/ fix the_UI_of_workspace_list_typo_mistake

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/the-UI-of-workspace-list-table, delete owner filter

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* fix/the-UI-of-workspace-list-table, fix a small bug

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* resolve comments, add tests

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* solve conflicts, update tests

Signed-off-by: Qxisylolo <qianxisy@amazon.com>

* Changeset file for PR #8219 created/updated

---------

Signed-off-by: Qxisylolo <qianxisy@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Yulong Ruan <ruanyl@amazon.com>
---
 changelogs/fragments/8219.yml                 |  2 +
 .../default_workspace.test.tsx.snap           | 97 ++-----------------
 .../__snapshots__/index.test.tsx.snap         | 16 +--
 .../components/workspace_list/index.test.tsx  | 59 ++++++++++-
 .../components/workspace_list/index.tsx       | 46 +++------
 5 files changed, 87 insertions(+), 133 deletions(-)
 create mode 100644 changelogs/fragments/8219.yml

diff --git a/changelogs/fragments/8219.yml b/changelogs/fragments/8219.yml
new file mode 100644
index 000000000000..8b18c883844e
--- /dev/null
+++ b/changelogs/fragments/8219.yml
@@ -0,0 +1,2 @@
+fix:
+- Fix/the UI of workspace list table ([#8219](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8219))
\ No newline at end of file
diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
index 1c2c3a3d01cb..b43e356078ea 100644
--- a/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/default_workspace.test.tsx.snap
@@ -82,7 +82,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
               </div>
             </div>
             <table
-              class="euiTable euiTable--compressed euiTable--responsive"
+              class="euiTable euiTable--responsive"
               id="__table_generated-id"
               tabindex="-1"
             >
@@ -157,24 +157,6 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       </span>
                     </span>
                   </th>
-                  <th
-                    class="euiTableHeaderCell"
-                    data-test-subj="tableHeaderCell_permissionMode_3"
-                    role="columnheader"
-                    scope="col"
-                    style="width: 10%;"
-                  >
-                    <span
-                      class="euiTableCellContent"
-                    >
-                      <span
-                        class="euiTableCellContent__text"
-                        title="Permissions"
-                      >
-                        Permissions
-                      </span>
-                    </span>
-                  </th>
                   <th
                     class="euiTableHeaderCell"
                     role="columnheader"
@@ -269,7 +251,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
                         >
                           should be able to see the description tooltip when hovering over the description
@@ -277,29 +259,6 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       </span>
                     </div>
                   </td>
-                  <td
-                    class="euiTableRowCell"
-                    style="width: 10%;"
-                  >
-                    <div
-                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                    >
-                      Permissions
-                    </div>
-                    <div
-                      class="euiTableCellContent euiTableCellContent--overflowingContent"
-                    >
-                      <span
-                        class="euiToolTipAnchor"
-                      >
-                        <div
-                          class="euiText euiText--extraSmall"
-                        >
-                          Admin
-                        </div>
-                      </span>
-                    </div>
-                  </td>
                   <td
                     class="euiTableRowCell euiTableRowCell--hasActions"
                   >
@@ -438,7 +397,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
                         >
                           should be able to see the description tooltip when hovering over the description
@@ -446,29 +405,6 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                       </span>
                     </div>
                   </td>
-                  <td
-                    class="euiTableRowCell"
-                    style="width: 10%;"
-                  >
-                    <div
-                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                    >
-                      Permissions
-                    </div>
-                    <div
-                      class="euiTableCellContent euiTableCellContent--overflowingContent"
-                    >
-                      <span
-                        class="euiToolTipAnchor"
-                      >
-                        <div
-                          class="euiText euiText--extraSmall"
-                        >
-                          Admin
-                        </div>
-                      </span>
-                    </div>
-                  </td>
                   <td
                     class="euiTableRowCell euiTableRowCell--hasActions"
                   >
@@ -607,31 +543,10 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
-                        />
-                      </span>
-                    </div>
-                  </td>
-                  <td
-                    class="euiTableRowCell"
-                    style="width: 10%;"
-                  >
-                    <div
-                      class="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-                    >
-                      Permissions
-                    </div>
-                    <div
-                      class="euiTableCellContent euiTableCellContent--overflowingContent"
-                    >
-                      <span
-                        class="euiToolTipAnchor"
-                      >
-                        <div
-                          class="euiText euiText--extraSmall"
                         >
-                          Admin
+                          —
                         </div>
                       </span>
                     </div>
@@ -736,7 +651,7 @@ exports[`UserDefaultWorkspace should render title and table normally 1`] = `
                         >
                           Rows per page
                           : 
-                          10
+                          20
                         </span>
                       </span>
                     </button>
diff --git a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
index 99a5203b3cc0..408e75b1aa58 100644
--- a/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
+++ b/src/plugins/workspace/public/components/workspace_list/__snapshots__/index.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
   >
     Organize collaborative projects with use-case-specific workspaces.
     <div
-      class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+      class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
       role="main"
     >
       <div>
@@ -163,7 +163,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
               </div>
             </div>
             <table
-              class="euiTable euiTable--compressed euiTable--responsive"
+              class="euiTable euiTable--responsive"
               id="__table_generated-id"
               tabindex="-1"
             >
@@ -414,7 +414,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
                         >
                           should be able to see the description tooltip when hovering over the description
@@ -587,7 +587,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
                         >
                           should be able to see the description tooltip when hovering over the description
@@ -760,9 +760,11 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                         class="euiToolTipAnchor"
                       >
                         <div
-                          class="euiText euiText--extraSmall eui-textTruncate"
+                          class="euiText euiText--small eui-textTruncate"
                           style="max-width: 150px;"
-                        />
+                        >
+                          —
+                        </div>
                       </span>
                     </div>
                   </td>
@@ -870,7 +872,7 @@ exports[`WorkspaceList should render title and table normally 1`] = `
                         >
                           Rows per page
                           : 
-                          10
+                          20
                         </span>
                       </span>
                     </button>
diff --git a/src/plugins/workspace/public/components/workspace_list/index.test.tsx b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
index ff4ad0647dfc..ad18fe5eed8b 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.test.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.test.tsx
@@ -215,10 +215,32 @@ describe('WorkspaceList', () => {
     const operationIcons = getAllByTestId('euiCollapsedItemActionsButton')[0];
     fireEvent.click(operationIcons);
     expect(getByText('Copy ID')).toBeInTheDocument();
+    expect(getByText('Set as my default')).toBeInTheDocument();
     expect(getByText('Edit')).toBeInTheDocument();
     expect(getByText('Delete')).toBeInTheDocument();
   });
 
+  it('should not be able to see the  operation: delete after click in the meatballs button for non-dashboard-admin', async () => {
+    const { getAllByTestId, queryByText } = render(
+      getWrapWorkspaceListInContext(
+        [
+          {
+            id: 'id2',
+            name: 'name2',
+            features: ['use-case-observability'],
+            description:
+              'should be able to see the description tooltip when hovering over the description',
+            lastUpdatedTime: '1999-08-06T00:00:00.00Z',
+          },
+        ],
+        false
+      )
+    );
+    const operationIcons = getAllByTestId('euiCollapsedItemActionsButton')[0];
+    fireEvent.click(operationIcons);
+    expect(queryByText('Delete')).not.toBeInTheDocument();
+  });
+
   it('should be able to copy workspace ID after clicking copy button', async () => {
     const { getByText, getAllByTestId } = render(getWrapWorkspaceListInContext());
     const operationIcons = getAllByTestId('euiCollapsedItemActionsButton')[0];
@@ -251,8 +273,8 @@ describe('WorkspaceList', () => {
 
   it('should be able to pagination when clicking pagination button', async () => {
     const list = [];
-    // add 15 items into list
-    for (let i = 100; i < 115; i++) {
+    // add 25 items into list
+    for (let i = 100; i < 125; i++) {
       list.push({
         id: `id${i}`,
         name: `name${i}`,
@@ -263,11 +285,11 @@ describe('WorkspaceList', () => {
     }
     const { getByTestId, getByText, queryByText } = render(getWrapWorkspaceListInContext(list));
     expect(getByText('name100')).toBeInTheDocument();
-    expect(queryByText('name110')).not.toBeInTheDocument();
+    expect(queryByText('name124')).not.toBeInTheDocument();
     const paginationButton = getByTestId('pagination-button-next');
     fireEvent.click(paginationButton);
     expect(queryByText('name100')).not.toBeInTheDocument();
-    expect(queryByText('name110')).toBeInTheDocument();
+    expect(queryByText('name124')).toBeInTheDocument();
   });
 
   it('should display create workspace button for dashboard admin', async () => {
@@ -280,6 +302,35 @@ describe('WorkspaceList', () => {
     expect(queryByText('Create workspace')).toBeNull();
   });
 
+  it('displays "Delete 1 workspace" when one workspace is selected for deletion', async () => {
+    const { getByText, container, getByTestId } = render(getWrapWorkspaceListInContext());
+    const checkboxes = container.querySelectorAll('[data-test-subj^="checkboxSelectRow-"]');
+    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
+    fireEvent.click(checkboxes[0]);
+    expect(getByText('Delete 1 workspace')).toBeInTheDocument();
+    const deleteButton = getByTestId('multi-deletion-button');
+    fireEvent.click(deleteButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).toBeInTheDocument();
+    const modalCancelButton = screen.getByLabelText('mock delete workspace modal button');
+    fireEvent.click(modalCancelButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).not.toBeInTheDocument();
+  });
+
+  it('should display "Delete 2 workspaces" and show modal when two workspaces are selected for deletion', async () => {
+    const { getByText, container, getByTestId } = render(getWrapWorkspaceListInContext());
+    const checkboxes = container.querySelectorAll('[data-test-subj^="checkboxSelectRow-"]');
+    expect(checkboxes.length).toBeGreaterThanOrEqual(2);
+    fireEvent.click(checkboxes[0]);
+    fireEvent.click(checkboxes[1]);
+    expect(getByText('Delete 2 workspaces')).toBeInTheDocument();
+    const deleteButton = getByTestId('multi-deletion-button');
+    fireEvent.click(deleteButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).toBeInTheDocument();
+    const modalCancelButton = screen.getByLabelText('mock delete workspace modal button');
+    fireEvent.click(modalCancelButton);
+    expect(screen.queryByLabelText('mock delete workspace modal')).not.toBeInTheDocument();
+  });
+
   it('should render data source badge when more than two data sources', async () => {
     const { getByTestId } = render(getWrapWorkspaceListInContext());
     await waitFor(() => {
diff --git a/src/plugins/workspace/public/components/workspace_list/index.tsx b/src/plugins/workspace/public/components/workspace_list/index.tsx
index baee010b73d6..b84139e94d49 100644
--- a/src/plugins/workspace/public/components/workspace_list/index.tsx
+++ b/src/plugins/workspace/public/components/workspace_list/index.tsx
@@ -110,7 +110,7 @@ export const WorkspaceListInner = ({
 
   const [pagination, setPagination] = useState({
     pageIndex: 0,
-    pageSize: 10,
+    pageSize: 20,
     pageSizeOptions: [5, 10, 20],
   });
   const [deletedWorkspaces, setDeletedWorkspaces] = useState<WorkspaceAttribute[]>([]);
@@ -293,7 +293,7 @@ export const WorkspaceListInner = ({
       return null;
     }
     const amount = data.length;
-    const mostDisplayedTitles = data.slice(0, maxDisplayedAmount).join(',');
+    const mostDisplayedTitles = data.slice(0, maxDisplayedAmount).join(', ');
     return amount <= maxDisplayedAmount ? (
       mostDisplayedTitles
     ) : (
@@ -319,7 +319,7 @@ export const WorkspaceListInner = ({
 
   const renderToolsLeft = () => {
     if (selection.length === 0) {
-      return;
+      return undefined;
     }
 
     const onClick = () => {
@@ -354,7 +354,13 @@ export const WorkspaceListInner = ({
             size="s"
             data-test-subj="multi-deletion-button"
           >
-            Delete {selection.length} Workspace
+            {i18n.translate('workspace.list.page.delete.button.info', {
+              defaultMessage:
+                '{selectedCount, plural, one {Delete # workspace} other {Delete # workspaces}}',
+              values: {
+                selectedCount: selection.length,
+              },
+            })}
           </EuiButton>
           {deletedWorkspaces && deletedWorkspaces.length > 0 && (
             <DeleteWorkspaceModal
@@ -372,6 +378,7 @@ export const WorkspaceListInner = ({
   };
 
   const search: EuiSearchBarProps = {
+    compressed: true,
     box: {
       incremental: true,
     },
@@ -427,6 +434,7 @@ export const WorkspaceListInner = ({
 
     {
       field: 'description',
+
       name: i18n.translate('workspace.list.columns.description.title', {
         defaultMessage: 'Description',
       }),
@@ -438,35 +446,12 @@ export const WorkspaceListInner = ({
           data-test-subj="workspaceList-hover-description"
         >
           {/* Here I need to set width manually as the tooltip will ineffect the property : truncateText ',  */}
-          <EuiText className="eui-textTruncate" size="xs" style={{ maxWidth: 150 }}>
-            {description}
+          <EuiText className="eui-textTruncate" size="s" style={{ maxWidth: 150 }}>
+            {description ? description : '\u2014'}
           </EuiText>
         </EuiToolTip>
       ),
     },
-    {
-      field: 'permissionMode',
-      name: i18n.translate('workspace.list.columns.permissions.title', {
-        defaultMessage: 'Permissions',
-      }),
-      width: '6%',
-      render: (permissionMode: WorkspaceAttributeWithPermission['permissionMode']) => {
-        return isDashboardAdmin ? (
-          <EuiToolTip
-            position="right"
-            content={i18n.translate('workspace.role.admin.description', {
-              defaultMessage: 'You are dashboard admin',
-            })}
-          >
-            <EuiText size="xs">
-              {i18n.translate('workspace.role.admin.name', { defaultMessage: 'Admin' })}
-            </EuiText>
-          </EuiToolTip>
-        ) : (
-          startCase(permissionMode)
-        );
-      },
-    },
     {
       field: 'lastUpdatedTime',
       name: i18n.translate('workspace.list.columns.lastUpdated.title', {
@@ -607,7 +592,6 @@ export const WorkspaceListInner = ({
 
   const workspaceListTable = (
     <EuiInMemoryTable
-      compressed={true}
       items={newWorkspaceList}
       columns={columns}
       itemId="id"
@@ -649,7 +633,7 @@ export const WorkspaceListInner = ({
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="m"
-          panelPaddingSize="l"
+          panelPaddingSize="m"
           hasShadow={false}
         >
           {workspaceListTable}