Added index refresh to SQL API indexing policy editor (#306)

* Index refresh component introduced

- Made all notifications in Mongo Index editor have 12 font size
- Added indexing policy refresh to sql indexing policy editor
- Added "you have unsaved changes" message, replace old message for lazy indexing policy changes

* formatting changes

* addressed PR comments

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.test.tsx

@@ -25,7 +25,9 @@ describe("IndexingPolicyComponent", () => {
     },
     onIndexingPolicyDirtyChange: () => {
       return;
-    }
+    },
+    indexTransformationProgress: undefined,
+    refreshIndexTransformationProgress: () => new Promise(jest.fn())
   };
 
   it("renders", () => {

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as monaco from "monaco-editor";
-import { isDirty } from "../SettingsUtils";
+import { isDirty, isIndexTransforming } from "../SettingsUtils";
 import { MessageBar, MessageBarType, Stack } from "office-ui-fabric-react";
-import { indexingPolicyTTLWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
+import { indexingPolicynUnsavedWarningMessage, titleAndInputStackProps } from "../SettingsRenderUtils";
+import { IndexingPolicyRefreshComponent } from "./IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
 export interface IndexingPolicyComponentProps {
   shouldDiscardIndexingPolicy: boolean;
@@ -12,6 +13,8 @@ export interface IndexingPolicyComponentProps {
   indexingPolicyContentBaseline: DataModels.IndexingPolicy;
   onIndexingPolicyContentChange: (newIndexingPolicy: DataModels.IndexingPolicy) => void;
   logIndexingPolicySuccessMessage: () => void;
+  indexTransformationProgress: number;
+  refreshIndexTransformationProgress: () => Promise<void>;
   onIndexingPolicyDirtyChange: (isIndexingPolicyDirty: boolean) => void;
 }
 
@@ -51,6 +54,9 @@ export class IndexingPolicyComponent extends React.Component<
     if (!this.indexingPolicyEditor) {
       this.createIndexingPolicyEditor();
     } else {
+      this.indexingPolicyEditor.updateOptions({
+        readOnly: isIndexTransforming(this.props.indexTransformationProgress)
+      });
       const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
       const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
       indexingPolicyEditorModel.setValue(value);
@@ -84,7 +90,7 @@ export class IndexingPolicyComponent extends React.Component<
     this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
       value: value,
       language: "json",
-      readOnly: false,
+      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
       ariaLabel: "Indexing Policy"
     });
     if (this.indexingPolicyEditor) {
@@ -108,8 +114,12 @@ export class IndexingPolicyComponent extends React.Component<
   public render(): JSX.Element {
     return (
       <Stack {...titleAndInputStackProps}>
+        <IndexingPolicyRefreshComponent
+          indexTransformationProgress={this.props.indexTransformationProgress}
+          refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
+        />
         {isDirty(this.props.indexingPolicyContent, this.props.indexingPolicyContentBaseline) && (
-          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicyTTLWarningMessage}</MessageBar>
+          <MessageBar messageBarType={MessageBarType.warning}>{indexingPolicynUnsavedWarningMessage}</MessageBar>
         )}
         <div className="settingsV2IndexingPolicyEditor" tabIndex={0} ref={this.indexingPolicyDiv}></div>
       </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.test.tsx

@@ -0,0 +1,15 @@
+import { shallow } from "enzyme";
+import React from "react";
+import { IndexingPolicyRefreshComponentProps, IndexingPolicyRefreshComponent } from "./IndexingPolicyRefreshComponent";
+
+describe("IndexingPolicyRefreshComponent", () => {
+  it("renders", () => {
+    const props: IndexingPolicyRefreshComponentProps = {
+      indexTransformationProgress: 90,
+      refreshIndexTransformationProgress: () => new Promise(jest.fn())
+    };
+
+    const wrapper = shallow(<IndexingPolicyRefreshComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { MessageBar, MessageBarType } from "office-ui-fabric-react";
+import {
+  mongoIndexTransformationRefreshingMessage,
+  renderMongoIndexTransformationRefreshMessage
+} from "../../SettingsRenderUtils";
+import { handleError } from "../../../../../Common/ErrorHandlingUtils";
+import { isIndexTransforming } from "../../SettingsUtils";
+
+export interface IndexingPolicyRefreshComponentProps {
+  indexTransformationProgress: number;
+  refreshIndexTransformationProgress: () => Promise<void>;
+}
+
+interface IndexingPolicyRefreshComponentState {
+  isRefreshing: boolean;
+}
+
+export class IndexingPolicyRefreshComponent extends React.Component<
+  IndexingPolicyRefreshComponentProps,
+  IndexingPolicyRefreshComponentState
+> {
+  constructor(props: IndexingPolicyRefreshComponentProps) {
+    super(props);
+    this.state = {
+      isRefreshing: false
+    };
+  }
+
+  private onClickRefreshIndexingTransformationLink = async () => await this.refreshIndexTransformationProgress();
+
+  private renderIndexTransformationWarning = (): JSX.Element => {
+    if (this.state.isRefreshing) {
+      return mongoIndexTransformationRefreshingMessage;
+    } else if (isIndexTransforming(this.props.indexTransformationProgress)) {
+      return renderMongoIndexTransformationRefreshMessage(
+        this.props.indexTransformationProgress,
+        this.onClickRefreshIndexingTransformationLink
+      );
+    }
+    return undefined;
+  };
+
+  private refreshIndexTransformationProgress = async () => {
+    this.setState({ isRefreshing: true });
+    try {
+      await this.props.refreshIndexTransformationProgress();
+    } catch (error) {
+      handleError(error, "Refreshing index transformation progress failed.", "RefreshIndexTransformationProgress");
+    } finally {
+      this.setState({ isRefreshing: false });
+    }
+  };
+
+  public render(): JSX.Element {
+    return this.renderIndexTransformationWarning() ? (
+      <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
+    ) : (
+      <></>
+    );
+  }
+}

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/__snapshots__/IndexingPolicyRefreshComponent.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IndexingPolicyRefreshComponent renders 1`] = `
+<StyledMessageBarBase
+  messageBarType={5}
+>
+  <Text
+    styles={
+      Object {
+        "root": Object {
+          "fontSize": 12,
+        },
+      }
+    }
+  >
+    You can make more indexing changes once the current index transformation has completed. It is 90% complete. 
+    <StyledLinkBase
+      onClick={[Function]}
+    >
+      Refresh to check the progress.
+    </StyledLinkBase>
+  </Text>
+</StyledMessageBarBase>
+`;

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.test.tsx

@@ -2,6 +2,7 @@ import { shallow } from "enzyme";
 import React from "react";
 import { MongoIndexTypes, MongoNotificationMessage, MongoNotificationType } from "../../SettingsUtils";
 import { MongoIndexingPolicyComponent, MongoIndexingPolicyComponentProps } from "./MongoIndexingPolicyComponent";
+import { renderToString } from "react-dom/server";
 
 describe("MongoIndexingPolicyComponent", () => {
   const baseProps: MongoIndexingPolicyComponentProps = {
@@ -21,10 +22,7 @@ describe("MongoIndexingPolicyComponent", () => {
       return;
     },
     indexTransformationProgress: undefined,
-    refreshIndexTransformationProgress: () =>
-      new Promise(() => {
-        return;
-      }),
+    refreshIndexTransformationProgress: () => new Promise(jest.fn()),
     onMongoIndexingPolicySaveableChange: () => {
       return;
     },
@@ -38,16 +36,6 @@ describe("MongoIndexingPolicyComponent", () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it("isIndexingTransforming", () => {
-    const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
-    const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;
-    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(false);
-    wrapper.setProps({ indexTransformationProgress: 50 });
-    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(true);
-    wrapper.setProps({ indexTransformationProgress: 100 });
-    expect(mongoIndexingPolicyComponent.isIndexingTransforming()).toEqual(false);
-  });
-
   describe("AddMongoIndexProps test", () => {
     const wrapper = shallow(<MongoIndexingPolicyComponent {...baseProps} />);
     const mongoIndexingPolicyComponent = wrapper.instance() as MongoIndexingPolicyComponent;
@@ -55,7 +43,7 @@ describe("MongoIndexingPolicyComponent", () => {
     it("defaults", () => {
       expect(mongoIndexingPolicyComponent.isMongoIndexingPolicySaveable()).toEqual(false);
       expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(false);
-      expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toEqual(undefined);
+      expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
     });
 
     const sampleWarning = "sampleWarning";
@@ -113,9 +101,12 @@ describe("MongoIndexingPolicyComponent", () => {
         expect(mongoIndexingPolicyComponent.isMongoIndexingPolicyDiscardable()).toEqual(
           isMongoIndexingPolicyDiscardable
         );
-        expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toEqual(
-          mongoWarningNotificationMessage
-        );
+        if (mongoWarningNotificationMessage) {
+          const elementAsString = renderToString(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage());
+          expect(elementAsString).toContain(mongoWarningNotificationMessage);
+        } else {
+          expect(mongoIndexingPolicyComponent.getMongoWarningNotificationMessage()).toBeUndefined();
+        }
       }
     );
   });

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -25,8 +25,8 @@ import {
   createAndAddMongoIndexStackProps,
   separatorStyles,
   mongoIndexingPolicyAADError,
-  mongoIndexTransformationRefreshingMessage,
-  renderMongoIndexTransformationRefreshMessage
+  indexingPolicynUnsavedWarningMessage,
+  infoAndToolTipTextStyle
 } from "../../SettingsRenderUtils";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/2020-04-01/types";
 import {
@@ -35,12 +35,13 @@ import {
   MongoIndexIdField,
   MongoNotificationType,
   getMongoIndexType,
-  getMongoIndexTypeText
+  getMongoIndexTypeText,
+  isIndexTransforming
 } from "../../SettingsUtils";
 import { AddMongoIndexComponent } from "./AddMongoIndexComponent";
 import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
-import { handleError } from "../../../../../Common/ErrorHandlingUtils";
 import { AuthType } from "../../../../../AuthType";
+import { IndexingPolicyRefreshComponent } from "../IndexingPolicyRefresh/IndexingPolicyRefreshComponent";
 
 export interface MongoIndexingPolicyComponentProps {
   mongoIndexes: MongoIndex[];
@@ -56,20 +57,13 @@ export interface MongoIndexingPolicyComponentProps {
   onMongoIndexingPolicyDiscardableChange: (isMongoIndexingPolicyDiscardable: boolean) => void;
 }
 
-interface MongoIndexingPolicyComponentState {
-  isRefreshingIndexTransformationProgress: boolean;
-}
-
 interface MongoIndexDisplayProps {
   definition: JSX.Element;
   type: JSX.Element;
   actionButton: JSX.Element;
 }
 
-export class MongoIndexingPolicyComponent extends React.Component<
-  MongoIndexingPolicyComponentProps,
-  MongoIndexingPolicyComponentState
-> {
+export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingPolicyComponentProps> {
   private shouldCheckComponentIsDirty = true;
   private addMongoIndexComponentRefs: React.RefObject<AddMongoIndexComponent>[] = [];
   private initialIndexesColumns: IColumn[] = [
@@ -98,13 +92,6 @@ export class MongoIndexingPolicyComponent extends React.Component<
     }
   ];
 
-  constructor(props: MongoIndexingPolicyComponentProps) {
-    super(props);
-    this.state = {
-      isRefreshingIndexTransformationProgress: false
-    };
-  }
-
   componentDidUpdate(prevProps: MongoIndexingPolicyComponentProps): void {
     if (this.props.indexesToAdd.length > prevProps.indexesToAdd.length) {
       this.addMongoIndexComponentRefs[prevProps.indexesToAdd.length]?.current?.focus();
@@ -144,10 +131,15 @@ export class MongoIndexingPolicyComponent extends React.Component<
     return this.props.indexesToAdd.length > 0 || this.props.indexesToDrop.length > 0;
   };
 
-  public getMongoWarningNotificationMessage = (): string => {
-    return this.props.indexesToAdd.find(
+  public getMongoWarningNotificationMessage = (): JSX.Element => {
+    const warningMessage = this.props.indexesToAdd.find(
       addMongoIndexProps => addMongoIndexProps.notification?.type === MongoNotificationType.Warning
     )?.notification.message;
+
+    if (warningMessage) {
+      return <Text styles={infoAndToolTipTextStyle}>{warningMessage}</Text>;
+    }
+    return undefined;
   };
 
   private onRenderRow = (props: IDetailsRowProps): JSX.Element => {
@@ -159,7 +151,7 @@ export class MongoIndexingPolicyComponent extends React.Component<
       <IconButton
         ariaLabel="Delete index Button"
         iconProps={{ iconName: "Delete" }}
-        disabled={this.isIndexingTransforming()}
+        disabled={isIndexTransforming(this.props.indexTransformationProgress)}
         onClick={() => {
           this.props.onIndexDrop(arrayPosition);
         }}
@@ -230,7 +222,7 @@ export class MongoIndexingPolicyComponent extends React.Component<
 
         <AddMongoIndexComponent
           ref={this.addMongoIndexComponentRefs[indexesToAddLength]}
-          disabled={this.isIndexingTransforming()}
+          disabled={isIndexTransforming(this.props.indexTransformationProgress)}
           position={indexesToAddLength}
           key={indexesToAddLength}
           description={undefined}
@@ -298,55 +290,21 @@ export class MongoIndexingPolicyComponent extends React.Component<
     );
   };
 
-  private refreshIndexTransformationProgress = async () => {
-    this.setState({ isRefreshingIndexTransformationProgress: true });
-    try {
-      await this.props.refreshIndexTransformationProgress();
-    } catch (error) {
-      handleError(error, "Refreshing index transformation progress failed.", "RefreshIndexTransformationProgress");
-    } finally {
-      this.setState({ isRefreshingIndexTransformationProgress: false });
-    }
-  };
-
-  public isIndexingTransforming = (): boolean =>
-    // index transformation progress can be 0
-    this.props.indexTransformationProgress !== undefined && this.props.indexTransformationProgress !== 100;
-
-  private onClickRefreshIndexingTransformationLink = async () => await this.refreshIndexTransformationProgress();
-
-  private renderIndexTransformationWarning = (): JSX.Element => {
-    if (this.state.isRefreshingIndexTransformationProgress) {
-      return mongoIndexTransformationRefreshingMessage;
-    } else if (this.isIndexingTransforming()) {
-      return renderMongoIndexTransformationRefreshMessage(
-        this.props.indexTransformationProgress,
-        this.onClickRefreshIndexingTransformationLink
-      );
-    }
-    return undefined;
-  };
-
   private renderWarningMessage = (): JSX.Element => {
-    let warningMessage: string;
+    let warningMessage: JSX.Element;
     if (this.getMongoWarningNotificationMessage()) {
       warningMessage = this.getMongoWarningNotificationMessage();
     } else if (this.isMongoIndexingPolicySaveable()) {
-      warningMessage =
-        "You have not saved the latest changes made to your indexing policy. Please click save to confirm the changes.";
+      warningMessage = indexingPolicynUnsavedWarningMessage;
     }
 
     return (
       <>
-        {this.renderIndexTransformationWarning() && (
-          <MessageBar messageBarType={MessageBarType.warning}>{this.renderIndexTransformationWarning()}</MessageBar>
-        )}
-
-        {warningMessage && (
-          <MessageBar messageBarType={MessageBarType.warning}>
-            <Text>{warningMessage}</Text>
-          </MessageBar>
-        )}
+        <IndexingPolicyRefreshComponent
+          indexTransformationProgress={this.props.indexTransformationProgress}
+          refreshIndexTransformationProgress={this.props.refreshIndexTransformationProgress}
+        />
+        {warningMessage && <MessageBar messageBarType={MessageBarType.warning}>{warningMessage}</MessageBar>}
       </>
     );
   };

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/__snapshots__/MongoIndexingPolicyComponent.test.tsx.snap

@@ -8,6 +8,9 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
     }
   }
 >
+  <IndexingPolicyRefreshComponent
+    refreshIndexTransformationProgress={[Function]}
+  />
   <Text>
     For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
     <StyledLinkBase

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/IndexingPolicyComponent.test.tsx.snap

@@ -8,6 +8,9 @@ exports[`IndexingPolicyComponent renders 1`] = `
     }
   }
 >
+  <IndexingPolicyRefreshComponent
+    refreshIndexTransformationProgress={[Function]}
+  />
   <div
     className="settingsV2IndexingPolicyEditor"
     tabIndex={0}