Edit label and Add label frontend fixes (#644)

- Moves `isEditLabel` out of `<ManageHostPage />`'s state and into its props. The implementation is now similar to `isAddLabel`. - Add `selectedFilter` to the URL path when editing or adding labels. This helps navigate the user back to the selected label after they click "Cancel" when editing or adding.
fleetdm · Apr 16, 2021 · 568efc9 · 568efc9
1 parent 182b7f2
commit 568efc9
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 41 deletions.
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@@ -25,13 +25,15 @@ import deepDifference from "utilities/deep_difference";
 import HostContainer from "./components/HostContainer";
 
 const NEW_LABEL_HASH = "#new_label";
+const EDIT_LABEL_HASH = "#edit_label";
 const baseClass = "manage-hosts";
 
 export class ManageHostsPage extends PureComponent {
   static propTypes = {
     config: configInterface,
     dispatch: PropTypes.func,
     isAddLabel: PropTypes.bool,
+    isEditLabel: PropTypes.bool,
     labelErrors: PropTypes.shape({
       base: PropTypes.string,
     }),
@@ -52,7 +54,6 @@ export class ManageHostsPage extends PureComponent {
     super(props);
 
     this.state = {
-      isEditLabel: false,
       labelQueryText: "",
       pagedHosts: [],
       showAddHostModal: false,
@@ -75,17 +76,34 @@ export class ManageHostsPage extends PureComponent {
   onAddLabelClick = (evt) => {
     evt.preventDefault();
 
-    const { dispatch } = this.props;
+    const { dispatch, selectedFilter } = this.props;
+    dispatch(push(`${PATHS.MANAGE_HOSTS}/${selectedFilter}${NEW_LABEL_HASH}`));
 
-    dispatch(push(`${PATHS.MANAGE_HOSTS}${NEW_LABEL_HASH}`));
+    return false;
+  };
+
+  onEditLabelClick = (evt) => {
+    evt.preventDefault();
+
+    const { dispatch, selectedFilter } = this.props;
+    console.log(selectedFilter);
+    dispatch(push(`${PATHS.MANAGE_HOSTS}/${selectedFilter}${EDIT_LABEL_HASH}`));
 
     return false;
   };
 
   onCancelAddLabel = () => {
-    const { dispatch } = this.props;
+    const { dispatch, selectedFilter } = this.props;
+
+    dispatch(push(`${PATHS.MANAGE_HOSTS}/${selectedFilter}`));
+
+    return false;
+  };
+
+  onCancelEditLabel = () => {
+    const { dispatch, selectedFilter } = this.props;
 
-    dispatch(push(PATHS.MANAGE_HOSTS));
+    dispatch(push(`${PATHS.MANAGE_HOSTS}/${selectedFilter}`));
 
     return false;
   };
@@ -100,12 +118,12 @@ export class ManageHostsPage extends PureComponent {
   };
 
   onEditLabel = (formData) => {
-    const { dispatch, selectedLabel } = this.props;
+    const { dispatch, selectedLabel, selectedFilter } = this.props;
     const updateAttrs = deepDifference(formData, selectedLabel);
 
     return dispatch(labelActions.update(selectedLabel, updateAttrs))
       .then(() => {
-        this.toggleEditLabel();
+        dispatch(push(`${PATHS.MANAGE_HOSTS}/${selectedFilter}`));
 
         return false;
       })
@@ -180,14 +198,6 @@ export class ManageHostsPage extends PureComponent {
     return false;
   };
 
-  toggleEditLabel = () => {
-    const { isEditLabel } = this.state;
-
-    this.setState({ isEditLabel: !isEditLabel });
-
-    return false;
-  };
-
   renderAddHostModal = () => {
     const { toggleAddHostModal } = this;
     const { showAddHostModal } = this.state;
@@ -240,7 +250,7 @@ export class ManageHostsPage extends PureComponent {
   };
 
   renderDeleteButton = () => {
-    const { toggleDeleteLabelModal, toggleEditLabel } = this;
+    const { toggleDeleteLabelModal, onEditLabelClick } = this;
     const {
       selectedLabel: { type },
     } = this.props;
@@ -251,7 +261,7 @@ export class ManageHostsPage extends PureComponent {
 
     return (
       <div className={`${baseClass}__label-actions`}>
-        <Button onClick={toggleEditLabel} variant="inverse">
+        <Button onClick={onEditLabelClick} variant="inverse">
           Edit
         </Button>
         <Button onClick={toggleDeleteLabelModal} variant="inverse">
@@ -327,14 +337,13 @@ export class ManageHostsPage extends PureComponent {
   };
 
   renderForm = () => {
-    const { isAddLabel, labelErrors, selectedLabel } = this.props;
-    const { isEditLabel } = this.state;
+    const { isAddLabel, isEditLabel, labelErrors, selectedLabel } = this.props;
     const {
       onCancelAddLabel,
+      onCancelEditLabel,
       onEditLabel,
       onOsqueryTableSelect,
       onSaveAddLabel,
-      toggleEditLabel,
     } = this;
 
     if (isAddLabel) {
@@ -355,7 +364,7 @@ export class ManageHostsPage extends PureComponent {
         <div className="body-wrap">
           <LabelForm
             formData={selectedLabel}
-            onCancel={toggleEditLabel}
+            onCancel={onCancelEditLabel}
             onOsqueryTableSelect={onOsqueryTableSelect}
             handleSubmit={onEditLabel}
             isEdit
@@ -414,11 +423,11 @@ export class ManageHostsPage extends PureComponent {
     } = this;
     const {
       isAddLabel,
+      isEditLabel,
       loadingLabels,
       selectedLabel,
       selectedFilter,
     } = this.props;
-    const { isEditLabel } = this.state;
 
     const { onAddHostClick } = this;
 
@@ -464,6 +473,7 @@ const mapStateToProps = (state, { location, params }) => {
   const labelEntities = entityGetter(state).get("labels");
   const { entities: labels } = labelEntities;
   const isAddLabel = location.hash === NEW_LABEL_HASH;
+  const isEditLabel = location.hash === EDIT_LABEL_HASH;
   const selectedLabel = labelEntities.findBy(
     { slug: selectedFilter },
     { ignoreCase: true }
@@ -476,6 +486,7 @@ const mapStateToProps = (state, { location, params }) => {
   return {
     selectedFilter,
     isAddLabel,
+    isEditLabel,
     labelErrors,
     labels,
     loadingLabels,

diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx
@@ -40,9 +40,9 @@ const offlineHostsLabel = {
   count: 1,
 };
 const customLabel = {
-  id: 6,
+  id: 12,
   display_text: "Custom Label",
-  slug: "custom-label",
+  slug: "labels/12",
   type: "custom",
   count: 3,
 };
@@ -241,42 +241,54 @@ describe("ManageHostsPage - component", () => {
   });
 
   describe("Edit a label", () => {
-    const ownProps = { location: {}, params: { active_label: "custom-label" } };
-    const Component = connectedComponent(ConnectedManageHostsPage, {
+    const ownProps = {
+      location: { hash: "" },
+      params: { label_id: "12" },
+    };
+    const component = connectedComponent(ConnectedManageHostsPage, {
       props: ownProps,
       mockStore,
     });
 
-    it("renders the LabelForm when Edit is clicked", () => {
-      const Page = mount(Component);
+    it("renders the Edit button when a custom label is selected", () => {
+      const Page = mount(component);
       const EditButton = Page.find(".manage-hosts__label-actions")
         .find("Button")
         .first();
 
-      expect(Page.find("LabelForm").length).toEqual(
-        0,
-        "Expected the LabelForm to not be on the page"
-      );
+      expect(EditButton.length).toEqual(1);
+    });
 
-      EditButton.simulate("click");
+    const ownPropsEditSelected = {
+      location: { hash: "#edit_label" },
+      params: { label_id: "12" },
+    };
+    const componentWithEditSelected = connectedComponent(
+      ConnectedManageHostsPage,
+      {
+        props: ownPropsEditSelected,
+        mockStore,
+      }
+    );
 
-      const LabelForm = Page.find("LabelForm");
+    it("renders a LabelForm component", () => {
+      const page = mount(componentWithEditSelected);
 
-      expect(LabelForm.length).toEqual(
-        1,
-        "Expected the LabelForm to be on the page"
-      );
+      expect(page.find("LabelForm").length).toEqual(1);
+    });
+
+    it('displays "Edit label" as the query form header', () => {
+      const page = mount(componentWithEditSelected);
 
-      expect(LabelForm.prop("formData")).toEqual(customLabel);
-      expect(LabelForm.prop("isEdit")).toEqual(true);
+      expect(page.find("LabelForm").text()).toContain("Edit label");
     });
   });
 
   describe("Delete a label", () => {
     it("Deleted label after confirmation modal", () => {
       const ownProps = {
         location: {},
-        params: { active_label: "custom-label" },
+        params: { label_id: "12" },
       };
       const component = connectedComponent(ConnectedManageHostsPage, {
         props: ownProps,