fit&finish for workspace overview page

Signed-off-by: Hailong Cui <[email protected]>
Hailong-am · Sep 11, 2024 · 18f71fe · 18f71fe
1 parent 42317f1
commit 18f71fe
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 74 deletions.
diff --git a/src/core/public/chrome/ui/header/recent_items.tsx b/src/core/public/chrome/ui/header/recent_items.tsx
@@ -163,29 +163,35 @@ export const RecentItems = ({
       />
     </EuiPopover>
   );
-  const recentButton = (
+
+  const recentButtonIcon = (
+    <EuiButtonIcon
+      iconType="recent"
+      color="text"
+      size="xs"
+      aria-expanded={isPopoverOpen}
+      aria-haspopup="true"
+      aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsAriaLabel', {
+        defaultMessage: 'View recents',
+      })}
+      onClick={() => {
+        setIsPopoverOpen((prev) => !prev);
+      }}
+      data-test-subj="recentItemsSectionButton"
+      className="headerRecentItemsButton"
+    />
+  );
+  const recentButton = isPopoverOpen ? (
+    recentButtonIcon
+  ) : (
     <EuiToolTip
       content={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsTooltip', {
         defaultMessage: 'Recent',
       })}
       delay="long"
       position="bottom"
     >
-      <EuiButtonIcon
-        iconType="recent"
-        color="text"
-        size="xs"
-        aria-expanded={isPopoverOpen}
-        aria-haspopup="true"
-        aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.viewRecentItemsAriaLabel', {
-          defaultMessage: 'View recents',
-        })}
-        onClick={() => {
-          setIsPopoverOpen((prev) => !prev);
-        }}
-        data-test-subj="recentItemsSectionButton"
-        className="headerRecentItemsButton"
-      />
+      {recentButtonIcon}
     </EuiToolTip>
   );
 

diff --git a/src/core/utils/default_nav_groups.ts b/src/core/utils/default_nav_groups.ts
@@ -52,7 +52,7 @@ const defaultNavGroups = {
       defaultMessage: 'Observability',
     }),
     description: i18n.translate('core.ui.group.observability.description', {
-      defaultMessage: 'Gain visibility into your application and infrastructure',
+      defaultMessage: 'Gain visibility into your applications and infrastructure.',
     }),
     order: 4000,
     icon: 'wsObservability',
@@ -63,7 +63,7 @@ const defaultNavGroups = {
       defaultMessage: 'Security Analytics',
     }),
     description: i18n.translate('core.ui.group.security.analytics.description', {
-      defaultMessage: 'Enhance your security posture with advanced analytics',
+      defaultMessage: 'Enhance your security posture with advanced analytics.',
     }),
     order: 5000,
     icon: 'wsSecurityAnalytics',
@@ -86,7 +86,7 @@ const defaultNavGroups = {
       defaultMessage: 'Search',
     }),
     description: i18n.translate('core.ui.group.search.description', {
-      defaultMessage: 'Discover and query your data with ease',
+      defaultMessage: 'Discover and query your data with ease.',
     }),
     order: 6000,
     icon: 'wsSearch',

diff --git a/src/plugins/home/public/application/components/home_list_card.test.tsx b/src/plugins/home/public/application/components/home_list_card.test.tsx
@@ -8,6 +8,7 @@ import { render } from '@testing-library/react';
 
 import { HomeListCard, registerHomeListCardToPage } from './home_list_card';
 import { contentManagementPluginMocks } from '../../../../content_management/public';
+import { EuiLink } from '@elastic/eui';
 
 describe('<HomeListCard />', () => {
   it('should render static content normally', async () => {
@@ -38,7 +39,7 @@ it('should render View All button when allLink is provided', () => {
         description: 'Get started in minutes with OpenSearch Dashboards',
       },
     ],
-    allLink: 'https://opensearch.org/docs/latest/',
+    allLink: <EuiLink>View all</EuiLink>,
   };
 
   const { getByText } = render(<HomeListCard config={mockConfig} />);

diff --git a/src/plugins/home/public/application/components/home_list_card.tsx b/src/plugins/home/public/application/components/home_list_card.tsx
@@ -25,13 +25,13 @@ import {
 
 export const LEARN_OPENSEARCH_CONFIG = {
   title: i18n.translate('homepage.card.learnOpenSearch.title', {
-    defaultMessage: 'Learn Opensearch',
+    defaultMessage: 'OpenSearch Documentation',
   }),
   list: [
     {
       label: 'Quickstart guide',
       href: 'https://opensearch.org/docs/latest/dashboards/quickstart/',
-      description: 'Get started in minutes with OpenSearch Dashboards',
+      description: 'Start using OpenSearch Dashboards in minutes.',
     },
     {
       label: 'Building data visualizations',
@@ -41,10 +41,18 @@ export const LEARN_OPENSEARCH_CONFIG = {
     {
       label: 'Creating dashboards',
       href: 'https://opensearch.org/docs/latest/dashboards/dashboard/index/',
-      description: 'Build interactive dashboards to explore and analyze your data',
+      description: 'Build interactive dashboards to explore and analyze your data.',
     },
   ],
-  allLink: 'https://opensearch.org/docs/latest/',
+  allLink: (
+    <EuiLink href="https://opensearch.org/docs/latest/" target="_blank">
+      <EuiText size="s" className="eui-displayInline">
+        {i18n.translate('home.list.card.documentation', {
+          defaultMessage: 'Learn more in Documentation',
+        })}
+      </EuiText>
+    </EuiLink>
+  ),
 };
 
 export const WHATS_NEW_CONFIG = {
@@ -58,6 +66,15 @@ export const WHATS_NEW_CONFIG = {
       description: 'Get started in minutes with OpenSearch Dashboards',
     },
   ],
+  allLink: (
+    <EuiLink href="https://opensearch.org" target="_blank">
+      <EuiText size="s" className="eui-displayInline">
+        {i18n.translate('home.list.card.whatsnew', {
+          defaultMessage: 'View all on OpenSearch.org',
+        })}
+      </EuiText>
+    </EuiLink>
+  ),
 };
 
 interface Config {
@@ -67,7 +84,7 @@ interface Config {
     href: string;
     description: string;
   }>;
-  allLink?: string;
+  allLink?: React.JSX.Element;
 }
 
 export const HomeListCard = ({ config }: { config: Config }) => {
@@ -105,17 +122,7 @@ export const HomeListCard = ({ config }: { config: Config }) => {
             )}
           </EuiFlexItem>
           <EuiSpacer />
-          <EuiFlexItem grow={false}>
-            {config.allLink ? (
-              <EuiLink href={config.allLink} target="_blank">
-                <EuiText size="s" className="eui-displayInline">
-                  {i18n.translate('home.list.card.view_all', {
-                    defaultMessage: 'View all',
-                  })}
-                </EuiText>
-              </EuiLink>
-            ) : null}
-          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{config.allLink}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiPanel>
     </>

diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.test.tsx
@@ -25,18 +25,18 @@ describe('Sample data card', () => {
         "cardProps": Object {
           "selectable": Object {
             "children": <EuiI18n
-              default="with Sample Datasets"
+              default="Sample Datasets"
               token="home.sampleData.card.footer"
             />,
             "isSelected": false,
             "onClick": [Function],
           },
         },
-        "description": "You can install sample data to experiment with OpenSearch Dashboards.",
+        "description": "Explore sample data before adding your own.",
         "id": "sample_data",
         "kind": "card",
         "order": 0,
-        "title": "Try openSearch",
+        "title": "Try OpenSearch",
       }
     `);
 

diff --git a/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx b/src/plugins/home/public/application/components/sample_data/sample_data_card.tsx
@@ -27,14 +27,14 @@ export const registerSampleDataCard = (
       kind: 'card',
       order,
       description: i18n.translate('home.sampleData.card.description', {
-        defaultMessage: 'You can install sample data to experiment with OpenSearch Dashboards.',
+        defaultMessage: 'Explore sample data before adding your own.',
       }),
       title: i18n.translate('home.sampleData.card.title', {
-        defaultMessage: 'Try openSearch',
+        defaultMessage: 'Try OpenSearch',
       }),
       cardProps: {
         selectable: {
-          children: <EuiI18n token="home.sampleData.card.footer" default="with Sample Datasets" />,
+          children: <EuiI18n token="home.sampleData.card.footer" default="Sample Datasets" />,
           isSelected: false,
           onClick: () => {
             // TODO change to a modal

diff --git a/src/plugins/saved_objects_management/public/management_section/recent_work.test.tsx b/src/plugins/saved_objects_management/public/management_section/recent_work.test.tsx
@@ -59,9 +59,9 @@ const getStartMockForRecentWork = () => {
 };
 
 describe('<RecentWork />', () => {
-  it('render with emty recent work', async () => {
+  it('render with empty recent work', async () => {
     const { findByText } = render(<RecentWork core={getStartMockForRecentWork()} />);
-    await findByText('No assets found');
+    await findByText('No assets to display');
   });
 
   it('render with recent works', async () => {

diff --git a/src/plugins/saved_objects_management/public/management_section/recent_work.tsx b/src/plugins/saved_objects_management/public/management_section/recent_work.tsx
@@ -21,6 +21,7 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  EuiSmallButton,
 } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import {
@@ -97,6 +98,7 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
   const recently$Ref = useRef(core.chrome.recentlyAccessed.get$());
   const recentAccessed = useObservable(recently$Ref.current, []);
   const workspaceList = useObservable(core.workspaces.workspaceList$, []);
+  const currentWorkspace = useObservable(core.workspaces.currentWorkspace$, undefined);
   const [selectedType, setSelectedType] = useState(allOption);
   const [selectedSort, setSelectedSort] = useState(recentlyViewed);
   const [detailedSavedObjects, setDetailedSavedObjects] = useState<DetailedRecentlyAccessedItem[]>(
@@ -132,6 +134,12 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
   useEffect(() => {
     const savedObjects = recentAccessed
       .filter((item) => item.meta?.type)
+      .filter((item) => {
+        if (currentWorkspace) {
+          return item.workspaceId === currentWorkspace?.id;
+        }
+        return true;
+      })
       .map((item) => ({
         type: item.meta?.type || '',
         id: item.id,
@@ -159,7 +167,7 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
         setDetailedSavedObjects(formatDetailedSavedObjects);
       });
     }
-  }, [core.savedObjects.client, recentAccessed, core.http, workspaceList]);
+  }, [core.savedObjects.client, recentAccessed, core.http, workspaceList, currentWorkspace]);
 
   return (
     <EuiPanel>
@@ -181,7 +189,7 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
                 position="right"
                 content={i18n.translate('savedObjectsManagement.recentWorkSection.assetsInfo', {
                   defaultMessage:
-                    'Dashboards, visualizations, saved queries, and other assets within your Worksapces.',
+                    'Dashboards, visualizations, saved queries, and other assets within your Workspaces.',
                 })}
                 data-test-subj="assetsTooltip"
               >
@@ -243,6 +251,7 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
                         <EuiIcon
                           style={{ marginRight: widthForRightMargin }}
                           type={recentAccessItem.meta.icon || 'apps'}
+                          color="subdued"
                         />
                       </EuiFlexItem>
                       <EuiFlexItem grow={false}>
@@ -293,7 +302,7 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
                           </EuiFlexItem>
                         </EuiFlexGrid>
                       </EuiFlexItem>
-                      {workspaceEnabled && (
+                      {workspaceEnabled && !currentWorkspace && (
                         <EuiFlexItem>
                           <EuiFlexGrid columns={2} gutterSize="s">
                             <EuiFlexItem grow={false}>
@@ -328,23 +337,48 @@ export const RecentWork = (props: { core: CoreStart; workspaceEnabled?: boolean
         </EuiFlexGroup>
       ) : (
         <EuiEmptyPrompt
-          icon={<EuiIcon size="l" type="layers" />}
           title={
-            <h2>
+            <h3>
               {i18n.translate('savedObjectsManagement.recentWorkSection.empty.title', {
-                defaultMessage: 'No assets found',
+                defaultMessage: 'No assets to display',
               })}
-            </h2>
+            </h3>
+          }
+          body={
+            <EuiFlexGroup
+              gutterSize="s"
+              justifyContent="spaceBetween"
+              alignItems="center"
+              direction="column"
+            >
+              <EuiFlexItem>
+                <EuiText color="subdued" size="s">
+                  {i18n.translate('savedObjectsManagement.recentWorkSection.empty.body', {
+                    defaultMessage: 'The recent assets will appear here.',
+                  })}
+                </EuiText>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSmallButton
+                  iconType="popout"
+                  iconSide="right"
+                  iconGap="none"
+                  target="_blank"
+                  href={core.application.getUrlForApp(APP_ID)}
+                >
+                  {i18n.translate('savedObjectsManagement.recentWorkSection.empty.manageAssets', {
+                    defaultMessage: 'Manage assets',
+                  })}
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
           }
-          body={i18n.translate('savedObjectsManagement.recentWorkSection.empty.body', {
-            defaultMessage: "Assets you've recently viewed or updated will appear here.",
-          })}
         />
       )}
       <EuiSpacer size="m" />
       <EuiLink target="_blank" onClick={() => core.application.navigateToApp(APP_ID)}>
         <EuiText size="s" className="eui-displayInline">
-          {i18n.translate('home.list.card.view_all', {
+          {i18n.translate('savedObjectsManagement.recentWorkSection.view_all', {
             defaultMessage: 'View all',
           })}
         </EuiText>