fix type and linting errors

frontend/src/concepts/pipelines/content/utils.tsx

@@ -21,7 +21,7 @@ import { relativeTime } from '~/utilities/time';
 
 export type RunStatusDetails = {
   icon: React.ReactNode;
-  label: PipelineRunKFv2['state'] | string;
+  label?: PipelineRunKFv2['state'] | string;
   status?: React.ComponentProps<typeof Icon>['status'];
   details?: string;
   createdAt?: string;

frontend/src/concepts/pipelines/topology/usePipelineTaskTopology.ts

@@ -159,7 +159,6 @@ export const usePipelineTaskTopology = (
       );
     }
 
-
     // This task's rendering information
     if (isGroupNode && groupTasks) {
       const [nestedNodes, children] = getNestedNodes(groupTasks, components, runDetails);
@@ -181,8 +180,8 @@ export const usePipelineTaskTopology = (
           type: 'groupTask',
           name: id,
           steps: executor ? [executor.container] : undefined,
-          inputs: parseInputOutput(component?.inputDefinitions),
-          outputs: parseInputOutput(component?.outputDefinitions),
+          inputs: parseInputOutput(component.inputDefinitions),
+          outputs: parseInputOutput(component.outputDefinitions),
           status,
           volumeMounts: parseVolumeMounts(spec.platform_spec, executorLabel),
         };

frontend/src/concepts/topology/PipelineDefaultTaskGroup.tsx

@@ -50,16 +50,7 @@ type PipelinesDefaultGroupInnerProps = Omit<PipelinesDefaultGroupProps, 'element
 } & WithSelectionProps;
 
 const DefaultTaskGroupInner: React.FunctionComponent<PipelinesDefaultGroupInnerProps> = observer(
-  ({
-    className,
-    element,
-    onCollapseChange,
-    recreateLayoutOnCollapseChange,
-    getEdgeCreationTypes,
-    selected,
-    onSelect,
-    ...rest
-  }) => {
+  ({ className, element, onCollapseChange, getEdgeCreationTypes, selected, onSelect, ...rest }) => {
     const childCount = element.getAllNodeChildren().length;
     const data = element.getData();
 

frontend/src/concepts/topology/PipelineTaskGroupCollapsed.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { observer } from 'mobx-react';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-alt-icon';
 import {
   RunStatus,
@@ -14,6 +13,7 @@ import {
   DEFAULT_LAYER,
   TOP_LAYER,
   NodeModel,
+  observer,
 } from '@patternfly/react-topology';
 import { Icon, Popover } from '@patternfly/react-core';
 import { getNodeStatusIcon } from './utils';
@@ -44,16 +44,15 @@ const PipelineTaskGroupCollapsed: React.FunctionComponent<PipelineTaskGroupColla
   const myRef = React.useRef();
   const detailsLevel = element.getGraph().getDetailsLevel();
 
-  const getPopoverTasksList = (items: Node<NodeModel, any>[]) => {
-    return items.map((item: Node) => (
+  const getPopoverTasksList = (items: Node<NodeModel>[]) =>
+    items.map((item: Node) => (
       <div key={item.getId()}>
         <Icon status={getNodeStatusIcon(item.getData()?.status).status} isInline>
           {getNodeStatusIcon(item.getData()?.status).icon}
         </Icon>
         {item.getId()}
       </div>
     ));
-  };
 
   return (
     <Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : DEFAULT_LAYER}>

frontend/src/concepts/topology/customNodes/ArtifactTaskNode.tsx

@@ -15,7 +15,6 @@ import {
   TaskNodeSourceAnchor,
   TaskNodeTargetAnchor,
   GraphElement,
-  RunStatus,
 } from '@patternfly/react-topology';
 import { ListIcon, MonitoringIcon } from '@patternfly/react-icons';
 import { TaskNodeProps } from '@patternfly/react-topology/dist/esm/pipelines/components/nodes/TaskNode';

frontend/src/concepts/topology/factories.ts

@@ -8,13 +8,12 @@ import {
   SpacerNode,
   withPanZoom,
   withSelection,
-  TaskEdge as PFTaskEdge,
 } from '@patternfly/react-topology';
 import StandardTaskNode from '~/concepts/topology/customNodes/StandardTaskNode';
 import { ICON_TASK_NODE_TYPE } from './utils';
 import ArtifactTaskNode from './customNodes/ArtifactTaskNode';
 import PipelineTaskEdge from './PipelineTaskEdge';
-import PipelineDefaultTaskGroup from "./PipelineDefaultTaskGroup";
+import PipelineDefaultTaskGroup from './PipelineDefaultTaskGroup';
 
 export const pipelineComponentFactory: ComponentFactory = (kind, type) => {
   if (kind === ModelKind.graph) {
@@ -34,7 +33,7 @@ export const pipelineComponentFactory: ComponentFactory = (kind, type) => {
   }
 };
 
-export const pipelineGroupsComponentFactory = (kind: ModelKind, type: string) => {
+export const pipelineGroupsComponentFactory: ComponentFactory = (kind, type) => {
   if (kind === ModelKind.graph) {
     return withPanZoom()(GraphComponent);
   }

frontend/src/concepts/topology/types.ts

@@ -1,5 +1,4 @@
 import { PipelineNodeModel, RunStatus, WhenStatus } from '@patternfly/react-topology';
-import React from 'react';
 
 export type NodeConstructDetails = {
   id: string;

frontend/src/concepts/topology/useTopologyController.ts

@@ -7,8 +7,8 @@ import {
   PipelineDagreGroupsLayout,
   Visualization,
 } from '@patternfly/react-topology';
+import pipelineElementFactory from '@patternfly/react-topology/dist/esm/pipelines/elements/pipelineElementFactory';
 import { pipelineComponentFactory, pipelineGroupsComponentFactory } from './factories';
-import pipelineElementFactory from './pipelineElementFactory';
 import { PIPELINE_LAYOUT, PIPELINE_NODE_SEPARATION_VERTICAL } from './const';
 
 const useTopologyController = (graphId: string): Visualization | null => {

frontend/src/concepts/topology/utils.tsx

@@ -1,16 +1,18 @@
 import { DEFAULT_TASK_NODE_TYPE } from '@patternfly/react-topology';
-import { genRandomChars } from '~/utilities/string';
-import { NODE_HEIGHT, NODE_WIDTH } from './const';
-import { NodeConstructDetails, PipelineNodeModelExpanded } from './types';
 import {
   NotStartedIcon,
   SyncAltIcon,
   CheckCircleIcon,
   ExclamationCircleIcon,
   BanIcon,
 } from '@patternfly/react-icons';
-import { RuntimeStateKF } from '../pipelines/kfTypes';
 import React from 'react';
+import { Icon } from '@patternfly/react-core';
+import { genRandomChars } from '~/utilities/string';
+import { RuntimeStateKF } from '~/concepts/pipelines/kfTypes';
+import { RunStatusDetails } from '~/concepts/pipelines/content/utils';
+import { NODE_HEIGHT, NODE_WIDTH } from './const';
+import { NodeConstructDetails, PipelineNodeModelExpanded } from './types';
 
 export const createNodeId = (prefix = 'node'): string => `${prefix}-${genRandomChars()}`;
 
@@ -70,10 +72,11 @@ export const createGroupNode = (
     : undefined,
 });
 
-export const getNodeStatusIcon = (status: RuntimeStateKF | string): any => {
+export const getNodeStatusIcon = (runStatus: RuntimeStateKF | string): RunStatusDetails => {
   let icon: React.ReactNode;
+  let status: React.ComponentProps<typeof Icon>['status'];
 
-  switch (status) {
+  switch (runStatus) {
     case RuntimeStateKF.PENDING:
     case RuntimeStateKF.RUNTIME_STATE_UNSPECIFIED:
     case undefined:
@@ -101,6 +104,7 @@ export const getNodeStatusIcon = (status: RuntimeStateKF | string): any => {
       break;
     case RuntimeStateKF.PAUSED:
       icon = <BanIcon />;
+      break;
     default:
       icon = null;
   }