From fa52b7b1074b817ea2422034863d8bfc1b409f5c Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 13 Sep 2022 12:37:47 -0400
Subject: [PATCH] Frontend Tech Debt: Remove unused schedule query side panel
 (#7668)

---
 .../ConfigurePackQueryForm.jsx                | 162 ------------------
 .../forms/ConfigurePackQueryForm/_styles.scss |  36 ----
 .../forms/ConfigurePackQueryForm/index.js     |   1 -
 .../forms/ConfigurePackQueryForm/validate.js  |  33 ----
 .../ScheduleQuerySidePanel.jsx                |  65 -------
 .../ScheduleQuerySidePanel.tests.jsx          |  12 --
 .../SearchPackQuery/SearchPackQuery.jsx       | 129 --------------
 .../SearchPackQuery/_styles.scss              |  39 -----
 .../SearchPackQuery/index.js                  |   1 -
 .../ScheduleQuerySidePanel/index.js           |   1 -
 10 files changed, 479 deletions(-)
 delete mode 100644 frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
 delete mode 100644 frontend/components/forms/ConfigurePackQueryForm/_styles.scss
 delete mode 100644 frontend/components/forms/ConfigurePackQueryForm/index.js
 delete mode 100644 frontend/components/forms/ConfigurePackQueryForm/validate.js
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js
 delete mode 100644 frontend/components/side_panels/ScheduleQuerySidePanel/index.js

diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
deleted file mode 100644
index 253ccf9d74..0000000000
--- a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { pull } from "lodash";
-
-import Button from "components/buttons/Button";
-import Dropdown from "components/forms/fields/Dropdown";
-import Form from "components/forms/Form";
-import formFieldInterface from "interfaces/form_field";
-import InputField from "components/forms/fields/InputField";
-import validate from "components/forms/ConfigurePackQueryForm/validate";
-import {
-  PLATFORM_DROPDOWN_OPTIONS,
-  LOGGING_TYPE_OPTIONS,
-  MIN_OSQUERY_VERSION_OPTIONS,
-} from "utilities/constants";
-
-const baseClass = "configure-pack-query-form";
-const fieldNames = [
-  "query_id",
-  "interval",
-  "logging_type",
-  "platform",
-  "shard",
-  "version",
-];
-
-export class ConfigurePackQueryForm extends Component {
-  static propTypes = {
-    fields: PropTypes.shape({
-      interval: formFieldInterface.isRequired,
-      logging_type: formFieldInterface.isRequired,
-      platform: formFieldInterface.isRequired,
-      version: formFieldInterface.isRequired,
-      shard: formFieldInterface.isRequired,
-    }).isRequired,
-    formData: PropTypes.shape({
-      id: PropTypes.number,
-    }),
-    handleSubmit: PropTypes.func,
-    onCancel: PropTypes.func,
-  };
-
-  componentWillMount() {
-    const { fields } = this.props;
-
-    if (fields && fields.shard && !fields.shard.value) {
-      fields.shard.value = "";
-    }
-  }
-
-  onCancel = (evt) => {
-    evt.preventDefault();
-
-    const { formData, onCancel: handleCancel } = this.props;
-
-    return handleCancel(formData);
-  };
-
-  handlePlatformChoice = (value) => {
-    const {
-      fields: { platform },
-    } = this.props;
-    const valArray = value.split(",");
-
-    // Remove All if another OS is chosen
-    if (valArray.indexOf("") === 0 && valArray.length > 1) {
-      return platform.onChange(pull(valArray, "").join(","));
-    }
-
-    // Remove OS if All is chosen
-    if (valArray.length > 1 && valArray.indexOf("") > -1) {
-      return platform.onChange("");
-    }
-
-    return platform.onChange(value);
-  };
-
-  renderCancelButton = () => {
-    const { formData } = this.props;
-    const { onCancel } = this;
-
-    if (!formData.id) {
-      return false;
-    }
-
-    return (
-      <Button
-        className={`${baseClass}__cancel-btn`}
-        onClick={onCancel}
-        variant="inverse"
-      >
-        Cancel
-      </Button>
-    );
-  };
-
-  render() {
-    const { fields, handleSubmit } = this.props;
-    const { handlePlatformChoice, renderCancelButton } = this;
-
-    // Uncontrolled form field defaults to snapshot if !fields.logging_type
-    const loggingType = fields.logging_type.value || "snapshot";
-
-    return (
-      <form className={baseClass} onSubmit={handleSubmit} autoComplete="off">
-        <h2 className={`${baseClass}__title`}>Configuration</h2>
-        <div className={`${baseClass}__fields`}>
-          <Dropdown
-            {...fields.logging_type}
-            options={LOGGING_TYPE_OPTIONS}
-            placeholder="- - -"
-            label="Logging"
-            value={loggingType}
-            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--logging`}
-          />
-          <InputField
-            {...fields.interval}
-            inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--frequency`}
-            placeholder="- - -"
-            label="Frequency (seconds)"
-            // hint="Seconds"
-            type="number"
-          />
-          <Dropdown
-            {...fields.platform}
-            options={PLATFORM_DROPDOWN_OPTIONS}
-            placeholder="- - -"
-            label="Platform"
-            onChange={handlePlatformChoice}
-            multi
-            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--platform`}
-          />
-          <Dropdown
-            {...fields.version}
-            options={MIN_OSQUERY_VERSION_OPTIONS}
-            placeholder="- - -"
-            label="Minimum osquery version"
-            wrapperClassName={`${baseClass}__form-field ${baseClass}__form-field--osquer-vers`}
-          />
-          <InputField
-            {...fields.shard}
-            inputWrapperClass={`${baseClass}__form-field ${baseClass}__form-field--shard`}
-            placeholder="- - -"
-            label="Shard"
-            type="number"
-          />
-          <div className="modal-cta-wrap">
-            {renderCancelButton()}
-            <Button type="submit" variant="brand">
-              Save
-            </Button>
-          </div>
-        </div>
-      </form>
-    );
-  }
-}
-
-export default Form(ConfigurePackQueryForm, {
-  fields: fieldNames,
-  validate,
-});
diff --git a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
deleted file mode 100644
index 48500906c5..0000000000
--- a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.configure-pack-query-form {
-  &__form-field {
-    &--frequency {
-      position: relative;
-
-      .input-field {
-        width: 100%;
-        padding-right: 70px;
-      }
-
-      .form-field__hint {
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-        text-transform: lowercase;
-        font-size: $x-small;
-      }
-    }
-  }
-
-  &__title {
-    font-size: $x-small;
-    font-weight: $bold;
-    letter-spacing: -0.5px;
-    color: $core-fleet-black;
-    padding: 0 0 9px;
-    margin: 0 0 9px;
-  }
-
-  &__fields {
-    .fleeticon {
-      margin-right: 6px;
-      margin-left: 6px;
-    }
-  }
-}
diff --git a/frontend/components/forms/ConfigurePackQueryForm/index.js b/frontend/components/forms/ConfigurePackQueryForm/index.js
deleted file mode 100644
index 097a5d194a..0000000000
--- a/frontend/components/forms/ConfigurePackQueryForm/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ConfigurePackQueryForm";
diff --git a/frontend/components/forms/ConfigurePackQueryForm/validate.js b/frontend/components/forms/ConfigurePackQueryForm/validate.js
deleted file mode 100644
index b0663faa62..0000000000
--- a/frontend/components/forms/ConfigurePackQueryForm/validate.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { size } from "lodash";
-
-import validateNumericality from "components/forms/validators/validate_numericality";
-
-const validate = (formData) => {
-  const errors = {};
-
-  if (!formData.query_id) {
-    errors.query_id = "A query must be selected";
-  }
-
-  if (!formData.interval) {
-    errors.interval = "Frequency (seconds) must be present";
-  }
-
-  if (formData.interval && !validateNumericality(formData.interval)) {
-    errors.interval = "Frequency must be a number";
-  }
-
-  // logging_type does not need to be validated because it is defaulted "snapshot" if unspecified.
-
-  if (formData.shard) {
-    if (formData.shard < 0 || formData.shard > 100) {
-      errors.shard = "Shard must be between 0 and 100";
-    }
-  }
-
-  const valid = !size(errors);
-
-  return { valid, errors };
-};
-
-export default validate;
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx
deleted file mode 100644
index d81213338a..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import ConfigurePackQueryForm from "components/forms/ConfigurePackQueryForm";
-import queryInterface from "interfaces/query";
-import scheduledQueryInterface from "interfaces/scheduled_query";
-import SearchPackQuery from "./SearchPackQuery";
-import SecondarySidePanelContainer from "../SecondarySidePanelContainer";
-
-const baseClass = "schedule-query-side-panel";
-
-const ScheduleQuerySidePanel = ({
-  allQueries,
-  onConfigurePackQuerySubmit,
-  onFormCancel,
-  onUpdateScheduledQuery,
-  onSelectQuery,
-  selectedQuery,
-  selectedScheduledQuery,
-}) => {
-  const renderForm = () => {
-    if (!selectedQuery) {
-      return false;
-    }
-
-    const formData = selectedScheduledQuery || { logging_type: "snapshot" };
-
-    formData.query_id = selectedQuery.id;
-
-    const handleSubmit = selectedScheduledQuery
-      ? onUpdateScheduledQuery
-      : onConfigurePackQuerySubmit;
-
-    return (
-      <ConfigurePackQueryForm
-        formData={formData}
-        handleSubmit={handleSubmit}
-        onCancel={onFormCancel}
-      />
-    );
-  };
-
-  return (
-    <SecondarySidePanelContainer className={baseClass}>
-      <SearchPackQuery
-        allQueries={allQueries}
-        onSelectQuery={onSelectQuery}
-        selectedQuery={selectedQuery}
-      />
-      {renderForm()}
-    </SecondarySidePanelContainer>
-  );
-};
-
-ScheduleQuerySidePanel.propTypes = {
-  allQueries: PropTypes.arrayOf(queryInterface),
-  onConfigurePackQuerySubmit: PropTypes.func,
-  onFormCancel: PropTypes.func,
-  onSelectQuery: PropTypes.func,
-  onUpdateScheduledQuery: PropTypes.func,
-  selectedQuery: queryInterface,
-  selectedScheduledQuery: scheduledQueryInterface,
-};
-
-export default ScheduleQuerySidePanel;
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx
deleted file mode 100644
index 8e10593e64..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/ScheduleQuerySidePanel.tests.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-
-import ScheduleQuerySidePanel from "./ScheduleQuerySidePanel";
-
-describe("ScheduleQuerySidePanel - component", () => {
-  it("renders SearchPackQuery", () => {
-    const { container } = render(<ScheduleQuerySidePanel />);
-
-    expect(container.querySelectorAll(".search-pack-query").length).toEqual(1);
-  });
-});
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
deleted file mode 100644
index 06b1c5e0a3..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
+++ /dev/null
@@ -1,129 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import AceEditor from "react-ace";
-import { isEqual, sortBy } from "lodash";
-
-import FleetIcon from "components/icons/FleetIcon";
-import queryInterface from "interfaces/query";
-import Dropdown from "components/forms/fields/Dropdown";
-
-const baseClass = "search-pack-query";
-
-class SearchPackQuery extends Component {
-  static propTypes = {
-    allQueries: PropTypes.arrayOf(queryInterface),
-    onSelectQuery: PropTypes.func,
-    selectedQuery: queryInterface,
-  };
-
-  static defaultProps = {
-    allQueries: [],
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      queryDropdownOptions: [],
-    };
-  }
-
-  componentWillMount() {
-    const { allQueries } = this.props;
-
-    const queryDropdownOptions = allQueries.map((query) => {
-      return { label: query.name, value: String(query.id) };
-    });
-
-    this.setState({
-      queryDropdownOptions: sortBy(queryDropdownOptions, ["label"]),
-    });
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { allQueries } = nextProps;
-
-    if (!isEqual(allQueries, this.props.allQueries)) {
-      const queryDropdownOptions = allQueries.map((query) => {
-        return { label: query.name, value: String(query.id) };
-      });
-
-      this.setState({
-        queryDropdownOptions: sortBy(queryDropdownOptions, ["label"]),
-      });
-    }
-  }
-
-  renderHeader = () => {
-    const { selectedQuery } = this.props;
-    if (selectedQuery) {
-      return (
-        <h1 className={`${baseClass}__title`}>
-          <FleetIcon name="query" /> {selectedQuery.name}
-        </h1>
-      );
-    }
-
-    return <h1 className={`${baseClass}__title`}>Choose Query</h1>;
-  };
-
-  renderQuery = () => {
-    const { selectedQuery } = this.props;
-    if (selectedQuery) {
-      return (
-        <AceEditor
-          editorProps={{ $blockScrolling: Infinity }}
-          mode="fleet"
-          minLines={1}
-          maxLines={3}
-          name="pack-query"
-          readOnly
-          setOptions={{ wrap: true }}
-          showGutter={false}
-          showPrintMargin={false}
-          theme="fleet"
-          value={selectedQuery.query}
-          width="100%"
-          fontSize={14}
-        />
-      );
-    }
-
-    return false;
-  };
-
-  renderDescription = () => {
-    const { selectedQuery } = this.props;
-    if (selectedQuery) {
-      return (
-        <div className={`${baseClass}__description`}>
-          <h2>Description</h2>
-          <p>{selectedQuery.description || <>No description available.</>}</p>
-        </div>
-      );
-    }
-
-    return false;
-  };
-
-  render() {
-    const { renderHeader, renderQuery, renderDescription } = this;
-    const { onSelectQuery } = this.props;
-    const { queryDropdownOptions } = this.state;
-
-    return (
-      <div className={baseClass}>
-        {renderHeader()}
-        <Dropdown
-          options={queryDropdownOptions}
-          onChange={onSelectQuery}
-          placeholder={"Select query"}
-        />
-        {renderQuery()}
-        {renderDescription()}
-      </div>
-    );
-  }
-}
-
-export default SearchPackQuery;
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
deleted file mode 100644
index 71f3e0f5cb..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/_styles.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.search-pack-query {
-  &__title {
-    @include ellipsis(250px);
-    font-size: $x-small;
-    font-weight: $bold;
-    letter-spacing: -0.5px;
-    color: $core-fleet-black;
-    margin: 0 0 10px;
-  }
-
-  .form-field--dropdown {
-    margin-bottom: 20px;
-  }
-
-  .ace-fleet {
-    margin-bottom: 20px;
-  }
-
-  &__description {
-    margin: 0 0 $pad-xlarge;
-    word-wrap: break-word;
-
-    h2 {
-      font-size: $x-small;
-      font-weight: $bold;
-      letter-spacing: -0.5px;
-      color: $core-fleet-black;
-      margin: 0 0 $pad-small;
-    }
-
-    p {
-      margin: 0 0 10px;
-      font-size: $x-small;
-      font-weight: $regular;
-      line-height: 1.71;
-      color: $core-fleet-black;
-    }
-  }
-}
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js
deleted file mode 100644
index 01ebbc98ff..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./SearchPackQuery";
diff --git a/frontend/components/side_panels/ScheduleQuerySidePanel/index.js b/frontend/components/side_panels/ScheduleQuerySidePanel/index.js
deleted file mode 100644
index d6e7bdb4b0..0000000000
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./ScheduleQuerySidePanel";