Fix misc errors in web console (#951)

* fix misc bugs in CI dropdown

* fix app registration form

* make refetch optional

* change isEqual to not mutate arrays to prevent error

* fix reported lint issue

src/components/app-config-ci/index.tsx

@@ -1,8 +1,8 @@
 import { Typography } from '@equinor/eds-core-react';
 import { debounce } from 'lodash';
 import * as PropTypes from 'prop-types';
-import { useRef, useState } from 'react';
-import { MultiValue, SingleValue, StylesConfig } from 'react-select';
+import { useEffect, useRef, useState } from 'react';
+import { MultiValue, SingleValue } from 'react-select';
 
 import { ConfigurationItemPopover } from './ci-popover';
 import { ConfigurationItemSelect } from './ci-select';
@@ -16,7 +16,7 @@ import {
   GetApplicationsApiResponse,
   Application,
 } from '../../store/service-now-api';
-import { getFetchErrorCode, getFetchErrorMessage } from '../../store/utils';
+import { getFetchErrorMessage } from '../../store/utils';
 
 export type OnConfigurationItemChangeCallback = (ci?: Application) => void;
 type GetApplicationsFunction = ReturnType<
@@ -49,34 +49,30 @@ export function AppConfigConfigurationItem({
   configurationItemChangeCallback,
   disabled,
 }: Props) {
-  const [currentCI, setCurrentCI] = useState<Application | null>(null);
+  const [selectedCI, setSelectedCI] = useState<Application | null>(null);
   const [popoverCI, setPopoverCI] = useState<Application>();
   const [popoverOpen, setPopoverOpen] = useState(false);
   const [getApplications] =
     serviceNowApi.endpoints.getApplications.useLazyQuery();
 
-  const { data, ...state } = useGetApplicationQuery({
-    appId: configurationItem,
-  });
+  const { data: currentCI, ...currentCIState } = useGetApplicationQuery(
+    {
+      appId: configurationItem,
+    },
+    { skip: !configurationItem }
+  );
 
+  useEffect(() => {
+    setSelectedCI(currentCI);
+  }, [currentCI]);
   const containerRef = useRef<HTMLDivElement>(null);
 
   function onChange(newValue?: Application): void {
     configurationItemChangeCallback(newValue);
-    setCurrentCI(newValue);
+    setSelectedCI(newValue);
     setPopoverOpen(false);
   }
 
-  const selectStyle: StylesConfig = {
-    singleValue: (styles) => {
-      if (state.error && getFetchErrorCode(state.error) === 404) {
-        styles.backgroundColor = 'var(--eds_interactive_danger__highlight)';
-        styles.color = 'var(--eds_interactive_danger__text)';
-      }
-      return styles;
-    },
-  };
-
   return (
     <div className="configuration-item-select">
       <Typography className="label" group="input" variant="text">
@@ -93,7 +89,6 @@ export function AppConfigConfigurationItem({
           setPopoverOpen(!popoverOpen);
         }}
         containerRef={containerRef}
-        styles={selectStyle}
         name="ConfigurationItem"
         menuPosition="fixed"
         closeMenuOnScroll={({ target }: Event) =>
@@ -110,18 +105,18 @@ export function AppConfigConfigurationItem({
         getOptionValue={({ id }) => id}
         isClearable
         closeMenuOnSelect={false}
-        value={currentCI || data}
+        value={selectedCI}
         isDisabled={disabled}
       />
       <Typography className="helpertext" group="input" variant="text">
         Application from IT Software Inventory (type 3 characters to search)
       </Typography>
 
-      {state.isError && (
+      {currentCIState.isError && (
         <div>
           <Alert type="danger">
             <Typography>
-              Failed to load. {getFetchErrorMessage(state.error)}
+              Failed to load. {getFetchErrorMessage(currentCIState.error)}
             </Typography>
           </Alert>
         </div>

src/components/app-list/index.tsx

@@ -35,11 +35,10 @@ export default function AppList() {
     []
   );
 
-  const {
-    data: appsData,
-    refetch,
-    ...appsState
-  } = useShowApplicationsQuery({}, { pollingInterval });
+  const { data: appsData, ...appsState } = useShowApplicationsQuery(
+    {},
+    { pollingInterval }
+  );
   const { data: favsData, ...favsState } = useGetSearchApplicationsQuery(
     {
       apps: favourites?.join(','),
@@ -78,7 +77,7 @@ export default function AppList() {
       <div className="app-list__header">
         <Typography variant="body_short_bold">Favourites</Typography>
         <div className="create-app">
-          <PageCreateApplication refetch={refetch} />
+          <PageCreateApplication />
         </div>
       </div>
       <div className="app-list">

src/components/component/toolbar.tsx

@@ -16,7 +16,7 @@ type Props = {
   component?: Component;
   startEnabled?: boolean;
   stopEnabled?: boolean;
-  refetch: Function;
+  refetch?: Function;
 };
 export function Toolbar({
   appName,
@@ -55,7 +55,7 @@ export function Toolbar({
         envName,
         componentName: component.name,
       }).unwrap();
-      await refetch();
+      await refetch?.();
     } catch (error) {
       errorToast(`Failed to start component. ${getFetchErrorMessage(error)}`);
     }
@@ -67,7 +67,7 @@ export function Toolbar({
         envName,
         componentName: component.name,
       }).unwrap();
-      await refetch();
+      await refetch?.();
     } catch (error) {
       errorToast(`Failed to stop component. ${getFetchErrorMessage(error)}`);
     }
@@ -79,7 +79,7 @@ export function Toolbar({
         envName,
         componentName: component.name,
       }).unwrap();
-      await refetch();
+      await refetch?.();
     } catch (error) {
       errorToast(`Failed to restart component. ${getFetchErrorMessage(error)}`);
     }

src/components/configure-application-github/index.tsx

@@ -33,7 +33,7 @@ const radixZoneDNS = configVariables.RADIX_CLUSTER_BASE;
 
 interface Props {
   app: ApplicationRegistration;
-  refetch: Function;
+  refetch?: Function;
   onDeployKeyChange: (appName: string) => void;
   startVisible?: boolean;
   useOtherCiToolOptionVisible?: boolean;
@@ -68,7 +68,7 @@ export const ConfigureApplicationGithub = ({
       regenerateDeployKeyAndSecretData: { sharedSecret: nanoid() },
     }).unwrap();
     await refetchSecrets();
-    await refetch();
+    await refetch?.();
   });
 
   return (

src/components/create-application-form/index.tsx

@@ -36,7 +36,7 @@ function sanitizeName(name: string): string {
 }
 
 type Props = {
-  onCreated: (application: ApplicationRegistration) => Promise<void>;
+  onCreated: (application: ApplicationRegistration) => void;
 };
 export default function CreateApplicationForm({ onCreated }: Props) {
   const [acknowledgeWarnings, setAcknowledgeWarnings] = useState(false);
@@ -92,8 +92,8 @@ export default function CreateApplicationForm({ onCreated }: Props) {
       }).unwrap();
 
       //Only call onCreated when created without warnings, or created with ack warnings
-      if (response.warnings?.length === 0 || acknowledgeWarnings) {
-        await onCreated(response.applicationRegistration);
+      if (!response.warnings?.length || acknowledgeWarnings) {
+        onCreated(response.applicationRegistration);
         successToast('Saved');
       } else {
         warningToast('Registration had warnings');

src/components/page-configuration/change-admin-form.tsx

@@ -13,13 +13,14 @@ import {
   useModifyRegistrationDetailsMutation,
 } from '../../store/radix-api';
 import { handlePromiseWithToast } from '../global-top-nav/styled-toaster';
+import { difference } from 'lodash';
 
 const isEqual = (a: Array<unknown>, b: Array<unknown>) =>
-  JSON.stringify(a.sort()) === JSON.stringify(b.sort());
+  a.length == b.length && difference(a, b).length === 0;
 
 interface Props {
   registration: ApplicationRegistration;
-  refetch: Function;
+  refetch?: Function;
 }
 export default function ChangeAdminForm({ registration, refetch }: Props) {
   const [adminAdGroup, setAdminAdGroup] = useState<Array<string>>();
@@ -40,7 +41,7 @@ export default function ChangeAdminForm({ registration, refetch }: Props) {
           },
         },
       }).unwrap();
-      await refetch();
+      await refetch?.();
       setAdminAdGroup(undefined);
       setReaderAdGroup(undefined);
     }
@@ -101,5 +102,5 @@ export default function ChangeAdminForm({ registration, refetch }: Props) {
 
 ChangeAdminForm.proptypes = {
   registration: PropTypes.object.isRequired,
-  refetch: PropTypes.func.isRequired,
+  refetch: PropTypes.func,
 };

src/components/page-configuration/change-ci-form.tsx

@@ -17,7 +17,7 @@ import { Application } from '../../store/service-now-api';
 interface Props {
   appName: string;
   configurationItem?: string;
-  refetch: Function;
+  refetch?: Function;
 }
 
 export const ChangeConfigurationItemForm = ({
@@ -40,7 +40,7 @@ export const ChangeConfigurationItemForm = ({
       },
     }).unwrap();
 
-    await refetch();
+    await refetch?.();
   });
 
   return (
@@ -93,5 +93,5 @@ export const ChangeConfigurationItemForm = ({
 ChangeConfigurationItemForm.propTypes = {
   appName: PropTypes.string.isRequired,
   configurationItem: PropTypes.string,
-  refetch: PropTypes.func.isRequired,
+  refetch: PropTypes.func,
 };

src/components/page-configuration/change-config-branch-form.tsx

@@ -20,7 +20,7 @@ import { getFetchErrorMessage } from '../../store/utils';
 export interface ChangeConfigBranchFormProps {
   appName: string;
   configBranch: string;
-  refetch: Function;
+  refetch?: Function;
 }
 
 export const ChangeConfigBranchForm: FunctionComponent<
@@ -41,7 +41,7 @@ export const ChangeConfigBranchForm: FunctionComponent<
       },
     }).unwrap();
 
-    await refetch();
+    await refetch?.();
   });
 
   return (

src/components/page-configuration/change-config-file-form.tsx

@@ -16,7 +16,7 @@ import { getFetchErrorMessage } from '../../store/utils';
 export interface ChangeConfigFileFormProps {
   appName: string;
   radixConfigFullName?: string;
-  refetch: Function;
+  refetch?: Function;
 }
 
 const defaultConfigName = 'radixconfig.yaml';
@@ -39,7 +39,7 @@ export const ChangeConfigFileForm: FunctionComponent<
       },
     }).unwrap();
 
-    await refetch();
+    await refetch?.();
   });
 
   return (
@@ -104,5 +104,5 @@ export const ChangeConfigFileForm: FunctionComponent<
 ChangeConfigFileForm.propTypes = {
   appName: PropTypes.string.isRequired,
   radixConfigFullName: PropTypes.string,
-  refetch: PropTypes.func.isRequired,
+  refetch: PropTypes.func,
 };

src/components/page-configuration/change-repository-form.tsx

@@ -42,7 +42,7 @@ const DeployKey = ({ appName }: { appName: string }) => {
 interface Props {
   appName: string;
   repository: string;
-  refetch: Function;
+  refetch?: Function;
   sharedSecret: string;
 }
 export function ChangeRepositoryForm({
@@ -71,7 +71,7 @@ export function ChangeRepositoryForm({
       },
     }).unwrap();
 
-    await refetch();
+    await refetch?.();
   });
 
   return (
@@ -254,6 +254,6 @@ export function ChangeRepositoryForm({
 ChangeRepositoryForm.propTypes = {
   appName: PropTypes.string.isRequired,
   repository: PropTypes.string.isRequired,
-  refetch: PropTypes.func.isRequired,
+  refetch: PropTypes.func,
   sharedSecret: PropTypes.string.isRequired,
 };

src/components/page-create-application/dev.tsx

@@ -9,6 +9,6 @@ export default (
       padding: '16px',
     }}
   >
-    <PageCreateApplication refetch={() => {}} />
+    <PageCreateApplication />
   </div>
 );

src/components/page-create-application/index.tsx

@@ -16,21 +16,20 @@ function scrollToPosition(elementRef: Element, x: number, y: number): void {
   elementRef.scrollTo?.(x, y);
 }
 
-type Props = { refetch: Function };
-export default function PageCreateApplication({ refetch }: Props) {
+export default function PageCreateApplication() {
   const [visibleScrim, setVisibleScrim] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
   const [registration, setRegistration] =
     useState<ApplicationRegistration | null>(null);
 
   const onCloseScrim = () => {
     setVisibleScrim(false);
+    setRegistration(null);
   };
 
-  const onCreated = async (newRegistration: ApplicationRegistration) => {
-    setRegistration(newRegistration);
-    await refetch();
+  const onCreated = (newRegistration: ApplicationRegistration) => {
     scrollToPosition(containerRef.current, 0, 0);
+    setRegistration(newRegistration);
   };
 
   return (
@@ -59,7 +58,6 @@ export default function PageCreateApplication({ refetch }: Props) {
                 set up
               </Typography>
               <ConfigureApplicationGithub
-                refetch={refetch}
                 app={registration}
                 startVisible
                 onDeployKeyChange={() => void 0}