From 0a22b9195e716addec8092c144266bc071d02c5b Mon Sep 17 00:00:00 2001 From: Zach Wasserman Date: Thu, 10 Jun 2021 17:01:18 -0700 Subject: [PATCH] Rename components and errors in setup flow (#1059) --- .../ConfirmationPage/ConfirmationPage.jsx | 6 ++-- .../FleetDetails.jsx} | 6 ++-- .../FleetDetails.tests.jsx} | 36 +++++++++---------- .../RegistrationForm/FleetDetails/helpers.js | 20 +++++++++++ .../RegistrationForm/FleetDetails/index.js | 1 + .../RegistrationForm/KolideDetails/helpers.js | 20 ----------- .../RegistrationForm/KolideDetails/index.js | 1 - .../RegistrationForm/RegistrationForm.jsx | 16 ++++----- .../RegistrationForm.tests.jsx | 4 +-- frontend/interfaces/registration_form_data.js | 2 +- 10 files changed, 56 insertions(+), 56 deletions(-) rename frontend/components/forms/RegistrationForm/{KolideDetails/KolideDetails.jsx => FleetDetails/FleetDetails.jsx} (92%) rename frontend/components/forms/RegistrationForm/{KolideDetails/KolideDetails.tests.jsx => FleetDetails/FleetDetails.tests.jsx} (55%) create mode 100644 frontend/components/forms/RegistrationForm/FleetDetails/helpers.js create mode 100644 frontend/components/forms/RegistrationForm/FleetDetails/index.js delete mode 100644 frontend/components/forms/RegistrationForm/KolideDetails/helpers.js delete mode 100644 frontend/components/forms/RegistrationForm/KolideDetails/index.js diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx index 292cf76d5e..566cb351a0 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx @@ -59,7 +59,7 @@ class ConfirmationPage extends Component { handleSubmit, formData: { email, - server_url: kolideWebAddress, + server_url: fleetWebAddress, org_name: orgName, username, }, @@ -91,9 +91,9 @@ class ConfirmationPage extends Component { - {kolideWebAddress} + {fleetWebAddress} diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx similarity index 92% rename from frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx rename to frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx index c12ce59c3f..bca22c171d 100644 --- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx +++ b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx @@ -4,13 +4,13 @@ import PropTypes from "prop-types"; import Form from "components/forms/Form"; import formFieldInterface from "interfaces/form_field"; import Button from "components/buttons/Button"; -import helpers from "components/forms/RegistrationForm/KolideDetails/helpers"; +import helpers from "components/forms/RegistrationForm/FleetDetails/helpers"; import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon"; const formFields = ["server_url"]; const { validate } = helpers; -class KolideDetails extends Component { +class FleetDetails extends Component { static propTypes = { className: PropTypes.string, currentPage: PropTypes.bool, @@ -68,7 +68,7 @@ class KolideDetails extends Component { } } -export default Form(KolideDetails, { +export default Form(FleetDetails, { fields: formFields, validate, }); diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.tests.jsx b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx similarity index 55% rename from frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.tests.jsx rename to frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx index 87407e55c1..9b8d479538 100644 --- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.tests.jsx +++ b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.tests.jsx @@ -2,20 +2,20 @@ import React from "react"; import { mount } from "enzyme"; import { noop } from "lodash"; -import KolideDetails from "components/forms/RegistrationForm/KolideDetails"; +import FleetDetails from "components/forms/RegistrationForm/FleetDetails"; import { fillInFormInput } from "test/helpers"; -describe("KolideDetails - form", () => { - describe("kolide web address input", () => { +describe("FleetDetails - form", () => { + describe("fleet web address input", () => { it("renders an input field", () => { - const form = mount(); - const kolideWebAddressField = form.find({ name: "server_url" }); + const form = mount(); + const fleetWebAddressField = form.find({ name: "server_url" }); - expect(kolideWebAddressField.length).toBeGreaterThan(0); + expect(fleetWebAddressField.length).toBeGreaterThan(0); }); it("updates state when the field changes", () => { - const form = mount(); + const form = mount(); const serverAddressField = form .find({ name: "server_url" }) .find("input"); @@ -29,45 +29,45 @@ describe("KolideDetails - form", () => { }); describe("submitting the form", () => { - it("validates the presence of the kolide web address field", () => { + it("validates the presence of the fleet web address field", () => { const handleSubmitSpy = jest.fn(); - const form = mount(); + const form = mount(); const htmlForm = form.find("form"); htmlForm.simulate("submit"); expect(handleSubmitSpy).not.toHaveBeenCalled(); expect(form.state().errors).toMatchObject({ - server_url: "Kolide web address must be completed", + server_url: "Fleet web address must be completed", }); }); - it("validates the kolide web address field starts with https://", () => { + it("validates the fleet web address field starts with https://", () => { const handleSubmitSpy = jest.fn(); - const form = mount(); - const kolideWebAddressField = form + const form = mount(); + const fleetWebAddressField = form .find({ name: "server_url" }) .find("input"); const htmlForm = form.find("form"); - fillInFormInput(kolideWebAddressField, "http://gnar.Fleet.co"); + fillInFormInput(fleetWebAddressField, "http://gnar.Fleet.co"); htmlForm.simulate("submit"); expect(handleSubmitSpy).not.toHaveBeenCalled(); expect(form.state().errors).toMatchObject({ - server_url: "Kolide web address must start with https://", + server_url: "Fleet web address must start with https://", }); }); it("submits the form when valid", () => { const handleSubmitSpy = jest.fn(); - const form = mount(); - const kolideWebAddressField = form + const form = mount(); + const fleetWebAddressField = form .find({ name: "server_url" }) .find("input"); const htmlForm = form.find("form"); - fillInFormInput(kolideWebAddressField, "https://gnar.Fleet.co"); + fillInFormInput(fleetWebAddressField, "https://gnar.Fleet.co"); htmlForm.simulate("submit"); expect(handleSubmitSpy).toHaveBeenCalled(); diff --git a/frontend/components/forms/RegistrationForm/FleetDetails/helpers.js b/frontend/components/forms/RegistrationForm/FleetDetails/helpers.js new file mode 100644 index 0000000000..f66547dfa7 --- /dev/null +++ b/frontend/components/forms/RegistrationForm/FleetDetails/helpers.js @@ -0,0 +1,20 @@ +import { size, startsWith } from "lodash"; + +const validate = (formData) => { + const errors = {}; + const { server_url: fleetWebAddress } = formData; + + if (!fleetWebAddress) { + errors.server_url = "Fleet web address must be completed"; + } + + if (fleetWebAddress && !startsWith(fleetWebAddress, "https://")) { + errors.server_url = "Fleet web address must start with https://"; + } + + const valid = !size(errors); + + return { valid, errors }; +}; + +export default { validate }; diff --git a/frontend/components/forms/RegistrationForm/FleetDetails/index.js b/frontend/components/forms/RegistrationForm/FleetDetails/index.js new file mode 100644 index 0000000000..72389080ea --- /dev/null +++ b/frontend/components/forms/RegistrationForm/FleetDetails/index.js @@ -0,0 +1 @@ +export { default } from "./FleetDetails"; diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/helpers.js b/frontend/components/forms/RegistrationForm/KolideDetails/helpers.js deleted file mode 100644 index fa42585519..0000000000 --- a/frontend/components/forms/RegistrationForm/KolideDetails/helpers.js +++ /dev/null @@ -1,20 +0,0 @@ -import { size, startsWith } from "lodash"; - -const validate = (formData) => { - const errors = {}; - const { server_url: kolideWebAddress } = formData; - - if (!kolideWebAddress) { - errors.server_url = "Kolide web address must be completed"; - } - - if (kolideWebAddress && !startsWith(kolideWebAddress, "https://")) { - errors.server_url = "Kolide web address must start with https://"; - } - - const valid = !size(errors); - - return { valid, errors }; -}; - -export default { validate }; diff --git a/frontend/components/forms/RegistrationForm/KolideDetails/index.js b/frontend/components/forms/RegistrationForm/KolideDetails/index.js deleted file mode 100644 index 9334248c03..0000000000 --- a/frontend/components/forms/RegistrationForm/KolideDetails/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./KolideDetails"; diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx index c21f8744c7..34fd2affa5 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx @@ -4,7 +4,7 @@ import classnames from "classnames"; import AdminDetails from "components/forms/RegistrationForm/AdminDetails"; import ConfirmationPage from "components/forms/RegistrationForm/ConfirmationPage"; -import KolideDetails from "components/forms/RegistrationForm/KolideDetails"; +import FleetDetails from "components/forms/RegistrationForm/FleetDetails"; import OrgDetails from "components/forms/RegistrationForm/OrgDetails"; const baseClass = "user-registration"; @@ -86,14 +86,14 @@ class RegistrationForm extends Component { `${baseClass}__field-wrapper--org` ); - const kolideDetailsContainerClass = classnames( + const fleetDetailsContainerClass = classnames( `${baseClass}__container`, - `${baseClass}__container--kolide` + `${baseClass}__container--fleet` ); - const kolideDetailsClass = classnames( + const fleetDetailsClass = classnames( `${baseClass}__field-wrapper`, - `${baseClass}__field-wrapper--kolide` + `${baseClass}__field-wrapper--fleet` ); const confirmationContainerClass = classnames( @@ -138,12 +138,12 @@ class RegistrationForm extends Component { currentPage={isCurrentPage(2)} /> -
+

Set Fleet URL

-
diff --git a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx index f72eefbf17..10b7ccd7fe 100644 --- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx +++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx @@ -18,10 +18,10 @@ describe("RegistrationForm - component", () => { expect(form.text()).toContain("Organization details"); }); - it("renders KolideDetails on the third page", () => { + it("renders FleetDetails on the third page", () => { const form = mount(); - expect(form.find("KolideDetails").length).toEqual(1); + expect(form.find("FleetDetails").length).toEqual(1); expect(form.text()).toContain("Set Fleet URL"); }); diff --git a/frontend/interfaces/registration_form_data.js b/frontend/interfaces/registration_form_data.js index c0c7c88f35..5da13801fe 100644 --- a/frontend/interfaces/registration_form_data.js +++ b/frontend/interfaces/registration_form_data.js @@ -8,5 +8,5 @@ export default PropTypes.shape({ org_name: PropTypes.string, org_web_url: PropTypes.string, org_logo_url: PropTypes.string, - kolide_web_address: PropTypes.string, + fleet_web_address: PropTypes.string, });