[SecuritySolution] Dashboard listing UI

src/plugins/dashboard/public/dashboard_listing/dashboard_listing.test.tsx

@@ -12,14 +12,15 @@ import { mount, ReactWrapper } from 'enzyme';
 import { I18nProvider } from '@kbn/i18n-react';
 
 import { pluginServices } from '../services/plugin_services';
-import { DashboardListing, DashboardListingProps } from './dashboard_listing';
+import { DashboardListing } from './dashboard_listing';
 
 /**
  * Mock Table List view. This dashboard component is a wrapper around the shared UX table List view. We
  * need to ensure we're passing down the correct props, but the table list view itself doesn't need to be rendered
  * in our tests because it is covered in its package.
  */
 import { TableListView } from '@kbn/content-management-table-list-view';
+import { DashboardListingProps } from './types';
 // import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view';
 jest.mock('@kbn/content-management-table-list-view-table', () => {
   const originalModule = jest.requireActual('@kbn/content-management-table-list-view-table');

src/plugins/dashboard/public/dashboard_listing/dashboard_listing.tsx

@@ -7,73 +7,25 @@
  */
 
 import { FormattedRelative, I18nProvider } from '@kbn/i18n-react';
-import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   type TableListViewKibanaDependencies,
   TableListViewKibanaProvider,
-  type UserContentCommonSchema,
 } from '@kbn/content-management-table-list-view-table';
 import { TableListView } from '@kbn/content-management-table-list-view';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
-import type { SavedObjectsFindOptionsReference } from '@kbn/core/public';
+
 import { toMountPoint, useExecutionContext } from '@kbn/kibana-react-plugin/public';
 
-import {
-  DASHBOARD_CONTENT_ID,
-  SAVED_OBJECT_DELETE_TIME,
-  SAVED_OBJECT_LOADED_TIME,
-} from '../dashboard_constants';
-import {
-  dashboardListingTableStrings,
-  dashboardListingErrorStrings,
-} from './_dashboard_listing_strings';
 import { pluginServices } from '../services/plugin_services';
-import { confirmCreateWithUnsaved } from './confirm_overlays';
-import { DashboardItem } from '../../common/content_management';
-import { DashboardUnsavedListing } from './dashboard_unsaved_listing';
-import { DashboardApplicationService } from '../services/application/types';
-import { DashboardListingEmptyPrompt } from './dashboard_listing_empty_prompt';
-
-// because the type of `application.capabilities.advancedSettings` is so generic, the provider
-// requiring the `save` key to be part of it is causing type issues - so, creating a custom type
-type TableListViewApplicationService = DashboardApplicationService & {
-  capabilities: { advancedSettings: { save: boolean } };
-};
-
-const SAVED_OBJECTS_LIMIT_SETTING = 'savedObjects:listingLimit';
-const SAVED_OBJECTS_PER_PAGE_SETTING = 'savedObjects:perPage';
-
-interface DashboardSavedObjectUserContent extends UserContentCommonSchema {
-  attributes: {
-    title: string;
-    description?: string;
-    timeRestore: boolean;
-  };
-}
 
-const toTableListViewSavedObject = (hit: DashboardItem): DashboardSavedObjectUserContent => {
-  const { title, description, timeRestore } = hit.attributes;
-  return {
-    type: 'dashboard',
-    id: hit.id,
-    updatedAt: hit.updatedAt!,
-    references: hit.references,
-    attributes: {
-      title,
-      description,
-      timeRestore,
-    },
-  };
-};
-
-export type DashboardListingProps = PropsWithChildren<{
-  initialFilter?: string;
-  useSessionStorageIntegration?: boolean;
-  goToDashboard: (dashboardId?: string, viewMode?: ViewMode) => void;
-  getDashboardUrl: (dashboardId: string, usesTimeRestore: boolean) => string;
-}>;
+import { DashboardUnsavedListing } from './dashboard_unsaved_listing';
+import { useDashboardListingTable } from './hooks/use_dashboard_listing_table';
+import {
+  DashboardListingProps,
+  DashboardSavedObjectUserContent,
+  TableListViewApplicationService,
+} from './types';
 
 export const DashboardListing = ({
   children,
@@ -89,123 +41,22 @@ export const DashboardListing = ({
     http,
     chrome: { theme },
     savedObjectsTagging,
-    dashboardSessionStorage,
-    settings: { uiSettings },
-    notifications: { toasts },
+
     coreContext: { executionContext },
-    dashboardCapabilities: { showWriteControls },
-    dashboardContentManagement: { findDashboards, deleteDashboards },
   } = pluginServices.getServices();
 
-  const [unsavedDashboardIds, setUnsavedDashboardIds] = useState<string[]>(
-    dashboardSessionStorage.getDashboardIdsWithUnsavedChanges()
-  );
-
   useExecutionContext(executionContext, {
     type: 'application',
     page: 'list',
   });
 
-  const listingLimit = uiSettings.get(SAVED_OBJECTS_LIMIT_SETTING);
-  const initialPageSize = uiSettings.get(SAVED_OBJECTS_PER_PAGE_SETTING);
-
-  const createItem = useCallback(() => {
-    if (useSessionStorageIntegration && dashboardSessionStorage.dashboardHasUnsavedEdits()) {
-      confirmCreateWithUnsaved(() => {
-        dashboardSessionStorage.clearState();
-        goToDashboard();
-      }, goToDashboard);
-      return;
-    }
-    goToDashboard();
-  }, [dashboardSessionStorage, goToDashboard, useSessionStorageIntegration]);
-
-  const fetchItems = useCallback(
-    (
-      searchTerm: string,
-      {
-        references,
-        referencesToExclude,
-      }: {
-        references?: SavedObjectsFindOptionsReference[];
-        referencesToExclude?: SavedObjectsFindOptionsReference[];
-      } = {}
-    ) => {
-      const searchStartTime = window.performance.now();
-
-      return findDashboards
-        .search({
-          search: searchTerm,
-          size: listingLimit,
-          hasReference: references,
-          hasNoReference: referencesToExclude,
-        })
-        .then(({ total, hits }) => {
-          const searchEndTime = window.performance.now();
-          const searchDuration = searchEndTime - searchStartTime;
-          reportPerformanceMetricEvent(pluginServices.getServices().analytics, {
-            eventName: SAVED_OBJECT_LOADED_TIME,
-            duration: searchDuration,
-            meta: {
-              saved_object_type: DASHBOARD_CONTENT_ID,
-            },
-          });
-          return {
-            total,
-            hits: hits.map(toTableListViewSavedObject),
-          };
-        });
-    },
-    [findDashboards, listingLimit]
-  );
-
-  const deleteItems = useCallback(
-    async (dashboardsToDelete: Array<{ id: string }>) => {
-      try {
-        const deleteStartTime = window.performance.now();
-
-        await deleteDashboards(
-          dashboardsToDelete.map(({ id }) => {
-            dashboardSessionStorage.clearState(id);
-            return id;
-          })
-        );
-
-        const deleteDuration = window.performance.now() - deleteStartTime;
-        reportPerformanceMetricEvent(pluginServices.getServices().analytics, {
-          eventName: SAVED_OBJECT_DELETE_TIME,
-          duration: deleteDuration,
-          meta: {
-            saved_object_type: DASHBOARD_CONTENT_ID,
-            total: dashboardsToDelete.length,
-          },
-        });
-      } catch (error) {
-        toasts.addError(error, {
-          title: dashboardListingErrorStrings.getErrorDeletingDashboardToast(),
-        });
-      }
-
-      setUnsavedDashboardIds(dashboardSessionStorage.getDashboardIdsWithUnsavedChanges());
-    },
-    [dashboardSessionStorage, deleteDashboards, toasts]
-  );
-
-  const editItem = useCallback(
-    ({ id }: { id: string | undefined }) => goToDashboard(id, ViewMode.EDIT),
-    [goToDashboard]
-  );
-  const emptyPrompt = (
-    <DashboardListingEmptyPrompt
-      createItem={createItem}
-      goToDashboard={goToDashboard}
-      unsavedDashboardIds={unsavedDashboardIds}
-      setUnsavedDashboardIds={setUnsavedDashboardIds}
-      useSessionStorageIntegration={useSessionStorageIntegration}
-    />
-  );
-
-  const { getEntityName, getTableListTitle, getEntityNamePlural } = dashboardListingTableStrings;
+  const { unsavedDashboardIds, refreshUnsavedDashboards, tableListViewTableProps } =
+    useDashboardListingTable({
+      goToDashboard,
+      getDashboardUrl,
+      useSessionStorageIntegration,
+      initialFilter,
+    });
 
   const savedObjectsTaggingFakePlugin = useMemo(() => {
     return savedObjectsTagging.hasApi // TODO: clean up this logic once https://github.com/elastic/kibana/issues/140433 is resolved
@@ -231,32 +82,13 @@ export const DashboardListing = ({
           FormattedRelative,
         }}
       >
-        <TableListView<DashboardSavedObjectUserContent>
-          getDetailViewLink={({ id, attributes: { timeRestore } }) =>
-            getDashboardUrl(id, timeRestore)
-          }
-          deleteItems={!showWriteControls ? undefined : deleteItems}
-          createItem={!showWriteControls ? undefined : createItem}
-          editItem={!showWriteControls ? undefined : editItem}
-          entityNamePlural={getEntityNamePlural()}
-          title={getTableListTitle()}
-          headingId="dashboardListingHeading"
-          initialPageSize={initialPageSize}
-          initialFilter={initialFilter}
-          entityName={getEntityName()}
-          listingLimit={listingLimit}
-          emptyPrompt={emptyPrompt}
-          findItems={fetchItems}
-          id="dashboard"
-        >
+        <TableListView<DashboardSavedObjectUserContent> {...tableListViewTableProps}>
           <>
             {children}
             <DashboardUnsavedListing
               goToDashboard={goToDashboard}
               unsavedDashboardIds={unsavedDashboardIds}
-              refreshUnsavedDashboards={() =>
-                setUnsavedDashboardIds(dashboardSessionStorage.getDashboardIdsWithUnsavedChanges())
-              }
+              refreshUnsavedDashboards={refreshUnsavedDashboards}
             />
           </>
         </TableListView>

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_empty_prompt.test.tsx

@@ -34,6 +34,7 @@ const makeDefaultProps = (): DashboardListingEmptyPromptProps => ({
   goToDashboard: jest.fn(),
   setUnsavedDashboardIds: jest.fn(),
   useSessionStorageIntegration: true,
+  disableCreateDashboardButton: false,
 });
 
 function mountWith({
@@ -75,6 +76,21 @@ test('renders empty prompt with link when showWriteControls is on', async () =>
   expect(component!.find('EuiLink').length).toBe(1);
 });
 
+test('renders disabled action button when disableCreateDashboardButton is true', async () => {
+  pluginServices.getServices().dashboardCapabilities.showWriteControls = true;
+
+  let component: ReactWrapper;
+  await act(async () => {
+    ({ component } = mountWith({ props: { disableCreateDashboardButton: true } }));
+  });
+
+  component!.update();
+
+  expect(component!.find(`[data-test-subj="newItemButton"]`).first().prop('disabled')).toEqual(
+    true
+  );
+});
+
 test('renders continue button when no dashboards exist but one is in progress', async () => {
   pluginServices.getServices().dashboardCapabilities.showWriteControls = true;
   let component: ReactWrapper;

src/plugins/dashboard/public/dashboard_listing/dashboard_listing_empty_prompt.tsx

@@ -22,13 +22,14 @@ import {
   getNewDashboardTitle,
   dashboardUnsavedListingStrings,
 } from './_dashboard_listing_strings';
-import { DashboardListingProps } from './dashboard_listing';
 import { pluginServices } from '../services/plugin_services';
 import { confirmDiscardUnsavedChanges } from './confirm_overlays';
 import { DASHBOARD_PANELS_UNSAVED_ID } from '../services/dashboard_session_storage/dashboard_session_storage_service';
+import { DashboardListingProps } from './types';
 
 export interface DashboardListingEmptyPromptProps {
   createItem: () => void;
+  disableCreateDashboardButton?: boolean;
   unsavedDashboardIds: string[];
   goToDashboard: DashboardListingProps['goToDashboard'];
   setUnsavedDashboardIds: React.Dispatch<React.SetStateAction<string[]>>;
@@ -41,6 +42,7 @@ export const DashboardListingEmptyPrompt = ({
   unsavedDashboardIds,
   goToDashboard,
   createItem,
+  disableCreateDashboardButton,
 }: DashboardListingEmptyPromptProps) => {
   const {
     application,
@@ -56,7 +58,13 @@ export const DashboardListingEmptyPrompt = ({
   const getEmptyAction = useCallback(() => {
     if (!isEditingFirstDashboard) {
       return (
-        <EuiButton onClick={createItem} fill iconType="plusInCircle" data-test-subj="newItemButton">
+        <EuiButton
+          onClick={createItem}
+          fill
+          iconType="plusInCircle"
+          data-test-subj="newItemButton"
+          disabled={disableCreateDashboardButton}
+        >
           {noItemsStrings.getCreateNewDashboardText()}
         </EuiButton>
       );
@@ -94,11 +102,12 @@ export const DashboardListingEmptyPrompt = ({
       </EuiFlexGroup>
     );
   }, [
-    dashboardSessionStorage,
     isEditingFirstDashboard,
+    createItem,
+    disableCreateDashboardButton,
+    dashboardSessionStorage,
     setUnsavedDashboardIds,
     goToDashboard,
-    createItem,
   ]);
 
   if (!showWriteControls) {