Skip to content

Edit label and Add label frontend fixes #644

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
noahtalerman merged 2 commits into from
Apr 16, 2021
Merged

Edit label and Add label frontend fixes #644

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a7b786
Cancel edit mode when a different label is clicked. Navigate back to …
noahtalerman Apr 15, 2021
350596c
Fix tests
noahtalerman Apr 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}),
Expand All @@ -52,7 +54,6 @@ export class ManageHostsPage extends PureComponent {
super(props);

this.state = {
isEditLabel: false,
labelQueryText: "",
pagedHosts: [],
showAddHostModal: false,
Expand All @@ -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;
};
Expand All @@ -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;
})
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -240,7 +250,7 @@ export class ManageHostsPage extends PureComponent {
};

renderDeleteButton = () => {
const { toggleDeleteLabelModal, toggleEditLabel } = this;
const { toggleDeleteLabelModal, onEditLabelClick } = this;
const {
selectedLabel: { type },
} = this.props;
Expand All @@ -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">
Expand Down Expand Up @@ -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) {
Expand All @@ -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
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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 }
Expand All @@ -476,6 +486,7 @@ const mapStateToProps = (state, { location, params }) => {
return {
selectedFilter,
isAddLabel,
isEditLabel,
labelErrors,
labels,
loadingLabels,
Expand Down
50 changes: 31 additions & 19 deletions frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
Expand Down Expand Up @@ -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,
Expand Down