fix/ fix the_UI_of_workspace_list_mostly_done

Signed-off-by: Qxisylolo <[email protected]>

src/core/public/chrome/ui/header/header.scss

@@ -13,7 +13,7 @@
   gap: $euiSizeS;
 
   &.primaryHeader {
-    margin-top: $euiSizeM;
+    padding-top: $euiSizeM;
   }
 
   &.primaryApplicationHeader {

src/plugins/workspace/public/components/workspace_list/index.test.tsx

@@ -204,10 +204,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];
@@ -240,8 +262,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}`,
@@ -252,11 +274,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 () => {

src/plugins/workspace/public/components/workspace_list/index.tsx

@@ -59,9 +59,11 @@ export interface WorkspaceListInnerProps extends WorkspaceListProps {
   excludedColumns?: string[];
 }
 
-interface WorkspaceAttributeWithUseCaseIDAndDataSources extends WorkspaceAttribute {
+interface WorkspaceAttributeWithUseCaseIDAndDataSourceAndOwners
+  extends WorkspaceAttributeWithPermission {
   useCase?: string;
   dataSources?: string[];
+  owners?: string[];
 }
 
 export const WorkspaceList = (props: WorkspaceListProps) => {
@@ -141,20 +143,24 @@ export const WorkspaceListInner = ({
     }
   }, [savedObjects, uiSettings]);
 
-  const newWorkspaceList: WorkspaceAttributeWithUseCaseIDAndDataSources[] = useMemo(() => {
-    return workspaceList.map(
-      (workspace): WorkspaceAttributeWithUseCaseIDAndDataSources => {
-        const associatedDataSourcesTitles = allDataSources
-          .filter((ds) => ds.workspaces && ds.workspaces.includes(workspace.id))
-          .map((ds) => ds.title as string);
-        return {
-          ...workspace,
-          useCase: extractUseCaseFromFeatures(workspace.features ?? []),
-          dataSources: associatedDataSourcesTitles,
-        };
-      }
-    );
+  const newWorkspaceList: WorkspaceAttributeWithUseCaseIDAndDataSourceAndOwners[] = useMemo(() => {
+    return workspaceList.map((workspace) => {
+      const workspaceWithPermissions = workspace as WorkspaceAttributeWithPermission;
+      const associatedDataSourcesTitles = allDataSources
+        .filter((ds) => ds.workspaces && ds.workspaces.includes(workspace.id))
+        .map((ds) => ds.title as string);
+
+      const owners =
+        workspaceWithPermissions.permissions?.[WorkspacePermissionMode.Write]?.users ?? [];
+      return {
+        ...workspaceWithPermissions,
+        useCase: extractUseCaseFromFeatures(workspace.features ?? []),
+        dataSources: associatedDataSourcesTitles,
+        owners,
+      };
+    });
   }, [workspaceList, extractUseCaseFromFeatures, allDataSources]);
+
   const workspaceCreateUrl = useMemo(() => {
     if (!application) {
       return '';
@@ -267,7 +273,7 @@ export const WorkspaceListInner = ({
     tab: DetailTab
   ) => {
     const amount = data.length;
-    const mostDisplayedTitles = data.slice(0, maxDisplayedAmount).join(',');
+    const mostDisplayedTitles = data.slice(0, maxDisplayedAmount).join(', ');
     return amount <= maxDisplayedAmount ? (
       mostDisplayedTitles
     ) : (
@@ -353,25 +359,22 @@ export const WorkspaceListInner = ({
           name: useCase!,
         })),
       },
-      // {
-      //   multiSelect: 'or',
-      //   type: 'field_value_selection',
-      //   field: 'permissions',
-      //   name: 'Owners',
-      //   options: Array.from(
-      //     new Set(newWorkspaceList.map(({ permissions }) => permissions).filter(Boolean))
-      //   ).map((useCase) => ({
-      //     value: useCase!,
-      //     name: useCase!,
-      //   })),
-      // },
+      {
+        multiSelect: 'or',
+        type: 'field_value_selection',
+        field: 'owners',
+        name: 'Owners',
+        options: Array.from(new Set(newWorkspaceList.flatMap(({ owners }) => owners || []))).map(
+          (owner) => ({
+            value: owner,
+            name: owner,
+          })
+        ),
+      },
     ],
     toolsLeft: renderToolsLeft(),
   };
 
-  // eslint-disable-next-line
-  console.log('newWorkspace', newWorkspaceList);
-
   const columnsWithoutActions = [
     {
       field: 'name',
@@ -408,6 +411,7 @@ export const WorkspaceListInner = ({
 
     {
       field: 'description',
+
       name: i18n.translate('workspace.list.columns.description.title', {
         defaultMessage: 'Description',
       }),
@@ -420,7 +424,7 @@ export const WorkspaceListInner = ({
         >
           {/* 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}
+            {description ? description : '\u2014'}
           </EuiText>
         </EuiToolTip>
       ),
@@ -641,7 +645,7 @@ export const WorkspaceListInner = ({
           verticalPosition="center"
           horizontalPosition="center"
           paddingSize="m"
-          panelPaddingSize="l"
+          panelPaddingSize="m"
           hasShadow={false}
         >
           {workspaceListTable}