[Infrastructure UI] Adopt new saved views API

x-pack/plugins/infra/public/components/saved_views/manage_views_flyout.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo } from 'react';
 import useToggle from 'react-use/lib/useToggle';
 
 import {
@@ -22,107 +22,85 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { SavedView } from '../../containers/saved_view/saved_view';
+import { EuiBasicTableColumn } from '@elastic/eui';
+import { EuiButtonIcon } from '@elastic/eui';
+import { MetricsExplorerView } from '../../../common/metrics_explorer_views';
+import type { InventoryView } from '../../../common/inventory_views';
+import { UseInventoryViewsResult } from '../../hooks/use_inventory_views';
+import { UseMetricsExplorerViewsResult } from '../../hooks/use_metrics_explorer_views';
 
-interface Props<ViewState> {
-  views: Array<SavedView<ViewState>>;
+type View = InventoryView | MetricsExplorerView;
+type UseViewResult = UseInventoryViewsResult | UseMetricsExplorerViewsResult;
+
+export interface ManageViewsFlyoutProps {
+  views: UseViewResult['views'];
   loading: boolean;
-  sourceIsLoading: boolean;
   onClose(): void;
-  onMakeDefaultView(id: string): void;
-  setView(viewState: ViewState): void;
-  onDeleteView(id: string): void;
+  onMakeDefaultView: UseViewResult['setDefaultViewById'];
+  onSwitchView: UseViewResult['switchViewById'];
+  onDeleteView: UseViewResult['deleteViewById'];
 }
 
 interface DeleteConfimationProps {
   isDisabled?: boolean;
   onConfirm(): void;
 }
 
-const DeleteConfimation = ({ isDisabled, onConfirm }: DeleteConfimationProps) => {
-  const [isConfirmVisible, toggleVisibility] = useToggle(false);
-
-  return isConfirmVisible ? (
-    <EuiFlexGroup>
-      <EuiButtonEmpty onClick={toggleVisibility} data-test-subj="hideConfirm">
-        <FormattedMessage defaultMessage="cancel" id="xpack.infra.waffle.savedViews.cancel" />
-      </EuiButtonEmpty>
-      <EuiButton
-        disabled={isDisabled}
-        fill={true}
-        iconType="trash"
-        color="danger"
-        onClick={onConfirm}
-        data-test-subj="showConfirm"
-      >
-        <FormattedMessage
-          defaultMessage="Delete view?"
-          id="xpack.infra.openView.actionNames.deleteConfirmation"
-        />
-      </EuiButton>
-    </EuiFlexGroup>
-  ) : (
-    <EuiButtonEmpty
-      data-test-subj="infraDeleteConfimationButton"
-      iconType="trash"
-      color="danger"
-      onClick={toggleVisibility}
-    />
-  );
+const searchConfig = {
+  box: { incremental: true },
 };
 
-export function SavedViewManageViewsFlyout<ViewState>({
+export function ManageViewsFlyout({
   onClose,
-  views,
-  setView,
+  views = [],
+  onSwitchView,
   onMakeDefaultView,
   onDeleteView,
   loading,
-  sourceIsLoading,
-}: Props<ViewState>) {
-  const [inProgressView, setInProgressView] = useState<string | null>(null);
+}: ManageViewsFlyoutProps) {
+  // Add name as top level property to allow in memory search
+  const namedViews = useMemo(() => views.map(addOwnName), [views]);
 
-  const renderName = (name: string, item: SavedView<ViewState>) => (
+  const renderName = (name: string, item: View) => (
     <EuiButtonEmpty
       key={item.id}
       data-test-subj="infraRenderNameButton"
       onClick={() => {
-        setView(item);
+        onSwitchView(item.id);
         onClose();
       }}
     >
       {name}
     </EuiButtonEmpty>
   );
 
-  const renderDeleteAction = (item: SavedView<ViewState>) => {
+  const renderDeleteAction = (item: View) => {
     return (
       <DeleteConfimation
         key={item.id}
-        isDisabled={item.isDefault}
+        isDisabled={item.attributes.isDefault}
         onConfirm={() => {
           onDeleteView(item.id);
         }}
       />
     );
   };
 
-  const renderMakeDefaultAction = (item: SavedView<ViewState>) => {
+  const renderMakeDefaultAction = (item: View) => {
     return (
-      <EuiButtonEmpty
+      <EuiButtonIcon
         key={item.id}
         data-test-subj="infraRenderMakeDefaultActionButton"
-        isLoading={inProgressView === item.id && sourceIsLoading}
-        iconType={item.isDefault ? 'starFilled' : 'starEmpty'}
+        iconType={item.attributes.isDefault ? 'starFilled' : 'starEmpty'}
+        size="s"
         onClick={() => {
-          setInProgressView(item.id);
           onMakeDefaultView(item.id);
         }}
       />
     );
   };
 
-  const columns = [
+  const columns: Array<EuiBasicTableColumn<View>> = [
     {
       field: 'name',
       name: i18n.translate('xpack.infra.openView.columnNames.name', { defaultMessage: 'Name' }),
@@ -139,7 +117,7 @@ export function SavedViewManageViewsFlyout<ViewState>({
           render: renderMakeDefaultAction,
         },
         {
-          available: (item: SavedView<ViewState>) => item.id !== '0',
+          available: (item) => !item.attributes.isStatic,
           render: renderDeleteAction,
         },
       ],
@@ -161,10 +139,10 @@ export function SavedViewManageViewsFlyout<ViewState>({
         </EuiFlyoutHeader>
         <EuiFlyoutBody>
           <EuiInMemoryTable
-            items={views}
+            items={namedViews}
             columns={columns}
             loading={loading}
-            search={true}
+            search={searchConfig}
             pagination={true}
             sorting={true}
           />
@@ -178,3 +156,41 @@ export function SavedViewManageViewsFlyout<ViewState>({
     </EuiPortal>
   );
 }
+
+const DeleteConfimation = ({ isDisabled, onConfirm }: DeleteConfimationProps) => {
+  const [isConfirmVisible, toggleVisibility] = useToggle(false);
+
+  return isConfirmVisible ? (
+    <EuiFlexGroup>
+      <EuiButtonEmpty onClick={toggleVisibility} data-test-subj="hideConfirm">
+        <FormattedMessage defaultMessage="cancel" id="xpack.infra.waffle.savedViews.cancel" />
+      </EuiButtonEmpty>
+      <EuiButton
+        disabled={isDisabled}
+        fill={true}
+        iconType="trash"
+        color="danger"
+        onClick={onConfirm}
+        data-test-subj="showConfirm"
+      >
+        <FormattedMessage
+          defaultMessage="Delete view?"
+          id="xpack.infra.openView.actionNames.deleteConfirmation"
+        />
+      </EuiButton>
+    </EuiFlexGroup>
+  ) : (
+    <EuiButtonIcon
+      data-test-subj="infraDeleteConfimationButton"
+      iconType="trash"
+      color="danger"
+      size="s"
+      onClick={toggleVisibility}
+    />
+  );
+};
+
+/**
+ * Helpers
+ */
+const addOwnName = (view: View) => ({ ...view, name: view.attributes.name });