chore(md): enable strict null check on the editor level (it won't be …

…enforced during compilation) (#8949) Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>
spinnaker · Feb 26, 2021 · fa96f32 · fa96f32
1 parent 1674e71
commit fa96f32
Show file tree

Hide file tree

Showing 30 changed files with 211 additions and 163 deletions.
diff --git a/app/scripts/modules/core/src/domain/IManagedEntity.ts b/app/scripts/modules/core/src/domain/IManagedEntity.ts
@@ -97,37 +97,41 @@ export interface IPinned {
   comment?: string;
 }
 
+export interface IManagedArtifactVersionEnvironment {
+  name: string;
+  state: 'current' | 'deploying' | 'approved' | 'pending' | 'previous' | 'vetoed' | 'skipped';
+  pinned?: IPinned;
+  vetoed?: {
+    at: string;
+    by: string;
+    comment?: string;
+  };
+  deployedAt?: string;
+  replacedAt?: string;
+  replacedBy?: string;
+  statefulConstraints?: IStatefulConstraint[];
+  statelessConstraints?: IStatelessConstraint[];
+  compareLink?: string;
+  verifications?: IVerification[];
+}
+
+export interface IManagedArtifactVersionLifecycleStep {
+  // likely more scopes + types later, but hard-coding to avoid premature abstraction for now
+  scope: 'PRE_DEPLOYMENT';
+  type: 'BUILD' | 'BAKE';
+  id: string;
+  status: 'NOT_STARTED' | 'RUNNING' | 'SUCCEEDED' | 'FAILED' | 'ABORTED' | 'UNKNOWN';
+  startedAt?: string;
+  completedAt?: string;
+  link?: string;
+}
+
 export interface IManagedArtifactVersion {
   version: string;
   displayName: string;
   createdAt?: string;
-  environments: Array<{
-    name: string;
-    state: 'current' | 'deploying' | 'approved' | 'pending' | 'previous' | 'vetoed' | 'skipped';
-    pinned?: IPinned;
-    vetoed?: {
-      at: string;
-      by: string;
-      comment?: string;
-    };
-    deployedAt?: string;
-    replacedAt?: string;
-    replacedBy?: string;
-    statefulConstraints?: IStatefulConstraint[];
-    statelessConstraints?: IStatelessConstraint[];
-    compareLink?: string;
-    verifications?: IVerification[];
-  }>;
-  lifecycleSteps?: Array<{
-    // likely more scopes + types later, but hard-coding to avoid premature abstraction for now
-    scope: 'PRE_DEPLOYMENT';
-    type: 'BUILD' | 'BAKE';
-    id: string;
-    status: 'NOT_STARTED' | 'RUNNING' | 'SUCCEEDED' | 'FAILED' | 'ABORTED' | 'UNKNOWN';
-    startedAt?: string;
-    completedAt?: string;
-    link?: string;
-  }>;
+  environments: IManagedArtifactVersionEnvironment[];
+  lifecycleSteps?: IManagedArtifactVersionLifecycleStep[];
   build?: {
     id: number; // deprecated, use number
     number: string;
@@ -161,9 +165,6 @@ export interface IManagedArtifactVersion {
   };
 }
 
-export type IManagedArtifactVersionEnvironment = IManagedArtifactSummary['versions'][0]['environments'][0];
-export type IManagedArtifactVersionLifecycleStep = IManagedArtifactSummary['versions'][0]['lifecycleSteps'][0];
-
 export interface IManagedArtifactSummary {
   name: string;
   type: string;

diff --git a/app/scripts/modules/core/src/managed/AbsoluteTimestamp.tsx b/app/scripts/modules/core/src/managed/AbsoluteTimestamp.tsx
@@ -13,7 +13,7 @@ const TIMEZONE = SETTINGS.feature.displayTimestampsInUserLocalTime ? undefined :
 
 export const AbsoluteTimestamp = memo(
   ({ timestamp: timestampInOriginalZone, clickToCopy }: IAbsoluteTimestampProps) => {
-    const timestamp = timestampInOriginalZone.setZone(TIMEZONE);
+    const timestamp = TIMEZONE ? timestampInOriginalZone.setZone(TIMEZONE) : timestampInOriginalZone;
 
     const fullTimestamp = timestamp.toFormat('yyyy-MM-dd HH:mm:ss ZZZZ');
     const formattedTimestamp = timestamp.toFormat('MMM d, y HH:mm');

diff --git a/app/scripts/modules/core/src/managed/Button.tsx b/app/scripts/modules/core/src/managed/Button.tsx
@@ -17,9 +17,9 @@ export interface IButtonProps {
 export const Button = ({ iconName, appearance = DEFAULT_APPEARANCE, disabled, onClick, children }: IButtonProps) => {
   return (
     <button
-      disabled={disabled ?? null}
+      disabled={disabled}
       className={`flex-container-h center middle text-bold action-button action-button-${appearance}`}
-      onClick={onClick ?? null}
+      onClick={onClick}
     >
       {iconName && (
         <div className="sp-margin-s-right flex-container-h center middle">

diff --git a/app/scripts/modules/core/src/managed/DeployingIntoManagedClusterWarning.tsx b/app/scripts/modules/core/src/managed/DeployingIntoManagedClusterWarning.tsx
@@ -17,6 +17,7 @@ export const DeployingIntoManagedClusterWarning = ({ app, formik }: IDeployingIn
   const command = formik.values;
   const pauseResource = React.useCallback(() => {
     const { resourceSummary, backingData } = formik.values;
+    if (!resourceSummary) return;
     toggleResourcePause(resourceSummary, app).then(
       () => {
         backingData.managedResources = app.getDataSource('managedResources')?.data?.resources;

diff --git a/app/scripts/modules/core/src/managed/Environments.tsx b/app/scripts/modules/core/src/managed/Environments.tsx
@@ -88,16 +88,16 @@ export const Environments: React.FC<IEnvironmentsProps> = ({ app }) => {
     [environments, resourcesById],
   );
 
-  const selectedVersion = useMemo<ISelectedArtifactVersion>(
-    () => (params.version ? pick(params, ['reference', 'version']) : null),
+  const selectedVersion = useMemo<ISelectedArtifactVersion | undefined>(
+    () => (params.version ? (pick(params, ['reference', 'version']) as ISelectedArtifactVersion) : undefined),
     [params.reference, params.version],
   );
   const selectedArtifactDetails = useMemo(
     () => selectedVersion && artifacts.find(({ reference }) => reference === selectedVersion.reference),
     [selectedVersion?.reference, artifacts],
   );
   const selectedVersionDetails = useMemo(
-    () => selectedArtifactDetails?.versions.find(({ version }) => version === selectedVersion.version),
+    () => selectedArtifactDetails?.versions.find(({ version }) => version === selectedVersion?.version),
     [selectedVersion, selectedArtifactDetails],
   );
 
@@ -181,7 +181,9 @@ export const Environments: React.FC<IEnvironmentsProps> = ({ app }) => {
         )}
         {detailPaneTransition.map(
           ({ item, key, props }) =>
-            item.selectedVersion && (
+            item.selectedVersion &&
+            item.selectedArtifactDetails &&
+            item.selectedVersionDetails && (
               <animated.div key={key} className="environments-pane flex-container-v" style={props}>
                 <ArtifactDetail
                   application={app}

diff --git a/app/scripts/modules/core/src/managed/EnvironmentsList.tsx b/app/scripts/modules/core/src/managed/EnvironmentsList.tsx
@@ -44,9 +44,9 @@ export function EnvironmentsList({
               .map((resource) => {
                 const artifactVersionsByState =
                   resource.artifact &&
-                  artifacts.find(({ reference }) => reference === resource.artifact.reference)?.versions;
+                  artifacts.find(({ reference }) => reference === resource.artifact?.reference)?.versions;
                 const artifactDetails =
-                  resource.artifact && allArtifacts.find(({ reference }) => reference === resource.artifact.reference);
+                  resource.artifact && allArtifacts.find(({ reference }) => reference === resource.artifact?.reference);
                 return (
                   <ManagedResourceObject
                     application={application}

diff --git a/app/scripts/modules/core/src/managed/ManagedMenuItem.tsx b/app/scripts/modules/core/src/managed/ManagedMenuItem.tsx
@@ -18,14 +18,15 @@ export const ManagedMenuItem = ({ resource, application, onClick, children }: IM
   if (!resource) {
     return null;
   }
-  const resourceIsPaused = resource.isManaged && resource.managedResourceSummary.isPaused;
+  const resourceIsPaused =
+    resource.isManaged && (!resource.managedResourceSummary || resource.managedResourceSummary.isPaused);
   const appIsPaused = application.isManagementPaused;
   const showInterstitial = resource.isManaged && !resourceIsPaused && !appIsPaused;
   const interstitial: () => PromiseLike<boolean> = () =>
     showInterstitial ? confirmNotManaged(resource, application) : $q.when(true);
   const handleClick: () => void = () =>
     interstitial().then((isNotManaged) => {
-      isNotManaged && onClick();
+      isNotManaged && onClick?.();
     });
 
   return <MenuItem onClick={handleClick}>{children}</MenuItem>;

diff --git a/app/scripts/modules/core/src/managed/ManagedReader.ts b/app/scripts/modules/core/src/managed/ManagedReader.ts
@@ -31,8 +31,9 @@ export const getResourceKindForLoadBalancerType = (type: string) => {
   }
 };
 
-const transformManagedResourceDiff = (diff: IManagedResourceEventHistoryResponse[0]['delta']): IManagedResourceDiff =>
-  Object.keys(diff).reduce((transformed, key) => {
+const transformManagedResourceDiff = (diff: IManagedResourceEventHistoryResponse[0]['delta']): IManagedResourceDiff => {
+  if (!diff) return {};
+  return Object.keys(diff).reduce((transformed, key) => {
     const diffNode = diff[key];
     const fieldKeys = flatMap<string, string>(key.split('/').filter(Boolean), (fieldKey) => {
       // Region keys currently come wrapped in {}, which is distracting and not useful. Let's trim those off.
@@ -66,6 +67,7 @@ const transformManagedResourceDiff = (diff: IManagedResourceEventHistoryResponse
     });
     return transformed;
   }, {} as IManagedResourceDiff);
+};
 
 export class ManagedReader {
   private static decorateResources(response: IManagedApplicationSummary) {

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx b/app/scripts/modules/core/src/managed/ManagedResourceDetailsIndicator.tsx
@@ -58,8 +58,9 @@ export const ManagedResourceDetailsIndicator = ({
   // events are getting trapped by React bootstrap menu
   const allowNavigation = (e: React.MouseEvent) => {
     const target = e.target as HTMLElement;
-    if (target && target.hasAttribute('href')) {
-      window.location.href = target.getAttribute('href');
+    const href = target?.getAttribute('href');
+    if (href) {
+      window.location.href = href;
     }
   };
 

diff --git a/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx b/app/scripts/modules/core/src/managed/ManagedResourceObject.tsx
@@ -79,39 +79,40 @@ export const ManagedResourceObject = memo(
 
     const linkProps = routeProps.href ? routeProps : displayLinkProps;
 
-    const current =
-      artifactVersionsByState?.current &&
-      artifactDetails?.versions.find(({ version }) => version === artifactVersionsByState?.current);
+    const current = artifactVersionsByState?.current
+      ? artifactDetails?.versions.find(({ version }) => version === artifactVersionsByState?.current)
+      : undefined;
     const deploying =
       artifactVersionsByState?.deploying &&
       artifactDetails?.versions.find(({ version }) => version === artifactVersionsByState?.deploying);
 
     const isCurrentVersionPinned = !!current?.environments.find(({ name }) => name === environment)?.pinned;
     const currentPill = current && (
       <Pill
-        text={`${getArtifactVersionDisplayName(current)}${showReferenceName ? ' ' + artifactDetails.reference : ''}`}
-        bgColor={isCurrentVersionPinned ? 'var(--color-status-warning)' : null}
-        textColor={isCurrentVersionPinned ? 'var(--color-icon-dark)' : null}
+        text={`${getArtifactVersionDisplayName(current)}${showReferenceName ? ' ' + artifactDetails?.reference : ''}`}
+        bgColor={isCurrentVersionPinned ? 'var(--color-status-warning)' : undefined}
+        textColor={isCurrentVersionPinned ? 'var(--color-icon-dark)' : undefined}
       />
     );
     const deployingPill = deploying && (
       <>
         <Icon appearance="neutral" name="caretRight" size="medium" />
         <AnimatingPill
           text={`${getArtifactVersionDisplayName(deploying)}${
-            showReferenceName ? ' ' + artifactDetails.reference : ''
+            showReferenceName ? ' ' + artifactDetails?.reference : ''
           }`}
           textColor="var(--color-icon-neutral)"
         />
       </>
     );
 
     const viewConfig = viewConfigurationByStatus[resource.status];
-    const resourceStatus = resource.status !== 'HAPPY' && viewConfig && (
-      <ManagedResourceStatusPopover application={application} placement="left" resourceSummary={resource}>
-        <StatusBubble appearance={viewConfig.appearance} iconName={viewConfig.iconName} size="small" />
-      </ManagedResourceStatusPopover>
-    );
+    const resourceStatus =
+      resource.status !== 'HAPPY' && viewConfig ? (
+        <ManagedResourceStatusPopover application={application} placement="left" resourceSummary={resource}>
+          <StatusBubble appearance={viewConfig.appearance} iconName={viewConfig.iconName} size="small" />
+        </ManagedResourceStatusPopover>
+      ) : undefined;
 
     return (
       <ObjectRow

diff --git a/app/scripts/modules/core/src/managed/RelativeTimestamp.tsx b/app/scripts/modules/core/src/managed/RelativeTimestamp.tsx
@@ -20,7 +20,7 @@ export const DurationRender: React.FC<{ startedAt: string; completedAt?: string
         setRefresh((state) => !state);
       }
     },
-    !completedAt ? 1000 : undefined,
+    !completedAt ? 1000 : 0,
   );
   const startAtDateTime = DateTime.fromISO(startedAt);
   const endTime = !completedAt ? DateTime.utc() : DateTime.fromISO(completedAt);
@@ -29,7 +29,11 @@ export const DurationRender: React.FC<{ startedAt: string; completedAt?: string
 
 const formatTimestamp = (timestamp: DateTime, distance: Duration) => {
   if (distance.years || distance.months) {
-    if (timestamp.year === DateTime.local().setZone(TIMEZONE).year) {
+    let currentTime = DateTime.local();
+    if (TIMEZONE) {
+      currentTime = currentTime.setZone(TIMEZONE);
+    }
+    if (timestamp.year === currentTime.year) {
       return timestamp.toFormat('MMM d');
     } else {
       return timestamp.toFormat('MMM d, y');
@@ -52,7 +56,7 @@ const getDistanceFromNow = (timestamp: DateTime) =>
 
 export const RelativeTimestamp = memo(
   ({ timestamp: timestampInOriginalZone, clickToCopy }: IRelativeTimestampProps) => {
-    const timestamp = timestampInOriginalZone.setZone(TIMEZONE);
+    const timestamp = TIMEZONE ? timestampInOriginalZone.setZone(TIMEZONE) : timestampInOriginalZone;
     const [formattedTimestamp, setFormattedTimestamp] = useState(
       formatTimestamp(timestamp, getDistanceFromNow(timestamp)),
     );

diff --git a/app/scripts/modules/core/src/managed/StatusCard.tsx b/app/scripts/modules/core/src/managed/StatusCard.tsx
@@ -30,9 +30,11 @@ export const StatusCard: React.FC<IStatusCardProps> = ({
   description,
   actions,
 }) => {
-  let timestampAsDateTime: DateTime;
+  let timestampAsDateTime: DateTime | undefined = undefined;
   try {
-    timestampAsDateTime = typeof timestamp === 'string' ? DateTime.fromISO(timestamp) : timestamp;
+    if (timestamp) {
+      timestampAsDateTime = typeof timestamp === 'string' ? DateTime.fromISO(timestamp) : timestamp;
+    }
   } catch (e) {
     console.error(`Failed to parse timestamp ${timestamp}`);
   }
@@ -50,7 +52,7 @@ export const StatusCard: React.FC<IStatusCardProps> = ({
           <StatusBubble iconName={iconName} appearance={appearance} size="small" />
         </div>
         <div className="sp-margin-m-right" style={{ minWidth: 33 }}>
-          {timestamp && <RelativeTimestamp timestamp={timestampAsDateTime} clickToCopy={true} />}
+          {timestampAsDateTime && <RelativeTimestamp timestamp={timestampAsDateTime} clickToCopy={true} />}
         </div>
         <div className="flex-container-v sp-margin-xs-yaxis">
           <div className="text-bold">{title}</div>

diff --git a/app/scripts/modules/core/src/managed/ToggleManagedResourceForApplication.tsx b/app/scripts/modules/core/src/managed/ToggleManagedResourceForApplication.tsx
@@ -95,7 +95,7 @@ export const ToggleManagedResourceForApplicationModal = memo(
       call
         .then(() => dataSource.refresh(true).catch(() => null))
         .then(() => {
-          closeModal();
+          closeModal?.();
         })
         .catch((error: Error) => {
           setActionError(error.data);

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetail.tsx b/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetail.tsx
@@ -82,10 +82,16 @@ export const ArtifactDetail = ({
     ?.filter(({ scope, type }) => scope === 'PRE_DEPLOYMENT' && SUPPORTED_PRE_DEPLOYMENT_TYPES.includes(type))
     .reverse();
 
+  const getPinnedVersion = (environmentName: string) => {
+    const envData = allEnvironments.find(({ name }) => name === environmentName);
+    const artifactData = envData?.artifacts.find(({ reference: referenceToMatch }) => referenceToMatch === reference);
+    return artifactData?.pinnedVersion;
+  };
+
   return (
     <>
       <ArtifactDetailHeader
-        reference={showReferenceNames ? reference : null}
+        reference={showReferenceNames ? reference : undefined}
         version={versionDetails}
         onRequestClose={onRequestClose}
       />
@@ -176,10 +182,6 @@ export const ArtifactDetail = ({
         {environments.map((environment) => {
           const { name: environmentName, state } = environment;
 
-          const { pinnedVersion } = allEnvironments
-            .find(({ name }) => name === environmentName)
-            .artifacts.find(({ reference: referenceToMatch }) => referenceToMatch === reference);
-
           return (
             <EnvironmentRow
               key={environmentName}
@@ -192,7 +194,7 @@ export const ArtifactDetail = ({
                 reference={reference}
                 version={versionDetails}
                 allVersions={allVersions}
-                pinnedVersion={pinnedVersion}
+                pinnedVersion={getPinnedVersion(environmentName)}
                 resourcesByEnvironment={resourcesByEnvironment}
               />
               <div className="resources-section">

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetailHeader.tsx b/app/scripts/modules/core/src/managed/artifactDetail/ArtifactDetailHeader.tsx
@@ -8,7 +8,7 @@ import { IManagedArtifactVersion } from '../../domain';
 import './ArtifactDetailHeader.less';
 
 export interface IArtifactDetailHeaderProps {
-  reference: string;
+  reference?: string;
   version: IManagedArtifactVersion;
   onRequestClose: () => any;
 }

diff --git a/app/scripts/modules/core/src/managed/artifactDetail/EnvironmentCards.tsx b/app/scripts/modules/core/src/managed/artifactDetail/EnvironmentCards.tsx
@@ -19,7 +19,7 @@ interface IEnvironmentCardsProps
     'application' | 'reference' | 'version' | 'allVersions' | 'resourcesByEnvironment'
   > {
   environment: IManagedArtifactVersionEnvironment;
-  pinnedVersion: string;
+  pinnedVersion?: string;
 }
 
 export const EnvironmentCards: React.FC<IEnvironmentCardsProps> = ({
@@ -65,7 +65,7 @@ export const EnvironmentCards: React.FC<IEnvironmentCardsProps> = ({
     <PinnedCard
       resourcesByEnvironment={resourcesByEnvironment}
       environmentName={environmentName}
-      pinned={environment.pinned}
+      pinned={pinned}
       reference={reference}
       version={versionDetails}
     />