[BUG] Fix config diff view for the scenarios where experiment engine configuration has been updated (#95)

* - fix diff of experiment engine client configuration

* - fix a scenario, when router is updated from nop experiment to any other exp engine

* - strip util keys from exp engine config

* - improve readability of stripKeys

* - run prettifier on the entire UI repo

Author: romanwozniak

ui/src/PrivateLayout.js

@@ -4,21 +4,21 @@ import {
   ApplicationsContextProvider,
   CurrentProjectContextProvider,
   Header,
-  ProjectsContextProvider
+  ProjectsContextProvider,
 } from "@gojek/mlp-ui";
 import { appConfig } from "./config";
 import { EnvironmentsContextProvider } from "./providers/environments/context";
 import "./PrivateLayout.scss";
 
-export const PrivateLayout = Component => {
-  return props => (
+export const PrivateLayout = (Component) => {
+  return (props) => (
     <ApplicationsContextProvider>
       <ProjectsContextProvider>
         <CurrentProjectContextProvider {...props}>
           <Header
             homeUrl={appConfig.homepage}
             appIcon={appConfig.appIcon}
-            onProjectSelect={projectId =>
+            onProjectSelect={(projectId) =>
               navigate(`${appConfig.homepage}/projects/${projectId}/routers`)
             }
             docLinks={appConfig.docsUrl}

ui/src/components/accordion_form/AccordionForm.js

@@ -3,27 +3,27 @@ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from "@elastic/eui";
 import { StepActions } from "../multi_steps_form/StepActions";
 import { Sticky, StickyContainer } from "react-sticky";
 import FormValidationContext, {
-  MultiSectionFormValidationContextProvider
+  MultiSectionFormValidationContextProvider,
 } from "../form/validation";
 import {
   AccordionFormScrollController,
   AccordionFormSection,
-  AccordionFormSideNav
+  AccordionFormSideNav,
 } from ".";
 
 import "./AccordionForm.scss";
 import useDimension from "../../hooks/useDimension";
 import { isEmpty } from "../../utils/object";
 
-export const isSectionInvalid = errors => !isEmpty(errors);
+export const isSectionInvalid = (errors) => !isEmpty(errors);
 
 export const AccordionForm = ({
   name,
   sections,
   onCancel,
   onSubmit,
   submitLabel,
-  renderTitle
+  renderTitle,
 }) => {
   const lastSectionRef = useRef(null);
   const { height: lastSectionHeight } = useDimension(lastSectionRef);
@@ -44,8 +44,8 @@ export const AccordionForm = ({
         <EuiFlexItem grow={true} className="accordionForm--content">
           <MultiSectionFormValidationContextProvider
             onSubmit={onSubmit}
-            schemas={sections.map(s => s.validationSchema)}
-            contexts={sections.map(s => s.validationContext)}>
+            schemas={sections.map((s) => s.validationSchema)}
+            contexts={sections.map((s) => s.validationContext)}>
             <FormValidationContext.Consumer>
               {({ errors, onSubmit, isSubmitting }) => (
                 <EuiFlexGroup
@@ -76,9 +76,9 @@ export const AccordionForm = ({
                   <EuiFlexItem
                     // set the minHeight dynamically, based on the height of the last section
                     style={{
-                      minHeight: `calc(100vh - ${lastSectionHeight +
-                        24 +
-                        16}px)`
+                      minHeight: `calc(100vh - ${
+                        lastSectionHeight + 24 + 16
+                      }px)`,
                     }}>
                     <StepActions
                       submitLabel={submitLabel}

ui/src/components/accordion_form/AccordionFormScrollController.js

@@ -6,9 +6,8 @@ import { animatedScrollConfig } from "./scroll";
 import { isSectionInvalid } from "./AccordionForm";
 
 export const AccordionFormScrollController = ({ sections }) => {
-  const [isFormSubmissionInProgress, setFormSubmissionInProgress] = useState(
-    false
-  );
+  const [isFormSubmissionInProgress, setFormSubmissionInProgress] =
+    useState(false);
   const { isSubmitting, errors } = useContext(FormValidationContext);
 
   useEffect(() => {

ui/src/components/accordion_form/AccordionFormSideNav.js

@@ -12,9 +12,9 @@ export const AccordionFormSideNav = ({ name, sections }) => {
       items: sections.map((section, idx) => ({
         id: idx,
         name: section.title,
-        renderItem: () => <AccordionFormSideNavItem section={section} />
-      }))
-    }
+        renderItem: () => <AccordionFormSideNavItem section={section} />,
+      })),
+    },
   ];
 
   return <EuiSideNav items={sideNav} />;

ui/src/components/accordion_form/scroll.js

@@ -2,5 +2,5 @@ export const animatedScrollConfig = {
   smooth: true,
   offset: 0,
   delay: 50,
-  duration: 300
+  duration: 300,
 };

ui/src/components/form/combo_box/ComboboxSuggestItem.js

@@ -8,7 +8,7 @@ export const ComboboxSuggestItem = ({
   searchValue,
   optionContentClassname,
   prepend,
-  append
+  append,
 }) => {
   return (
     <EuiFlexGroup direction="row" justifyContent="spaceBetween">

ui/src/components/form/combo_box/EuiComboBoxSelect.js

@@ -2,14 +2,14 @@ import React, { useEffect, useState } from "react";
 import { EuiComboBox } from "@elastic/eui";
 import {
   ComboboxSuggestItem,
-  EuiComboboxSuggestItemRowHeight
+  EuiComboboxSuggestItemRowHeight,
 } from "./ComboboxSuggestItem";
 
 export const EuiComboBoxSelect = ({ value, onChange, options, ...props }) => {
   const [selected, setSelected] = useState([]);
 
   useEffect(() => {
-    let selected = options.filter(suggestion => suggestion.label === value);
+    let selected = options.filter((suggestion) => suggestion.label === value);
 
     if (value && selected.length === 0) {
       selected = [{ label: value }];
@@ -28,7 +28,7 @@ export const EuiComboBoxSelect = ({ value, onChange, options, ...props }) => {
       singleSelection={{ asPlainText: true }}
       noSuggestions={props.noSuggestions || !options}
       options={options}
-      onChange={selected => {
+      onChange={(selected) => {
         onChange(selected.length ? selected[0].label : undefined);
       }}
       isClearable={props.isClearable || true}

ui/src/components/form/context.js

@@ -10,16 +10,19 @@ export const FormContextProvider = ({ data: initData, ...props }) => {
 
   const handleChanges = useCallback(
     (paths, value) => {
-      const path = paths.filter(part => !!part).join(".");
-      setData(data => {
+      const path = paths.filter((part) => !!part).join(".");
+      setData((data) => {
         set(data, path, value);
         return Object.assign(Object.create(data), data);
       });
     },
     [setData]
   );
 
-  const rootHandler = useMemo(() => new StackableFunction([], handleChanges), [handleChanges])
+  const rootHandler = useMemo(
+    () => new StackableFunction([], handleChanges),
+    [handleChanges]
+  );
   const { onChangeHandler, onChange } = useOnChangeHandler(rootHandler);
 
   return (

ui/src/components/form/docker_image_combo_box/DockerRegistryPopover.js

@@ -7,15 +7,15 @@ export const DockerRegistryPopover = ({ value, registryOptions, onChange }) => {
 
   const panels = flattenPanelTree({
     id: 0,
-    items: registryOptions.map(registry => ({
+    items: registryOptions.map((registry) => ({
       name: registry.inputDisplay,
       value: registry.value,
       icon: "logoDocker",
       onClick: () => {
         togglePopover();
         onChange(registry.value);
-      }
-    }))
+      },
+    })),
   });
 
   const togglePopover = () => setOpen(!isOpen);
@@ -28,7 +28,7 @@ export const DockerRegistryPopover = ({ value, registryOptions, onChange }) => {
           iconType="arrowDown"
           iconSide="right"
           onClick={togglePopover}>
-          {registryOptions.find(o => o.value === value).inputDisplay}
+          {registryOptions.find((o) => o.value === value).inputDisplay}
         </EuiButtonEmpty>
       }
       isOpen={isOpen}

ui/src/components/form/docker_image_combo_box/SelectDockerImageComboBox.js

@@ -5,7 +5,7 @@ import { EuiComboBoxSelect } from "../combo_box/EuiComboBoxSelect";
 
 const extractRegistry = (image, registries) => {
   if (image) {
-    const registry = registries.find(o => image.startsWith(o.value));
+    const registry = registries.find((o) => image.startsWith(o.value));
     if (registry && registry.value) {
       image = image.substr(registry.value.length);
       image && image.startsWith("/") && (image = image.substr(1));
@@ -25,11 +25,11 @@ export const SelectDockerImageComboBox = ({
 }) => {
   const [registry, image] = extractRegistry(value, registryOptions);
 
-  const onRegistryChange = value => {
+  const onRegistryChange = (value) => {
     onChange(value ? `${value}/${image}` : image);
   };
 
-  const onImageChange = value => {
+  const onImageChange = (value) => {
     onChange(registry ? `${registry}/${value}` : value);
   };
 
@@ -42,7 +42,7 @@ export const SelectDockerImageComboBox = ({
       isInvalid={props.isInvalid}
       options={imageOptions}
       value={image}
-      onChange={value => onImageChange(value || "")}
+      onChange={(value) => onImageChange(value || "")}
       onCreateOption={onImageChange}
       prepend={
         <DockerRegistryPopover