Add Restore Defaults button (#1277)

vmware-tanzu · Nov 7, 2019 · 4f77c29 · 4f77c29
1 parent 2ff3399
commit 4f77c29
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 17 deletions.
diff --git a/dashboard/src/components/ConfirmDialog/ConfirmDialog.test.tsx b/dashboard/src/components/ConfirmDialog/ConfirmDialog.test.tsx
@@ -1,7 +1,8 @@
+import { shallow } from "enzyme";
 import context from "jest-plugin-context";
-
-import ConfirmDialog from ".";
+import * as React from "react";
 import itBehavesLike from "../../shared/specs";
+import ConfirmDialog from "./ConfirmDialog";
 
 context("when loading is true", () => {
   const props = {
@@ -10,3 +11,18 @@ context("when loading is true", () => {
 
   itBehavesLike("aLoadingComponent", { component: ConfirmDialog, props });
 });
+
+const defaultProps = {
+  loading: false,
+  modalIsOpen: true,
+  onConfirm: jest.fn(),
+  closeModal: jest.fn(),
+};
+
+it("should modify the default confirmation text", () => {
+  const wrapper = shallow(
+    <ConfirmDialog {...defaultProps} confirmationText="Sure?" confirmationButtonText="Sure!" />,
+  );
+  expect(wrapper.find(".margin-b-normal").filterWhere(d => d.text() === "Sure?")).toExist();
+  expect(wrapper.find("button").filterWhere(d => d.text() === "Sure!")).toExist();
+});
diff --git a/dashboard/src/components/ConfirmDialog/ConfirmDialog.tsx b/dashboard/src/components/ConfirmDialog/ConfirmDialog.tsx
@@ -7,8 +7,10 @@ interface IConfirmDialogProps {
   modalIsOpen: boolean;
   loading: boolean;
   extraElem?: JSX.Element;
-  onConfirm: () => Promise<any>;
-  closeModal: () => Promise<any>;
+  confirmationText?: string;
+  confirmationButtonText?: string;
+  onConfirm: () => any;
+  closeModal: () => any;
 }
 
 interface IConfirmDialogState {
@@ -43,18 +45,22 @@ class ConfirmDialog extends React.Component<IConfirmDialogProps, IConfirmDialogS
             </div>
           ) : (
             <div>
-              <div className="margin-b-normal"> Are you sure you want to delete this? </div>
+              <div className="margin-b-normal">
+                {this.props.confirmationText || "Are you sure you want to delete this?"}
+              </div>
               {this.props.extraElem}
-              <button className="button" onClick={this.props.closeModal}>
-                Cancel
-              </button>
-              <button
-                className="button button-primary button-danger"
-                type="submit"
-                onClick={this.props.onConfirm}
-              >
-                Delete
-              </button>
+              <div className="margin-t-normal button-row">
+                <button className="button" onClick={this.props.closeModal}>
+                  Cancel
+                </button>
+                <button
+                  className="button button-primary button-danger"
+                  type="submit"
+                  onClick={this.props.onConfirm}
+                >
+                  {this.props.confirmationButtonText || "Delete"}
+                </button>
+              </div>
             </div>
           )}
         </Modal>

diff --git a/dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/SliderParam.test.tsx b/dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/SliderParam.test.tsx
@@ -12,7 +12,7 @@ const defaultProps = {
     type: "string",
     path: "disk",
   } as IBasicFormParam,
-  handleBasicFormParamChange: jest.fn(),
+  handleBasicFormParamChange: jest.fn(() => jest.fn()),
   min: 1,
   max: 100,
   unit: "Gi",
@@ -160,3 +160,11 @@ it("defaults to the min if the value is undefined", () => {
 
   expect(wrapper.state("value")).toBe(5);
 });
+
+it("updates the state when receiving new props", () => {
+  const wrapper = shallow(<SliderParam {...defaultProps} />);
+  expect(wrapper.state("value")).toBe(10);
+
+  wrapper.setProps({ param: { value: "20Gi" } });
+  expect(wrapper.state("value")).toBe(20);
+});
diff --git a/dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/SliderParam.tsx b/dashboard/src/components/DeploymentFormBody/BasicDeploymentForm/SliderParam.tsx
@@ -23,11 +23,22 @@ function toNumber(value: string) {
   return Number(value.replace(/[^\d\.]/g, ""));
 }
 
+function getDefaultValue(min: number, value?: string) {
+  return (value && toNumber(value)) || min;
+}
+
 class SliderParam extends React.Component<ISliderParamProps, ISliderParamState> {
   public state: ISliderParamState = {
-    value: (this.props.param.value && toNumber(this.props.param.value)) || this.props.min,
+    value: getDefaultValue(this.props.min, this.props.param.value),
   };
 
+  public componentWillReceiveProps = (props: ISliderParamProps) => {
+    const value = getDefaultValue(this.props.min, props.param.value);
+    if (value !== this.state.value) {
+      this.handleParamChange(value);
+      this.setState({ value });
+    }
+  };
   // onChangeSlider is executed when the slider is dropped at one point
   // at that point we update the parameter
   public onChangeSlider = (values: number[]) => {

diff --git a/dashboard/src/components/DeploymentFormBody/DeploymentFormBody.test.tsx b/dashboard/src/components/DeploymentFormBody/DeploymentFormBody.test.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { Tab, Tabs } from "react-tabs";
 import itBehavesLike from "../../shared/specs";
 import { IChartState, IChartVersion, NotFoundError } from "../../shared/types";
+import ConfirmDialog from "../ConfirmDialog";
 import { ErrorSelector } from "../ErrorAlert";
 import ErrorPageHeader from "../ErrorAlert/ErrorAlertHeader";
 import LoadingWrapper from "../LoadingWrapper";
@@ -362,3 +363,22 @@ it("goes back when clicking in the Back button", () => {
   backButton.simulate("click");
   expect(goBack).toBeCalled();
 });
+
+it("restores the default chart values when clicking on the button", () => {
+  const setValues = jest.fn();
+  const wrapper = shallow(
+    <DeploymentFormBody
+      {...props}
+      setValues={setValues}
+      selected={{
+        ...props.selected,
+        values: "foo: value",
+      }}
+    />,
+  );
+
+  // bypass modal
+  wrapper.find(ConfirmDialog).prop("onConfirm")();
+
+  expect(setValues).toHaveBeenCalledWith("foo: value");
+});
diff --git a/dashboard/src/components/DeploymentFormBody/DeploymentFormBody.tsx b/dashboard/src/components/DeploymentFormBody/DeploymentFormBody.tsx
@@ -5,6 +5,7 @@ import { Tab, TabList, TabPanel, Tabs } from "react-tabs";
 import { retrieveBasicFormParams, setValue } from "../../shared/schema";
 import { IBasicFormParam, IChartState } from "../../shared/types";
 import { getValueFromEvent } from "../../shared/utils";
+import ConfirmDialog from "../ConfirmDialog";
 import { ErrorSelector } from "../ErrorAlert";
 import Hint from "../Hint";
 import LoadingWrapper from "../LoadingWrapper";
@@ -33,6 +34,7 @@ export interface IDeploymentFormBodyProps {
 
 export interface IDeploymentFormBodyState {
   basicFormParameters: IBasicFormParam[];
+  restoreDefaultValuesModalIsOpen: boolean;
 }
 
 class DeploymentFormBody extends React.Component<
@@ -41,6 +43,7 @@ class DeploymentFormBody extends React.Component<
 > {
   public state: IDeploymentFormBodyState = {
     basicFormParameters: [],
+    restoreDefaultValuesModalIsOpen: false,
   };
 
   public componentDidMount() {
@@ -101,6 +104,14 @@ class DeploymentFormBody extends React.Component<
     }
     return (
       <div>
+        <ConfirmDialog
+          modalIsOpen={this.state.restoreDefaultValuesModalIsOpen}
+          loading={false}
+          confirmationText={"Are you sure you want to restore the default chart values?"}
+          confirmationButtonText={"Restore"}
+          onConfirm={this.restoreDefaultValues}
+          closeModal={this.closeRestoreDefaultValuesModal}
+        />
         <div>
           <label htmlFor="chartVersion">Version</label>
           <select
@@ -131,6 +142,9 @@ class DeploymentFormBody extends React.Component<
           <button className="button button-primary" type="submit">
             Submit
           </button>
+          <button className="button" type="button" onClick={this.openRestoreDefaultValuesModal}>
+            Restore Chart Defaults
+          </button>
           {goBack && (
             <button className="button" type="button" onClick={goBack}>
               Back
@@ -231,6 +245,27 @@ class DeploymentFormBody extends React.Component<
   private shouldRenderBasicForm = () => {
     return Object.keys(this.state.basicFormParameters).length > 0;
   };
+
+  private closeRestoreDefaultValuesModal = () => {
+    this.setState({ restoreDefaultValuesModalIsOpen: false });
+  };
+
+  private openRestoreDefaultValuesModal = () => {
+    this.setState({ restoreDefaultValuesModalIsOpen: true });
+  };
+
+  private restoreDefaultValues = () => {
+    if (this.props.selected.values) {
+      this.props.setValues(this.props.selected.values);
+      this.setState({
+        basicFormParameters: retrieveBasicFormParams(
+          this.props.selected.values,
+          this.props.selected.schema,
+        ),
+      });
+    }
+    this.setState({ restoreDefaultValuesModalIsOpen: false });
+  };
 }
 
 export default DeploymentFormBody;
diff --git a/dashboard/src/components/DeploymentFormBody/__snapshots__/DeploymentFormBody.test.tsx.snap b/dashboard/src/components/DeploymentFormBody/__snapshots__/DeploymentFormBody.test.tsx.snap
@@ -9,6 +9,14 @@ exports[`loading spinner matches the snapshot 1`] = `
 
 exports[`renders the full DeploymentFormBody 1`] = `
 <div>
+  <ConfirmDialog
+    closeModal={[Function]}
+    confirmationButtonText="Restore"
+    confirmationText="Are you sure you want to restore the default chart values?"
+    loading={false}
+    modalIsOpen={false}
+    onConfirm={[Function]}
+  />
   <div>
     <label
       htmlFor="chartVersion"
@@ -43,6 +51,13 @@ exports[`renders the full DeploymentFormBody 1`] = `
     >
       Submit
     </button>
+    <button
+      className="button"
+      onClick={[Function]}
+      type="button"
+    >
+      Restore Chart Defaults
+    </button>
   </div>
 </div>
 `;