[HomePage] Add recent work section and additional styling for home page

changelogs/fragments/6277.yml

@@ -0,0 +1,2 @@
+feat:
+- Add recent work section and additional styling for home page ([#6277](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6277))

src/core/public/chrome/recently_accessed/recently_accessed_service.ts

@@ -41,6 +41,8 @@
   label: string;
   id: string;
   workspaceId?: string;
+  type?: string;
+  updatedAt?: number;
 }
 
 interface StartDeps {
@@ -59,15 +61,32 @@
 
     return {
       /** Adds a new item to the history. */
-      add: (link: string, label: string, id: string) => {
+      add: (
+        link: string,
+        label: string,
+        id: string,
+        extraProps?: { type?: string; updatedAt?: number }
+      ) => {
         const currentWorkspaceId = workspaces.currentWorkspaceId$.getValue();
-
-        history.add({
-          link,
-          label,
-          id,
-          ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
-        });
+        if (extraProps) {
+          const type = extraProps!.type;
+          const updatedAt = extraProps!.updatedAt;
+          history.add({
+            link,
+            label,
+            id,
+            ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
+            type,
+            updatedAt,
+          });
+        } else {
+          history.add({
+            link,
+            label,
+            id,
+            ...(currentWorkspaceId && { workspaceId: currentWorkspaceId }),
+          });
+        }
       },
 
       /** Gets the current array of history items. */
@@ -95,8 +114,15 @@
    * @param link a relative URL to the resource (not including the {@link HttpStart.basePath | `http.basePath`})
    * @param label the label to display in the UI
    * @param id a unique string used to de-duplicate the recently accessed list.
+   * @param type the item type
+   * @param updatedAt the time that the item is last updated at
    */
-  add(link: string, label: string, id: string): void;
+  add(
+    link: string,
+    label: string,
+    id: string,
+    extraProps?: { type?: string; updatedAt?: number }
+  ): void;
 
   /**
    * Gets an Array of the current recently accessed history.

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.test.ts

@@ -38,6 +38,7 @@ describe('useSavedDashboardInstance', () => {
         getFilters: () => dashboardAppStateStub.filters,
         optionsJSON: JSON.stringify(dashboardAppStateStub.options),
         getFullPath: () => `/${dashboardIdFromUrl}`,
+        getOpenSearchType: () => 'dashboard',
       },
     } as unknown) as SavedObjectDashboard;
     dashboard = new Dashboard(convertToSerializedDashboard(savedDashboardInstance));

src/plugins/dashboard/public/application/utils/use/use_saved_dashboard_instance.ts

@@ -129,7 +129,8 @@ export const useSavedDashboardInstance = ({
             chrome.recentlyAccessed.add(
               savedDashboard.getFullPath(),
               savedDashboard.title,
-              dashboardIdFromUrl
+              dashboardIdFromUrl,
+              { type: savedDashboard.getOpenSearchType(), updatedAt: Date.now() }
             );
             setSavedDashboardInstance(dashboardInstance);
           } catch (error: any) {

src/plugins/discover/public/application/view_components/utils/use_search.ts

@@ -82,6 +82,7 @@ export const useSearch = (services: DiscoverViewServices) => {
     core,
     toastNotifications,
     osdUrlStateStorage,
+    chrome,
   } = services;
   const timefilter = data.query.timefilter.timefilter;
   const fetchStateRef = useRef<{
@@ -308,7 +309,11 @@ export const useSearch = (services: DiscoverViewServices) => {
         chrome.recentlyAccessed.add(
           savedSearchInstance.getFullPath(),
           savedSearchInstance.title,
-          savedSearchInstance.id
+          savedSearchInstance.id,
+          {
+            type: savedSearchInstance.getOpenSearchType(),
+            updatedAt: Date.now(),
+          }
         );
       }
     })();

src/plugins/discover/public/saved_searches/types.ts

@@ -36,7 +36,14 @@ export type SortOrder = [string, SortDirection];
 export interface SavedSearch
   extends Pick<
     SavedObject,
-    'id' | 'title' | 'copyOnSave' | 'destroy' | 'lastSavedTitle' | 'save' | 'getFullPath'
+    | 'id'
+    | 'title'
+    | 'copyOnSave'
+    | 'destroy'
+    | 'lastSavedTitle'
+    | 'save'
+    | 'getFullPath'
+    | 'getOpenSearchType'
   > {
   searchSource: ISearchSource; // This is optional in SavedObject, but required for SavedSearch
   description?: string;

src/plugins/home/public/application/components/homepage/_homepage.scss

@@ -7,3 +7,19 @@
 .home-homepage-body--fill {
   min-height: $euiSize * 50;
 }
+
+.learn-basics-links {
+  font-size: 15px;
+}
+
+.popover-title-icon {
+  padding-left: 2px;
+}
+
+.empty-recent-work {
+  text-align: center;
+}
+
+.recent-work-title-icon {
+  padding-right: 4px;
+}

src/plugins/home/public/application/components/homepage/footer.tsx

@@ -68,38 +68,6 @@ export const Footer: React.FC = () => {
   return (
     <EuiFlexGroup direction="row" wrap>
       {isAdvancedSettingsEnabled && <EuiFlexItem grow={false}>{defaultRouteButton}</EuiFlexItem>}
-
-      <EuiFlexItem grow={false}>
-        <RedirectAppLinks application={application}>
-          <EuiButtonEmpty
-            flush="both"
-            href={getUrlForApp('home', { path: '#/feature_directory' })}
-            iconType="apps"
-            size="xs"
-          >
-            <FormattedMessage
-              id="home.footer.appDirectoryButtonLabel"
-              defaultMessage="View app directory"
-            />
-          </EuiButtonEmpty>
-        </RedirectAppLinks>
-      </EuiFlexItem>
-
-      <EuiFlexItem grow={false}>
-        <RedirectAppLinks application={application}>
-          <EuiButtonEmpty
-            flush="both"
-            href={getUrlForApp('opensearch_dashboards_overview')}
-            iconType="visualizeApp"
-            size="xs"
-          >
-            <FormattedMessage
-              id="home.footer.visualizeAndAnalyze"
-              defaultMessage="Visualize & Analyze"
-            />
-          </EuiButtonEmpty>
-        </RedirectAppLinks>
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };