Fixed SNC errors in helm and insights plugin

Author: krishagarwal278

frontend/packages/helm-plugin/src/actions/creators.ts

@@ -25,8 +25,8 @@ export const getHelmDeleteAction = (
       onSubmit: () => {
         return coFetchJSON.delete(
           `/api/helm/release/async?name=${releaseName}&ns=${namespace}&version=${releaseVersion}`,
-          null,
-          null,
+          undefined,
+          undefined,
           -1,
         );
       },
@@ -66,16 +66,16 @@ export const editChartRepository = (
   cta: {
     href:
       hcr.kind === ProjectHelmChartRepositoryModel.kind
-        ? `/helm-repositories/ns/${hcr.metadata.namespace}/${
-            hcr.metadata.name
+        ? `/helm-repositories/ns/${hcr.metadata?.namespace}/${
+            hcr.metadata?.name
           }/form?kind=${referenceFor(hcr)}`
-        : `/k8s/cluster/helmchartrepositories/${hcr.metadata.name}/form?kind=${referenceFor(hcr)}`,
+        : `/k8s/cluster/helmchartrepositories/${hcr.metadata?.name}/form?kind=${referenceFor(hcr)}`,
   },
   accessReview: {
     group: model.apiGroup,
     resource: model.plural,
-    name: hcr.metadata.name,
-    namespace: hcr.metadata.namespace,
+    name: hcr.metadata?.name,
+    namespace: hcr.metadata?.namespace,
     verb: 'update',
   },
 });

frontend/packages/helm-plugin/src/actions/providers.ts

@@ -56,10 +56,7 @@ export const useHelmActionProviderForTopology = (element: GraphElement) => {
     if (nodeType !== TYPE_HELM_RELEASE) return undefined;
     const releaseName = element.getLabel();
     if (!resource?.metadata) return null;
-    const {
-      namespace,
-      labels: { version },
-    } = resource.metadata;
+    const { namespace, labels: { version } = {} } = resource.metadata;
     return {
       release: {
         name: releaseName,
@@ -72,7 +69,7 @@ export const useHelmActionProviderForTopology = (element: GraphElement) => {
       actionOrigin: 'topology',
     };
   }, [data, element, resource]);
-  const result = useHelmActionProvider(scope);
+  const result = useHelmActionProvider(scope as HelmActionsScope);
   return result;
 };
 

frontend/packages/helm-plugin/src/catalog/providers/useHelmCharts.tsx

@@ -69,7 +69,7 @@ const useHelmCharts: ExtensionHook<CatalogItem[]> = ({
   const normalizedHelmCharts: CatalogItem[] = React.useMemo(
     () =>
       normalizeHelmCharts(
-        helmCharts,
+        helmCharts || {},
         [...chartRepositories?.hcrs?.data, ...chartRepositories?.phcrs?.data],
         namespace,
         t,

frontend/packages/helm-plugin/src/catalog/utils/catalog-utils.tsx

@@ -34,7 +34,7 @@ export const normalizeHelmCharts = (
     chartEntries,
     (normalizedCharts, charts, key) => {
       const chartRepoName = key.split('--').pop();
-      const chartRepositoryTitle = getChartRepositoryTitle(chartRepositories, chartRepoName);
+      const chartRepositoryTitle = getChartRepositoryTitle(chartRepositories, chartRepoName || '');
 
       charts.forEach((chart: HelmChartMetaData) => {
         const { name, created, version, appVersion, description, keywords, annotations } = chart;
@@ -47,7 +47,7 @@ export const normalizeHelmCharts = (
         const imgUrl = chart.icon || getImageForIconClass('icon-helm');
         const chartURL = chart.urls[0];
         const encodedChartURL = encodeURIComponent(chartURL);
-        const encodedChartRepoName = encodeURIComponent(chartRepoName);
+        const encodedChartRepoName = encodeURIComponent(chartRepoName || '');
         const encodedChartName = encodeURIComponent(name);
         const encodedChartIndexKey = encodeURIComponent(key);
         const href = `/catalog/helm-install?chartName=${encodedChartName}&chartRepoName=${encodedChartRepoName}&chartURL=${encodedChartURL}&preselected-ns=${activeNamespace}&indexEntry=${encodedChartIndexKey}`;
@@ -70,7 +70,7 @@ export const normalizeHelmCharts = (
             </>
           ) : null;
 
-        const maintainers = chart.maintainers?.length > 0 && (
+        const maintainers = chart.maintainers?.length && chart.maintainers?.length > 0 && (
           <>
             {chart.maintainers?.map((maintainer, index) => (
               // eslint-disable-next-line react/no-array-index-key
@@ -156,7 +156,7 @@ export const normalizeHelmCharts = (
             providerType: translatedProviderType,
           },
           icon: {
-            class: null,
+            class: undefined,
             url: imgUrl,
           },
           cta: {

frontend/packages/helm-plugin/src/components/details-page/HelmReleaseDetails.tsx

@@ -49,21 +49,25 @@ export const LoadedHelmReleaseDetails: React.FC<LoadedHelmReleaseDetailsProps> =
   if (helmRelease.loadError) {
     return <StatusBox loadError={helmRelease.loadError} />;
   }
-  if (helmRelease.loaded && secrets.loadError) {
+  if (helmRelease.loaded && secrets?.loadError) {
     return <StatusBox loadError={secrets.loadError} />;
   }
-  if (!helmRelease.loaded || !secrets.loaded) {
+  if (!helmRelease.loaded || !secrets?.loaded) {
     return <LoadingBox />;
   }
-  if (!helmRelease.data || _.isEmpty(secrets.data)) {
+  if (!helmRelease.data || _.isEmpty(secrets?.data)) {
     return <ErrorPage404 />;
   }
 
-  const sortedSecrets = _.orderBy(secrets.data, (o) => Number(o.metadata.labels.version), 'desc');
+  const sortedSecrets = _.orderBy(
+    secrets?.data,
+    (o) => Number(o.metadata?.labels?.version),
+    'desc',
+  );
 
   const releaseName = helmRelease.data?.name;
   const latestReleaseSecret = sortedSecrets[0];
-  const latestSecretName = latestReleaseSecret?.metadata.name;
+  const latestSecretName = latestReleaseSecret?.metadata?.name;
   const latestSecretStatus = latestReleaseSecret?.metadata?.labels?.status;
 
   const title = (
@@ -74,8 +78,8 @@ export const LoadedHelmReleaseDetails: React.FC<LoadedHelmReleaseDetailsProps> =
         style={{ verticalAlign: 'middle', marginLeft: 'var(--pf-t--global--spacer--md)' }}
       >
         <Status
-          status={releaseStatus(latestSecretStatus)}
-          title={HelmReleaseStatusLabels[latestSecretStatus]}
+          status={releaseStatus(latestSecretStatus || '')}
+          title={HelmReleaseStatusLabels[latestSecretStatus || '']}
         />
       </Badge>
     </>
@@ -173,7 +177,7 @@ const HelmReleaseDetails: React.FC<HelmReleaseDetailsProps> = () => {
 
     const getHelmRelease = async () => {
       try {
-        const helmRelease = await fetchHelmRelease(namespace, helmReleaseName);
+        const helmRelease = await fetchHelmRelease(namespace || '', helmReleaseName || '');
         if (mounted) {
           setHelmReleaseData(helmRelease);
         }
@@ -213,7 +217,12 @@ const HelmReleaseDetails: React.FC<HelmReleaseDetailsProps> = () => {
     data: secrets,
   };
 
-  return <LoadedHelmReleaseDetails helmRelease={helmRelease} secrets={secretsFirehoseResult} />;
+  return (
+    <LoadedHelmReleaseDetails
+      helmRelease={helmRelease as LoadedHelmReleaseDetailsProps['helmRelease']}
+      secrets={secretsFirehoseResult}
+    />
+  );
 };
 
 export default HelmReleaseDetails;

frontend/packages/helm-plugin/src/components/details-page/history/HelmReleaseHistory.tsx

@@ -28,18 +28,18 @@ const HelmReleaseHistory: React.FC<HelmReleaseHistoryProps> = ({
   const helmReleaseName = params.name;
   const [revisionsLoaded, setRevisionsLoaded] = React.useState<boolean>(false);
   const [loadError, setLoadError] = React.useState<string>();
-  const [revisions, setRevisions] = React.useState([]);
+  const [revisions, setRevisions] = React.useState<HelmRelease[]>([]);
   const memoizedObj = useDeepCompareMemoize(obj);
   const { t } = useTranslation();
 
   React.useEffect(() => {
     let destroyed = false;
-    fetchHelmReleaseHistory(helmReleaseName, namespace)
+    fetchHelmReleaseHistory(helmReleaseName || '', namespace || '')
       .then((items) => {
         if (!destroyed) {
-          setLoadError(null);
+          setLoadError(undefined);
           setRevisionsLoaded(true);
-          setRevisions(items);
+          setRevisions(items as HelmRelease[]);
         }
       })
       .catch((err) => {

frontend/packages/helm-plugin/src/components/details-page/overview/HelmChartSummary.tsx

@@ -28,11 +28,7 @@ const HelmChartSummary: React.FC<HelmChartSummaryProps> = ({ obj, helmRelease })
     info: { last_deployed: updated },
   } = helmRelease;
 
-  const {
-    metadata: {
-      labels: { version: revision },
-    },
-  } = obj;
+  const revision = obj?.metadata?.labels?.version;
 
   return (
     <DescriptionList>

frontend/packages/helm-plugin/src/components/details-page/overview/HelmReleaseOverview.tsx

@@ -20,7 +20,10 @@ const HelmReleaseOverview: React.FC<HelmReleaseOverviewProps> = ({ obj, customDa
       <SectionHeading text={t('helm-plugin~Helm Release details')} />
       <Grid hasGutter>
         <GridItem sm={6}>
-          <ResourceSummary resource={obj} customPathName={'metadata.labels.name'} />
+          <ResourceSummary
+            resource={obj as K8sResourceKind}
+            customPathName={'metadata.labels.name'}
+          />
         </GridItem>
         <GridItem sm={6}>
           <HelmChartSummary helmRelease={customData} obj={obj} />

frontend/packages/helm-plugin/src/components/details-page/resources/HelmReleaseResources.tsx

@@ -29,8 +29,8 @@ const HelmReleaseResources: React.FC<HelmReleaseResourcesProps> = ({ customData
       return {
         ...(model.namespaced ? { namespace } : {}),
         kind: model.crd ? referenceForModel(model) : model.kind,
-        name: resource.metadata.name,
-        prop: `${resource.metadata.name}-${resource.kind.toLowerCase()}`,
+        name: resource.metadata?.name,
+        prop: `${resource.metadata?.name}-${resource.kind?.toLowerCase()}`,
         isList: false,
         optional: true,
       };

frontend/packages/helm-plugin/src/components/details-page/resources/HelmReleaseResourcesRow.tsx

@@ -20,10 +20,10 @@ export const HelmReleaseResourceStatus: React.FC<HelmReleaseResourceStatusProps>
   const kind = referenceFor(resource);
   return resource.status?.replicas ? (
     <Link
-      to={`${resourcePath(kind, resource.metadata.name, resource.metadata.namespace)}/pods`}
+      to={`${resourcePath(kind, resource.metadata?.name, resource.metadata?.namespace)}/pods`}
       title={t('helm-plugin~Pods')}
     >
-      {resource.status.replicas || 0} of {resource.spec.replicas} pods
+      {resource.status?.replicas || 0} of {resource.spec?.replicas} pods
     </Link>
   ) : (
     <Status status={_.get(resource.status, 'phase', 'Created')} />
@@ -37,16 +37,16 @@ const HelmReleaseResourcesRow: React.FC<RowFunctionArgs<K8sResourceKind>> = ({ o
       <TableData className={tableColumnClasses.name}>
         <ResourceLink
           kind={kind}
-          name={resource.metadata.name}
-          namespace={resource.metadata.namespace}
+          name={resource.metadata?.name}
+          namespace={resource.metadata?.namespace}
         />
       </TableData>
       <TableData className={tableColumnClasses.type}>{resource.kind}</TableData>
       <TableData className={tableColumnClasses.status}>
         <HelmReleaseResourceStatus resource={resource} />
       </TableData>
       <TableData className={tableColumnClasses.created}>
-        <Timestamp timestamp={resource.metadata.creationTimestamp} />
+        <Timestamp timestamp={resource.metadata?.creationTimestamp || ''} />
       </TableData>
     </>
   );