fix status badges types

equinor · Nov 25, 2024 · 838f2f4 · 838f2f4
1 parent 853c438
commit 838f2f4
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 120 deletions.
diff --git a/src/components/page-scheduled-job/dev.tsx b/src/components/page-scheduled-job/dev.tsx
@@ -22,6 +22,7 @@ const testData: Array<
       batchName: 'batchName',
       backoffLimit: 0,
       failedCount: 0,
+      deploymentName: 'unknown-deployment',
     },
   },
   {
@@ -38,6 +39,7 @@ const testData: Array<
       batchName: 'batchName',
       backoffLimit: 10,
       failedCount: 0,
+      deploymentName: 'unknown-deployment',
     },
   },
   {
@@ -56,6 +58,7 @@ const testData: Array<
       message: 'some optional failure message',
       backoffLimit: 0,
       failedCount: 0,
+      deploymentName: 'unknown-deployment',
     },
   },
   {
@@ -73,6 +76,7 @@ new Server({
     testData.forEach(({ scheduledJobName, jobData }) => {
       this.get(
         `/api/v1/applications/:appName/environments/:envName/jobcomponents/:jobComponentName/jobs/${scheduledJobName}`,
+        // @ts-expect-error no need to fix the type here?
         () => jobData
       );
     });

diff --git a/src/components/secret-status/index.tsx b/src/components/secret-status/index.tsx
@@ -1,12 +1,8 @@
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
-
 import type { Secret } from '../../store/radix-api';
-import { StatusBadge } from '../status-badges';
+import { GenericStatusBadge as StatusBadge } from '../status-badges';
 
-export const SecretStatus: FunctionComponent<{ status?: Secret['status'] }> = ({
-  status,
-}) => {
+type Props = { status?: Secret['status'] };
+export const SecretStatus = ({ status }: Props) => {
   if (!status) {
     console.warn('Secret for component is not being reported by environment');
     return <StatusBadge type="danger">Status not reported</StatusBadge>;
@@ -23,7 +19,3 @@ export const SecretStatus: FunctionComponent<{ status?: Secret['status'] }> = ({
       return <StatusBadge type="danger">{status}</StatusBadge>;
   }
 };
-
-SecretStatus.propTypes = {
-  status: PropTypes.string as PropTypes.Validator<Secret['status']>,
-};
diff --git a/src/components/status-badges/component-secret-status-badge.tsx b/src/components/status-badges/component-secret-status-badge.tsx
@@ -1,7 +1,5 @@
 import { Icon } from '@equinor/eds-core-react';
 import { check, error_outlined, stop, time } from '@equinor/eds-icons';
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
 
 import {
   StatusBadgeTemplate,
@@ -10,7 +8,7 @@ import {
 
 import type { Secret } from '../../store/radix-api';
 
-type SecretStatus = Secret['status'];
+type SecretStatus = Required<Secret>['status'];
 
 const Unsupported = {
   type: 'warning',
@@ -26,13 +24,10 @@ const BadgeTemplates = {
   },
 } satisfies Record<SecretStatus, StatusBadgeTemplateProps>;
 
-export const ComponentSecretStatusBadge: FunctionComponent<{
-  status: SecretStatus;
-}> = ({ status }) => {
-  const props = BadgeTemplates[status] ?? Unsupported;
-  return <StatusBadgeTemplate {...props}>{status}</StatusBadgeTemplate>;
+type Props = {
+  status?: SecretStatus;
 };
-
-ComponentSecretStatusBadge.propTypes = {
-  status: PropTypes.string.isRequired as PropTypes.Validator<SecretStatus>,
+export const ComponentSecretStatusBadge = ({ status }: Props) => {
+  const props = status ? BadgeTemplates[status] : Unsupported;
+  return <StatusBadgeTemplate {...props}>{status}</StatusBadgeTemplate>;
 };
diff --git a/src/components/status-badges/component-status-badge.tsx b/src/components/status-badges/component-status-badge.tsx
@@ -1,6 +1,5 @@
 import { CircularProgress, Icon } from '@equinor/eds-core-react';
 import { check_circle_outlined, info_circle, stop } from '@equinor/eds-icons';
-import * as PropTypes from 'prop-types';
 import type { FunctionComponent } from 'react';
 
 import {
@@ -13,7 +12,9 @@ import type {
   Component,
 } from '../../store/radix-api';
 
-type ComponentStatus = (AuxiliaryResourceDeployment | Component)['status'];
+type ComponentStatus = Required<
+  AuxiliaryResourceDeployment | Component
+>['status'];
 
 const BadgeTemplates = {
   Reconciling: { icon: <CircularProgress /> },
@@ -30,7 +31,3 @@ export const ComponentStatusBadge: FunctionComponent<{
     {status}
   </StatusBadgeTemplate>
 );
-
-ComponentStatusBadge.propTypes = {
-  status: PropTypes.string.isRequired as PropTypes.Validator<ComponentStatus>,
-};
diff --git a/src/components/status-badges/dev.tsx b/src/components/status-badges/dev.tsx
@@ -47,12 +47,9 @@ const templateTestData: Array<
   { description: 'type Default', text: 'Default', type: 'default' },
 ];
 
-const genericTestData: Array<
-  TestDataTemplate &
-    Pick<GenericStatusBadgeProps, 'className' | 'customIconData' | 'type'>
-> = [
-  { description: 'no Type, no Text' },
-  { description: 'no Type, Text', text: 'TestLabel' },
+const genericTestData = [
+  { description: 'no Type, no Text', type: 'unknown' },
+  { description: 'no Type, Text', text: 'TestLabel', type: 'unknown' },
   { description: 'Type, no Text', type: 'warning' },
   { description: 'Success', text: 'Success', type: 'success' },
   { description: 'Warning', text: 'Warning', type: 'warning' },
@@ -62,6 +59,7 @@ const genericTestData: Array<
     description: 'no Type, Custom Class',
     text: 'TestLabel',
     className: 'TestClass',
+    type: 'unknown',
   },
   {
     description: 'Custom Icon, Type',
@@ -73,8 +71,9 @@ const genericTestData: Array<
     description: 'Custom Icon, no Type',
     text: 'TestLabel',
     customIconData: coffee,
+    type: 'unknown',
   },
-];
+] satisfies Array<TestDataTemplate & GenericStatusBadgeProps>;
 
 const GenericBadge: <P, S extends TestDataTemplate>(
   title: string,
@@ -132,19 +131,16 @@ const testData = [
       'ComponentOutdated',
       'Unsupported',
     ],
-    // @ts-expect-error No idea how to fix this one
     ComponentStatusBadge
   ),
   EnumBadge(
     'ImageHubSecretStatusBadge',
     ['Consistent', 'Pending'],
-    // @ts-expect-error No idea how to fix this one
     ImageHubSecretStatusBadge
   ),
   EnumBadge(
     'PipelineRunBadges',
     Object.keys(BadgeTemplates),
-    // @ts-expect-error No idea how to fix this one
     PipelineRunStatusBadge
   ),
   EnumBadge(
@@ -155,7 +151,6 @@ const testData = [
   EnumBadge(
     'RadixJobConditionBadges',
     Object.keys(JobConditionBadgeTemplates),
-    // @ts-expect-error No idea how to fix this one
     RadixJobConditionBadge
   ),
   EnumBadge(

diff --git a/src/components/status-badges/generic-status-badge.tsx b/src/components/status-badges/generic-status-badge.tsx
@@ -9,80 +9,40 @@ import {
   traffic_light,
   warning_outlined,
 } from '@equinor/eds-icons';
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
 
 import {
   StatusBadgeTemplate,
   type StatusBadgeTemplateProps,
 } from './status-badge-template';
 
+const BadgeTemplates = {
+  running: { icon: <Icon data={run} /> },
+  danger: { icon: <Icon data={error_outlined} />, type: 'danger' },
+  failed: { icon: <Icon data={error_outlined} />, type: 'danger' },
+  queued: { icon: <Icon data={timer} /> },
+  waiting: { icon: <Icon data={traffic_light} /> },
+  stopped: { icon: <Icon data={blocked} /> },
+  stoppednochanges: { icon: <Icon data={blocked} /> },
+  success: { icon: <Icon data={check} /> },
+  succeeded: { icon: <Icon data={check} /> },
+  unknown: { icon: <Icon data={warning_outlined} />, type: 'warning' },
+  warning: { icon: <Icon data={warning_outlined} />, type: 'warning' },
+} satisfies Record<string, StatusBadgeTemplateProps>;
+
 export type GenericStatusBadgeProps = {
   customIconData?: IconData;
-  type?: string;
+  type: keyof typeof BadgeTemplates;
 } & ChipProps;
-
-function getGenericStatus(
-  status: string
-): Pick<StatusBadgeTemplateProps, 'icon' | 'type'> {
-  const data: Pick<StatusBadgeTemplateProps, 'icon' | 'type'> = {};
-
-  switch (status) {
-    case 'running':
-      data.icon = <Icon data={run} />;
-      break;
-    case 'danger':
-    case 'failed':
-      data.icon = <Icon data={error_outlined} />;
-      data.type = 'danger';
-      break;
-    case 'queued':
-      data.icon = <Icon data={timer} />;
-      break;
-    case 'waiting':
-      data.icon = <Icon data={traffic_light} />;
-      break;
-    case 'stopped':
-    case 'stoppednochanges':
-      data.icon = <Icon data={blocked} />;
-      break;
-    case 'success':
-    case 'succeeded':
-      data.icon = <Icon data={check} />;
-      break;
-    case 'unknown':
-    case 'warning':
-      data.icon = <Icon data={warning_outlined} />;
-      data.type = 'warning';
-      break;
-    default:
-      break;
-  }
-
-  return data;
-}
-
-/** GenericStatusBadge */
-export const GenericStatusBadge: FunctionComponent<GenericStatusBadgeProps> = ({
+export const GenericStatusBadge = ({
   customIconData,
   type,
   ...rest
-}) => (
+}: GenericStatusBadgeProps) => (
   <StatusBadgeTemplate
     {...{
       ...rest,
-      ...getGenericStatus(type?.toLowerCase()),
+      ...BadgeTemplates[type.toLowerCase()],
       ...(!!customIconData && { icon: <Icon data={customIconData} /> }),
     }}
   />
 );
-
-GenericStatusBadge.propTypes = {
-  customIconData: PropTypes.object as PropTypes.Validator<IconData>,
-  type: PropTypes.string,
-};
-
-/** GenericStatusBadgeProps alias */
-export type StatusBadgeProps = GenericStatusBadgeProps;
-/** GenericStatusBadge alias */
-export const StatusBadge = GenericStatusBadge;
diff --git a/src/components/status-badges/image-hub-secret-status-badge.tsx b/src/components/status-badges/image-hub-secret-status-badge.tsx
@@ -1,7 +1,5 @@
 import { Icon } from '@equinor/eds-core-react';
 import { check, time } from '@equinor/eds-icons';
-import * as PropTypes from 'prop-types';
-import type { FunctionComponent } from 'react';
 
 import {
   StatusBadgeTemplate,
@@ -10,24 +8,15 @@ import {
 
 import type { ImageHubSecret } from '../../store/radix-api';
 
-const BadgeTemplates: Record<
-  ImageHubSecret['status'],
-  Pick<StatusBadgeTemplateProps, 'icon' | 'type'>
-> = {
+type StatusType = Required<ImageHubSecret>['status'];
+const BadgeTemplates = {
   Pending: { icon: <Icon data={time} /> },
   Consistent: { icon: <Icon data={check} /> },
-};
+} satisfies Record<StatusType, StatusBadgeTemplateProps>;
 
-export const ImageHubSecretStatusBadge: FunctionComponent<{
-  status: ImageHubSecret['status'];
-}> = ({ status }) => (
+type Props = { status: StatusType };
+export const ImageHubSecretStatusBadge = ({ status }: Props) => (
   <StatusBadgeTemplate {...BadgeTemplates[status]}>
     {status}
   </StatusBadgeTemplate>
 );
-
-ImageHubSecretStatusBadge.propTypes = {
-  status: PropTypes.string.isRequired as PropTypes.Validator<
-    ImageHubSecret['status']
-  >,
-};
diff --git a/src/components/status-badges/pipeline-run-status-badge.tsx b/src/components/status-badges/pipeline-run-status-badge.tsx
@@ -11,8 +11,8 @@ import { StatusBadgeTemplate } from './status-badge-template';
 
 type BadgeProps = ComponentProps<typeof StatusBadgeTemplate>;
 
-type TaskRunReason = PipelineRunTaskStep['status'];
-type PipelineRunReason = PipelineRunTask['status'];
+type TaskRunReason = Required<PipelineRunTaskStep>['status'];
+type PipelineRunReason = Required<PipelineRunTask>['status'];
 type Status = TaskRunReason | PipelineRunReason;
 
 const FailedIcon = {

diff --git a/src/components/status-badges/replica-status-badge.tsx b/src/components/status-badges/replica-status-badge.tsx
@@ -16,10 +16,7 @@ import type { ReplicaSummary } from '../../store/radix-api';
 
 type Status = Required<ReplicaSummary>['replicaStatus']['status'];
 
-const BadgeTemplates: Record<
-  Status,
-  Pick<StatusBadgeTemplateProps, 'icon' | 'type'>
-> = {
+const BadgeTemplates = {
   Pending: { icon: <Icon data={time} /> },
   Failed: { type: 'danger', icon: <Icon data={error_outlined} /> },
   Failing: { type: 'danger', icon: <Icon data={error_outlined} /> },
@@ -28,7 +25,7 @@ const BadgeTemplates: Record<
   Starting: { icon: <CircularProgress /> },
   Stopped: { icon: <Icon data={stop} /> },
   Terminated: { icon: <Icon data={stop} /> },
-};
+} satisfies Record<Status, StatusBadgeTemplateProps>;
 
 type Props = {
   status: Status;