fix: namespace properties to avoid key conflicts (#136)

* fix: namespace properties to avoid key conflicts

* chore: rename things, remove logging

* fix: downgrade to sass 6

* fix: import issues, just duplicate some code

* fix: remove lib import

* Update package.json

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "homepage": "https://useboomerang.io",
   "scripts": {
-    "analyze": "source-map-explorer server/build/static/js/main.*",
+    "analyze": "source-map-explorer server/build/static/js/*.js",
     "build": "react-scripts build",
     "build:rewriteAssetPaths": "cross-env APP_ROOT=/local node server/scripts/rewriteAssetPaths.js",
     "postbuild": "ncp build server/build",
@@ -32,7 +32,7 @@
     "@boomerang-io/utils": "1.0.3",
     "@carbon/charts": "^0.16.24",
     "@carbon/charts-react": "^0.16.24",
-    "@carbon/icons-react": "10.47.0",
+    "@carbon/icons-react": "10.49.0",
     "@projectstorm/react-diagrams": "^5.3.2",
     "axios": "^0.26.0",
     "axios-hooks": "^3.0.1",
@@ -120,11 +120,12 @@
     "lint-staged": "10.1.1",
     "miragejs": "^0.1.40",
     "ncp": "^2.0.0",
-    "node-sass": "^7.0.1",
+    "sass": "^1.50.0",
     "npm-run-all": "4.1.5",
     "prettier": "2.0.5",
-    "react-test-renderer": "^16.13.1",
+    "source-map-explorer": "^2.4.2",
     "start-server-and-test": "^1.10.11",
+    "react-test-renderer": "^16.13.1",
     "ts-loader": "^9.2.8",
     "typescript": "^4.5.4",
     "typescript-plugin-css-modules": "^3.4.0",

src/Components/ScheduleCreator/ScheduleCreator.tsx

@@ -50,11 +50,13 @@ export default function CreateSchedule(props: CreateScheduleProps) {
 
   const handleSubmit = async (values: ScheduleManagerFormInputs) => {
     const {
-      name,
-      description,
+      advancedCron,
       cronSchedule,
       dateTime,
+      description,
+      id,
       labels,
+      name,
       timezone,
       type,
       days,
@@ -70,14 +72,20 @@ export default function CreateSchedule(props: CreateScheduleProps) {
         return { key, value };
       });
     }
-    let scheduleType = type;
+
+    // Undo the namespacing of parameter keys and add to parameter object
+    const resetParameters: { [key: string]: any } = {};
+    Object.keys(parameters).forEach((paramKey) => {
+      resetParameters[paramKey.replace("$parameter:", "")] = parameters[paramKey];
+    });
+
     const schedule: Partial<ScheduleUnion> = {
       name,
       description,
-      type: scheduleType,
+      type,
       timezone: timezone.value,
       labels: scheduleLabels,
-      parameters,
+      parameters: resetParameters,
       workflowId: workflow.id,
     };
 

src/Components/ScheduleEditor/ScheduleEditor.tsx

@@ -24,7 +24,7 @@ function ScheduleEditor(props: ScheduleEditorProps) {
   /**
    * Update schedule
    */
-  const  { mutateAsync: updateScheduleMutator, ...editScheduleMutation } = useMutation(resolver.patchSchedule, {});
+  const { mutateAsync: updateScheduleMutator, ...editScheduleMutation } = useMutation(resolver.patchSchedule, {});
 
   const handleUpdateSchedule = async (updatedSchedule: ScheduleUnion) => {
     if (props.schedule) {
@@ -66,15 +66,21 @@ function ScheduleEditor(props: ScheduleEditorProps) {
         return { key, value };
       });
     }
-    let scheduleType = type;
+
+    // Undo the namespacing of parameter keys and add to parameter object
+    const resetParameters: { [key: string]: any } = {};
+    Object.keys(parameters).forEach((paramKey) => {
+      resetParameters[paramKey.replace("$parameter:", "")] = parameters[paramKey];
+    });
+
     const schedule: Partial<ScheduleUnion> = {
-      name,
       description,
-      type: scheduleType,
-      timezone: timezone.value,
+      name,
+      type,
       labels: scheduleLabels,
+      timezone: timezone.value,
+      parameters: resetParameters,
       workflowId: workflow.id || props.workflow?.id,
-      parameters,
     };
 
     if (schedule.type === "runOnce") {

src/Components/ScheduleManagerForm/ScheduleManagerForm.tsx

@@ -51,7 +51,7 @@ export default function CreateEditForm(props: CreateEditFormProps) {
   const { teams } = useAppContext();
 
   const [workflowProperties, setWorkflowProperties] = React.useState<Array<DataDrivenInput> | undefined>(
-    props.workflow?.properties
+    props.workflow?.properties.map((property) => ({ ...property, key: `$parameter:${property.key}` }))
   );
   let initFormValues: Partial<ScheduleManagerFormInputs> = {
     id: props.schedule?.id,
@@ -63,9 +63,19 @@ export default function CreateEditForm(props: CreateEditFormProps) {
     workflow: props.workflow,
     days: [],
     labels: [],
-    ...props.schedule?.parameters,
   };
 
+  /**
+   * Namespace parameter values if they exist
+   */
+  if (props.schedule?.parameters && Object.keys(props.schedule?.parameters ?? {}).length > 0) {
+    const parameterKeys = Object.keys(props.schedule?.parameters);
+    for (const key of parameterKeys) {
+      //@ts-ignore
+      initFormValues[`$parameter:${key}`] = props.schedule.parameters[key];
+    }
+  }
+
   /**
    * Handle creating it from calendar click
    */
@@ -205,7 +215,9 @@ export default function CreateEditForm(props: CreateEditFormProps) {
                 onChange={({ selectedItem }: { selectedItem: WorkflowSummary }) => {
                   formikProps.setFieldValue("workflow", selectedItem);
                   if (selectedItem?.id) {
-                    setWorkflowProperties(selectedItem.properties);
+                    setWorkflowProperties(
+                      selectedItem.properties.map((property) => ({ ...property, key: `$parameter:${property.key}` }))
+                    );
                   }
                 }}
                 placeholder="e.g. Number 1 Workflow"
@@ -299,7 +311,6 @@ export default function CreateEditForm(props: CreateEditFormProps) {
             ) : (
               <CronJobConfig formikProps={formikProps} timezoneOptions={timezoneOptions} />
             )}
-
             <>
               <p>
                 <b>Workflow Parameters</b>

src/Components/WorkflowTaskResultsForm/WorkflowTaskForm.js → src/Components/WorkflowTaskResultsForm/WorkflowTaskResultsForm.js

@@ -12,7 +12,7 @@ import {
 import { Button, ModalBody, ModalFooter } from "@boomerang-io/carbon-addons-boomerang-react";
 import TextEditorModal from "Components/TextEditorModal";
 import { TEXT_AREA_TYPES } from "Constants/formInputTypes";
-import styles from "./WorkflowTaskForm.module.scss";
+import styles from "./WorkflowTaskFormResults.module.scss";
 
 const AutoSuggestInput = (props) => {
   //number inputs doesn't support AutoSuggest setSelectionRange
@@ -107,7 +107,7 @@ function formatAutoSuggestProperties(inputProperties) {
   }));
 }
 
-class WorkflowTaskForm extends Component {
+class WorkflowTaskResultsForm extends Component {
   static propTypes = {
     closeModal: PropTypes.func,
     inputProperties: PropTypes.array,
@@ -271,4 +271,4 @@ class WorkflowTaskForm extends Component {
   }
 }
 
-export default WorkflowTaskForm;
+export default WorkflowTaskResultsForm;

src/Components/WorkflowTaskResultsForm/index.js

@@ -1 +1 @@
-export { default } from "./WorkflowTaskForm"
+export { default } from "./WorkflowTaskResultsForm";

src/Features/App/App.tsx

@@ -13,6 +13,7 @@ import {
 } from "@boomerang-io/carbon-addons-boomerang-react";
 import ErrorBoundary from "Components/ErrorBoundary";
 import ErrorDragon from "Components/ErrorDragon";
+
 import OnBoardExpContainer from "Features/Tutorial";
 import Navbar from "./Navbar";
 import UnsupportedBrowserPrompt from "./UnsupportedBrowserPrompt";

src/Features/Editor/Designer/Tasks/Tasks.tsx

@@ -5,13 +5,13 @@ import matchSorter from "match-sorter";
 import uniqBy from "lodash/uniqBy";
 import { sortByProp } from "@boomerang-io/utils";
 import {
+  Accordion,
   AccordionItem,
   Checkbox,
   CheckboxList,
   OverflowMenu,
   Search,
 } from "@boomerang-io/carbon-addons-boomerang-react";
-import Accordion from "carbon-components-react/lib/components/Accordion";
 import Task from "./Task";
 import { taskIcons } from "Utils/taskIcons";
 import { ChevronLeft32, SettingsAdjust16, Recommend16 } from "@carbon/icons-react";

src/Features/Editor/Properties/Properties.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQueryClient } from "react-query";
 import { Helmet } from "react-helmet";
 import capitalize from "lodash/capitalize";
 import { ConfirmModal, notify, ToastNotification } from "@boomerang-io/carbon-addons-boomerang-react";
-import WorkflowCloseButton from "Components/WorkflowCloseButton";
+import WorkflowCloseButton from "./WorkflowCloseButton";
 import WorkflowPropertiesModal from "./PropertiesModal";
 import { serviceUrl, resolver } from "Config/servicesConfig";
 import { InputType, WorkflowPropertyUpdateType } from "Constants";

src/Features/Editor/Properties/PropertiesModal/PropertiesModal.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ComposedModal } from "@boomerang-io/carbon-addons-boomerang-react";
-import WorkflowEditButton from "Components/WorkflowEditButton";
+import WorkflowEditButton from "./WorkflowEditButton";
 import PropertiesModalContent from "./PropertiesModalContent";
 import { Add32 } from "@carbon/icons-react";
 import { ComposedModalChildProps, DataDrivenInput, ModalTriggerProps } from "Types";

src/Features/Editor/Properties/PropertiesModal/WorkflowEditButton/EditButton.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const SvgComponent = (props) => (
+  <svg viewBox="0 0 26 26" {...props}>
+    <title>{"edit"}</title>
+    <g id="Symbols" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+      <g id="Editor-/-task-card" transform="translate(-190.000000, 13.000000)">
+        <g id="edit" transform="translate(191.000000, -12.000000)">
+          <circle id="Oval" stroke="#0072C3" fill="#FFFFFF" cx={12} cy={12} r={12} />
+          <g id="Actions-/-Formatting-/-edit-/-24" transform="translate(4.000000, 4.000000)" fill="#000000">
+            <path
+              d="M1,13.5 L15,13.5 L15,14.5 L1,14.5 L1,13.5 Z M12.705,4.5 C12.892777,4.31243174 12.9982867,4.05790925 12.9982867,3.7925 C12.9982867,3.52709075 12.892777,3.27256826 12.705,3.085 L10.915,1.295 C10.7274317,1.10722296 10.4729092,1.00171334 10.2075,1.00171334 C9.94209075,1.00171334 9.68756826,1.10722296 9.5,1.295 L2,8.795 L2,12 L5.205,12 L12.705,4.5 Z M10.205,2 L12,3.795 L10.5,5.295 L8.705,3.5 L10.205,2 Z M3,11 L3,9.205 L8,4.205 L9.795,6 L4.795,11 L3,11 Z"
+              id="Fill"
+            />
+          </g>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default SvgComponent;

src/Features/Editor/Properties/PropertiesModal/WorkflowEditButton/WorkflowEditButton.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import EditButton from "./EditButton";
+import { isAccessibleKeyboardEvent } from "@boomerang-io/utils";
+import styles from "./WorkflowEditButton.module.scss";
+
+WorkflowEditButton.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+export default function WorkflowEditButton({ alt = "Workflow edit button", className, onClick, ...rest }) {
+  return (
+    <EditButton
+      alt={alt}
+      className={cx(styles.editButton, className)}
+      onClick={onClick}
+      onKeyDown={(e) => isAccessibleKeyboardEvent(e) && onClick(e)}
+      role="button"
+      tabIndex="0"
+      style={{ willChange: "auto" }}
+      {...rest}
+    />
+  );
+}

src/Features/Editor/Properties/PropertiesModal/WorkflowEditButton/WorkflowEditButton.module.scss

@@ -0,0 +1,11 @@
+@import "Styles/mixins";
+
+.editButton {
+  cursor: pointer;
+  height: 1.75rem;
+  width: 1.75rem;
+
+  &:focus {
+    @include focus-outline(var(--cds-interactive-01), 0rem);
+  }
+}

src/Features/Editor/Properties/PropertiesModal/WorkflowEditButton/index.js

@@ -0,0 +1 @@
+export { default } from "./WorkflowEditButton";

src/Features/Editor/Properties/WorkflowCloseButton/CloseButton.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const CloseButton = (props) => (
+  <svg width="26px" height="26px" viewBox="0 0 26 26" {...props}>
+    <title>{"close-button"}</title>
+    <g id="30-editor" stroke="none" strokeWidth={1} fill="none" fillRule="evenodd">
+      <g id="close-button" transform="translate(1.000000, 1.000000)">
+        <circle id="Oval" stroke="#0072C3" fill="#FFFFFF" cx={12} cy={12} r={12} />
+        <g id="Actions-/-Navigation-/-close-/-24" transform="translate(4.000000, 4.000000)" fill="#000000">
+          <polygon id="Fill" points="12 4.7 11.3 4 8 7.3 4.7 4 4 4.7 7.3 8 4 11.3 4.7 12 8 8.7 11.3 12 12 11.3 8.7 8" />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default CloseButton;

src/Features/Editor/Properties/WorkflowCloseButton/WorkflowCloseButton.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import cx from "classnames";
+import CloseButton from "./CloseButton";
+import { isAccessibleKeyboardEvent } from "@boomerang-io/utils";
+import styles from "./WorkflowCloseButton.module.scss";
+
+WorkflowCloseButton.propTypes = {
+  alt: PropTypes.string,
+  className: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default function WorkflowCloseButton({ alt = "Workflow close button", className, onClick, ...rest }) {
+  return (
+    <CloseButton
+      alt={alt}
+      className={cx(styles.closeButton, className)}
+      onClick={onClick}
+      onKeyDown={(e) => isAccessibleKeyboardEvent(e) && onClick(e)}
+      role="button"
+      tabIndex={0}
+      {...rest}
+    />
+  );
+}

src/Features/Editor/Properties/WorkflowCloseButton/WorkflowCloseButton.module.scss

@@ -0,0 +1,11 @@
+@import "Styles/mixins";
+
+.closeButton {
+  cursor: pointer;
+  height: 1.75rem;
+  width: 1.75rem;
+
+  &:focus {
+    @include focus-outline(var(--cds-interactive-01), 0rem);
+  }
+}

src/Features/Editor/Properties/WorkflowCloseButton/index.js

@@ -0,0 +1 @@
+export { default } from "./WorkflowCloseButton";

src/Types/index.tsx

@@ -642,11 +642,11 @@ export interface ScheduleManagerFormInputs {
   id: string;
   labels: Array<string>;
   name: string;
-  parameters: { [key: string]: any };
   type: ScheduleType;
   timezone: { label: string; value: string };
   time: string;
   workflow: WorkflowSummary;
+  [key: string]: any;
 }
 
 export type DayOfWeekKey = "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";