UX improvements when saving and editng

elastic · Jun 25, 2020 · ffd1d40 · ffd1d40
1 parent d7e0f7f
commit ffd1d40
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 25 deletions.
diff --git a/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx b/x-pack/plugins/infra/public/components/saved_views/toolbar_control.tsx
@@ -42,8 +42,8 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
     find,
     errorOnFind,
     errorOnCreate,
-    createdId,
-    updatedId,
+    createdView,
+    updatedView,
     currentView,
     setCurrentView,
   } = useContext(SavedView.Context);
@@ -110,18 +110,20 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
   }, [errorOnCreate]);
 
   useEffect(() => {
-    if (updatedId !== undefined) {
+    if (updatedView !== undefined) {
+      setCurrentView(updatedView);
       // INFO: Close the modal after the view is created.
       closeUpdateModal();
     }
-  }, [updatedId, closeUpdateModal]);
+  }, [updatedView, setCurrentView, closeUpdateModal]);
 
   useEffect(() => {
-    if (createdId !== undefined) {
+    if (createdView !== undefined) {
       // INFO: Close the modal after the view is created.
+      setCurrentView(createdView);
       closeCreateModal();
     }
-  }, [createdId, closeCreateModal]);
+  }, [createdView, setCurrentView, closeCreateModal]);
 
   useEffect(() => {
     if (deletedId !== undefined) {
@@ -145,7 +147,13 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
           button={
             <EuiFlexGroup gutterSize={'s'} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiButtonIcon onClick={showSavedViewMenu} iconType="globe" />
+                <EuiButtonIcon
+                  aria-label={i18n.translate('xpack.infra.savedView.changeView', {
+                    defaultMessage: 'Change view',
+                  })}
+                  onClick={showSavedViewMenu}
+                  iconType="globe"
+                />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiDescriptionList onClick={showSavedViewMenu}>
@@ -198,7 +206,7 @@ export function SavedViewsToolbarControls<ViewState>(props: Props<ViewState>) {
             <EuiListGroupItem
               iconType={'save'}
               onClick={openSaveModal}
-              label={i18n.translate('xpack.infra.savedView.manageViews', {
+              label={i18n.translate('xpack.infra.savedView.saveNewView', {
                 defaultMessage: 'Save new view',
               })}
             />

diff --git a/x-pack/plugins/infra/public/components/saved_views/view_list_modal.tsx b/x-pack/plugins/infra/public/components/saved_views/view_list_modal.tsx
@@ -55,7 +55,7 @@ export function SavedViewListModal<ViewState>({ close, views, setView }: Props<V
           <EuiModalHeaderTitle>
             <FormattedMessage
               defaultMessage="Select a view to load"
-              id="xpack.infra.waffle.savedView.updateHeader"
+              id="xpack.infra.waffle.savedView.selectViewHeader"
             />
           </EuiModalHeaderTitle>
         </EuiModalHeader>

diff --git a/x-pack/plugins/infra/public/containers/saved_view/saved_view.tsx b/x-pack/plugins/infra/public/containers/saved_view/saved_view.tsx
@@ -49,8 +49,12 @@ export const useSavedView = (props: Props) => {
 
   const [currentView, setCurrentView] = useState<SavedView<any> | null>(null);
   const [loadingDefaultView, setLoadingDefaultView] = useState<boolean | null>(null);
-  const { create, error: errorOnCreate, createdId } = useCreateSavedObject(viewType);
-  const { update, error: errorOnUpdate, updatedId } = useUpdateSavedObject(viewType);
+  const { create, error: errorOnCreate, data: createdViewData, createdId } = useCreateSavedObject(
+    viewType
+  );
+  const { update, error: errorOnUpdate, data: updatedViewData, updatedId } = useUpdateSavedObject(
+    viewType
+  );
   const { deleteObject, deletedId } = useDeleteSavedObject(viewType);
   const { getObject, data: currentViewSavedObject } = useGetSavedObject(viewType);
   const [createError, setCreateError] = useState<string | null>(null);
@@ -158,7 +162,7 @@ export const useSavedView = (props: Props) => {
     const items: Array<SavedView<ViewState>> = [
       {
         name: i18n.translate('xpack.infra.savedView.defaultViewNameHosts', {
-          defaultMessage: 'Hosts',
+          defaultMessage: 'Default view',
         }),
         id: '0',
         isDefault: !defaultViewId || defaultViewId === '0', // If there is no default view then hosts is the default
@@ -171,6 +175,14 @@ export const useSavedView = (props: Props) => {
     return items;
   }, [defaultViewState, savedObjects, viewType, defaultViewId, mapToView]);
 
+  const createdView = useMemo(() => {
+    return createdViewData ? mapToView(createdViewData) : null;
+  }, [createdViewData, mapToView]);
+
+  const updatedView = useMemo(() => {
+    return updatedViewData ? mapToView(updatedViewData) : null;
+  }, [updatedViewData, mapToView]);
+
   const loadDefaultView = useCallback(() => {
     setLoadingDefaultView(true);
     getObject(defaultViewId);
@@ -222,9 +234,11 @@ export const useSavedView = (props: Props) => {
     defaultViewId,
     loading,
     updateView,
+    updatedView,
     updatedId,
     deletedId,
     createdId,
+    createdView,
     errorOnUpdate,
     errorOnFind,
     errorOnCreate: createError,

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts b/x-pack/plugins/infra/public/pages/metrics/inventory_view/hooks/use_waffle_view_state.ts
@@ -16,6 +16,13 @@ import {
   WaffleFiltersState,
 } from './use_waffle_filters';
 
+export const DEFAULT_WAFFLE_VIEW_STATE: WaffleViewState = {
+  ...DEFAULT_WAFFLE_OPTIONS_STATE,
+  filterQuery: DEFAULT_WAFFLE_FILTERS_STATE,
+  time: DEFAULT_WAFFLE_TIME_STATE.currentTime,
+  autoReload: DEFAULT_WAFFLE_TIME_STATE.isAutoReloading,
+};
+
 export const useWaffleViewState = () => {
   const {
     metric,
@@ -53,13 +60,6 @@ export const useWaffleViewState = () => {
     legend,
   };
 
-  const defaultViewState: WaffleViewState = {
-    ...DEFAULT_WAFFLE_OPTIONS_STATE,
-    filterQuery: DEFAULT_WAFFLE_FILTERS_STATE,
-    time: DEFAULT_WAFFLE_TIME_STATE.currentTime,
-    autoReload: DEFAULT_WAFFLE_TIME_STATE.isAutoReloading,
-  };
-
   const onViewChange = useCallback(
     (newState: WaffleViewState) => {
       setWaffleOptionsState({
@@ -89,7 +89,7 @@ export const useWaffleViewState = () => {
 
   return {
     viewState,
-    defaultViewState,
+    defaultViewState: DEFAULT_WAFFLE_VIEW_STATE,
     onViewChange,
   };
 };

diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
@@ -24,7 +24,7 @@ import { useKibana } from '../../../../../../../src/plugins/kibana_react/public'
 import { Layout } from './components/layout';
 import { useLinkProps } from '../../../hooks/use_link_props';
 import { SavedView } from '../../../containers/saved_view/saved_view';
-import { useWaffleViewState } from './hooks/use_waffle_view_state';
+import { DEFAULT_WAFFLE_VIEW_STATE } from './hooks/use_waffle_view_state';
 import { useHistory } from '../../../utils/history_context';
 
 export const SnapshotPage = () => {
@@ -34,6 +34,7 @@ export const SnapshotPage = () => {
     isLoading,
     loadSourceFailureMessage,
     loadSource,
+    source,
     metricIndicesExist,
   } = useContext(Source.Context);
   useTrackPageview({ app: 'infra_metrics', path: 'inventory' });
@@ -43,8 +44,6 @@ export const SnapshotPage = () => {
   const getQueryStringFromLocation = (location: Location) => location.search.substring(1);
   const queryString = history?.location ? getQueryStringFromLocation(history.location) : '';
 
-  const { defaultViewState } = useWaffleViewState();
-
   const tutorialLinkProps = useLinkProps({
     app: 'home',
     hash: '/tutorial_directory/metrics',
@@ -63,15 +62,15 @@ export const SnapshotPage = () => {
             })
           }
         />
-        {isLoading ? (
+        {isLoading && !source ? (
           <SourceLoadingPage />
         ) : metricIndicesExist ? (
           <>
             <FilterBar />
             <SavedView.Provider
               shouldLoadDefault={!queryString}
               viewType={'inventory-view'}
-              defaultViewState={defaultViewState}
+              defaultViewState={DEFAULT_WAFFLE_VIEW_STATE}
             >
               <Layout />
             </SavedView.Provider>