Refactored components

Author: KonradPietocha

…ents/CustomResources/CustomResources.jsx …ents/CustomResources/CustomResources.tsxsrc/components/CustomResources/CustomResources.jsx renamed to src/components/CustomResources/CustomResources.tsx src/components/CustomResources/CustomResources.jsx renamed to src/components/CustomResources/CustomResources.tsx

@@ -1,3 +1,4 @@
+import { FormEventHandler, RefObject } from 'react';
 import jp from 'jsonpath';
 import pluralize from 'pluralize';
 
@@ -8,6 +9,27 @@ import CRCreate from 'resources/CustomResourceDefinitions/CRCreate';
 import { useUrl } from 'hooks/useUrl';
 import { extractApiGroupVersion } from 'resources/Roles/helpers';
 
+export type Version = {
+  name: string;
+  served?: boolean;
+  additionalPrinterColumns?: { name: string; jsonPath: string }[];
+};
+
+type CustomResourcesProps = {
+  crd: {
+    spec: { group: string; names: { plural: string; kind: string } };
+    apiVersion: string;
+    metadata: { name: string; namespace?: string };
+  };
+  version: Version;
+  showTitle?: boolean;
+  omitColumnsIds?: string[];
+  hideCreateOption?: boolean;
+  enableColumnLayout?: boolean;
+  layoutCloseCreateUrl?: string;
+  simpleEmptyListMessage?: boolean;
+};
+
 export function CustomResources({
   crd,
   version,
@@ -17,7 +39,7 @@ export function CustomResources({
   enableColumnLayout,
   layoutCloseCreateUrl,
   simpleEmptyListMessage = false,
-}) {
+}: CustomResourcesProps) {
   const { group, names } = crd.spec;
   const name = names.plural;
   const customUrl = useCustomResourceUrl(crd);
@@ -32,7 +54,7 @@ export function CustomResources({
       ? `/apis/${group}/${version.name}/namespaces/${namespace}/${name}`
       : `/apis/${group}/${version.name}/${name}`;
 
-  const getJsonPath = (resource, jsonPath) => {
+  const getJsonPath = (resource: Record<string, any>, jsonPath: string) => {
     // try catch to parse annotations to take value from resource using jsonpath
     let value;
     try {
@@ -48,7 +70,7 @@ export function CustomResources({
         ) || EMPTY_TEXT_PLACEHOLDER;
     } catch (e) {
       console.error(e);
-      value = e.message;
+      value = (e as Error)?.message;
     }
     if (typeof value === 'boolean') {
       return value.toString();
@@ -61,12 +83,16 @@ export function CustomResources({
 
   const customColumns = version.additionalPrinterColumns?.map((column) => ({
     header: column.name,
-    value: (resource) => getJsonPath(resource, column.jsonPath),
+    value: (resource: Record<string, any>) =>
+      getJsonPath(resource, column.jsonPath),
   }));
   // CRD can have infinite number of additionalPrinterColumns what would be impossible to fit into the table
-  if (customColumns?.length > 5) customColumns.length = 5;
+  if (customColumns?.length && customColumns?.length > 5)
+    customColumns.length = 5;
 
-  const customColumnLayout = (resource) => {
+  const customColumnLayout = (resource?: {
+    metadata?: { name?: string; namespace?: string };
+  }) => {
     const { group, version } = extractApiGroupVersion(crd?.apiVersion);
     return {
       resourceName: resource?.metadata?.name,
@@ -89,9 +115,13 @@ export function CustomResources({
     testid: 'crd-custom-resources',
     omitColumnsIds,
     hideCreateOption,
-    createResourceForm: (props) => (
-      <CRCreate {...props} crd={crd} layoutNumber="midColumn" />
-    ),
+    createResourceForm: (props: {
+      [x: string]: any;
+      onChange: FormEventHandler<HTMLElement>;
+      formElementRef: RefObject<HTMLFormElement>;
+      layoutNumber: number;
+      resource: any;
+    }) => <CRCreate {...props} crd={crd} layoutNumber="midColumn" />,
     resourceUrlPrefix: `/apis/${group}/${version.name}`,
     searchSettings: {
       textSearchProperties: ['metadata.namespace'],
@@ -106,5 +136,6 @@ export function CustomResources({
     parentCrdName: crd.metadata.name,
     simpleEmptyListMessage,
   };
+  /*@ts-expect-error Type mismatch between js and ts*/
   return <ResourcesList {...params} />;
 }

…stomResources/CustomResourcesByGroup.jsx …stomResources/CustomResourcesByGroup.tsxsrc/components/CustomResources/CustomResourcesByGroup.jsx renamed to src/components/CustomResources/CustomResourcesByGroup.tsx src/components/CustomResources/CustomResourcesByGroup.jsx renamed to src/components/CustomResources/CustomResourcesByGroup.tsx

@@ -16,15 +16,18 @@ export default function CustomResourcesByGroup() {
   );
 
   return (
+    /*@ts-expect-error Type mismatch between js and ts*/
     <GroupingListPage
       title={t('custom-resources.title')}
       description={description}
-      filter={(crd) =>
-        crd.spec.scope === (namespace ? 'Namespaced' : 'Cluster')
+      filter={(crd: { spec: { scope: string } }) =>
+        crd?.spec?.scope === (namespace ? 'Namespaced' : 'Cluster')
       }
       resourceListProps={{
-        customUrl: (crd) => scopedUrl(`customresources/${crd.metadata.name}`),
-        nameSelector: (entry) => pluralize(entry?.spec.names.kind || ''),
+        customUrl: (crd: { metadata: { name: string } }) =>
+          scopedUrl(`customresources/${crd.metadata.name}`),
+        nameSelector: (entry?: { spec: { names: { kind: string } } }) =>
+          pluralize(entry?.spec?.names?.kind || ''),
         readOnly: true,
       }}
       enableColumnLayout={true}

…ustomResources/CustomResourcesOfType.jsx …ustomResources/CustomResourcesOfType.tsxsrc/components/CustomResources/CustomResourcesOfType.jsx renamed to src/components/CustomResources/CustomResourcesOfType.tsx src/components/CustomResources/CustomResourcesOfType.jsx renamed to src/components/CustomResources/CustomResourcesOfType.tsx

@@ -3,18 +3,27 @@ import { useTranslation } from 'react-i18next';
 import { useGet } from 'shared/hooks/BackendAPI/useGet';
 import { DynamicPageComponent } from 'shared/components/DynamicPageComponent/DynamicPageComponent';
 import { Spinner } from 'shared/components/Spinner/Spinner';
-import { CustomResources } from 'components/CustomResources/CustomResources';
+import {
+  CustomResources,
+  Version,
+} from 'components/CustomResources/CustomResources';
 import { useUrl } from 'hooks/useUrl';
 import YamlUploadDialog from 'resources/Namespaces/YamlUpload/YamlUploadDialog';
 import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { Link } from 'shared/components/Link/Link';
 import { createPortal } from 'react-dom';
 
+type CustomResourcesOfTypeProps = {
+  crdName: string;
+  enableColumnLayout?: boolean;
+  layoutCloseCreateUrl?: string;
+};
+
 export default function CustomResourcesOfType({
   crdName,
   enableColumnLayout,
   layoutCloseCreateUrl,
-}) {
+}: CustomResourcesOfTypeProps) {
   const { t } = useTranslation();
   const { clusterUrl } = useUrl();
   const {
@@ -26,7 +35,19 @@ export default function CustomResourcesOfType({
     {
       skip: !crdName,
     },
-  );
+  ) as {
+    data?: {
+      spec: {
+        group: string;
+        names: { plural: string; kind: string };
+        versions: Version[];
+      };
+      apiVersion: string;
+      metadata: { name: string; namespace?: string };
+    } | null;
+    loading?: boolean;
+    error?: Error | null;
+  };
 
   if (loading) return <Spinner />;
   if (error) {
@@ -43,27 +64,28 @@ export default function CustomResourcesOfType({
 
   return (
     <>
+      {/*@ts-expect-error Type mismatch between js and ts*/}
       <DynamicPageComponent
         layoutNumber="midColumn"
-        title={pluralize(crd.spec.names.kind)}
+        title={pluralize(crd?.spec?.names?.kind ?? '')}
         content={
           <CustomResources
             crd={crd}
-            version={crd.spec.versions.find((v) => v.served)}
+            version={crd?.spec?.versions?.find((v) => v.served) as Version}
             showTitle={false}
-            showNamespace={false}
             enableColumnLayout={enableColumnLayout}
             layoutCloseCreateUrl={layoutCloseCreateUrl}
           />
         }
       >
+        {/*@ts-expect-error Type mismatch between js and ts*/}
         <DynamicPageComponent.Column
           title={t('custom-resource-definitions.name_singular')}
         >
           <Link
-            url={clusterUrl(`customresourcedefinitions/${crd.metadata.name}`)}
+            url={clusterUrl(`customresourcedefinitions/${crd?.metadata?.name}`)}
           >
-            {crd.metadata.name}
+            {crd?.metadata?.name}
           </Link>
         </DynamicPageComponent.Column>
       </DynamicPageComponent>

…nts/CustomResources/GroupingListPage.jsx …nts/CustomResources/GroupingListPage.tsxsrc/components/CustomResources/GroupingListPage.jsx renamed to src/components/CustomResources/GroupingListPage.tsx src/components/CustomResources/GroupingListPage.jsx renamed to src/components/CustomResources/GroupingListPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ComponentProps, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { groupBy } from 'lodash';
 import { Tokens } from 'shared/components/Tokens';
@@ -14,21 +14,39 @@ import { UI5Panel } from 'shared/components/UI5Panel/UI5Panel';
 import { createPortal } from 'react-dom';
 import './GroupingListPage.scss';
 
+type Crd = {
+  metadata: { name: string };
+  spec: { names: { categories?: string[] }; group: string; scope: string };
+};
+
+type GroupingListPageProps = {
+  title: string;
+  description?: string;
+  filter?: (entry: any) => boolean;
+  resourceListProps?: Partial<ComponentProps<typeof ResourceListRenderer>>;
+  showCrdScope?: boolean;
+  enableColumnLayout?: boolean;
+};
+
 export function GroupingListPage({
   title,
   description,
   filter,
   resourceListProps,
   showCrdScope,
   enableColumnLayout,
-}) {
+}: GroupingListPageProps) {
   const [searchQuery, setSearchQuery] = useState('');
   const { t } = useTranslation();
   useWindowTitle(title);
 
   const resourceUrl = `/apis/apiextensions.k8s.io/v1/customresourcedefinitions`;
-  const { data, loading, error } = useGetList(filter)(resourceUrl);
-  const crdsByGroup = groupBy(data, (e) => e.spec.group);
+  const { data, loading, error } = useGetList(filter)(resourceUrl) as {
+    data: Crd[] | null;
+    loading?: boolean;
+    error?: Error | null;
+  };
+  const crdsByGroup = groupBy(data, (e) => e?.spec?.group);
 
   if (loading) {
     return <Spinner />;
@@ -47,15 +65,18 @@ export function GroupingListPage({
   if (searchQuery) {
     const query = searchQuery.toLowerCase();
 
-    const removeEmpty = ([, crds]) => crds.length;
+    const removeEmpty = ([_, crds]: [any, Crd[]]) => crds?.length;
 
-    const filterBySearchQuery = (crd) =>
+    const filterBySearchQuery = (crd: Crd) =>
       crd.metadata.name.includes(query) ||
       crd.spec.names.categories?.includes(query);
 
     entries = entries
-      .map(([group, crds]) => [group, crds.filter(filterBySearchQuery)])
-      .filter(removeEmpty);
+      .map(([group, crds]): [string, Crd[]] => [
+        group,
+        crds.filter(filterBySearchQuery),
+      ])
+      .filter(([group, crds]) => removeEmpty([group, crds]));
   }
 
   const lists = (
@@ -64,6 +85,7 @@ export function GroupingListPage({
         .sort(([groupA], [groupB]) => groupA.localeCompare(groupB))
         .map(([group, crds]) => (
           <li key={group} className="cr-group-list-item">
+            {/*@ts-expect-error Type mismatch between js and ts*/}
             <ResourceListRenderer
               resourceUrl={resourceUrl}
               resourceType="CustomResourceDefinition"
@@ -74,22 +96,24 @@ export function GroupingListPage({
               title={group}
               resources={crds}
               isCompact={true}
-              customColumns={[
-                {
-                  header: t('custom-resource-definitions.headers.categories'),
-                  value: (entry) => (
-                    <Tokens tokens={entry.spec.names.categories} />
-                  ),
-                },
-                ...(showCrdScope
-                  ? [
-                      {
-                        header: t('scope'),
-                        value: (entry) => entry.spec.scope,
-                      },
-                    ]
-                  : []),
-              ]}
+              customColumns={
+                [
+                  {
+                    header: t('custom-resource-definitions.headers.categories'),
+                    value: (entry: Crd) => (
+                      <Tokens tokens={entry.spec.names.categories} />
+                    ),
+                  },
+                  ...(showCrdScope
+                    ? [
+                        {
+                          header: t('scope'),
+                          value: (entry: Crd) => entry.spec.scope,
+                        },
+                      ]
+                    : []),
+                ] as any
+              }
               searchSettings={{
                 showSearchField: false,
               }}
@@ -102,13 +126,14 @@ export function GroupingListPage({
 
   return (
     <>
+      {/*@ts-expect-error Type mismatch between js and ts*/}
       <DynamicPageComponent
         title={title}
         description={description}
         actions={
           <SearchInput
             entriesKind={title}
-            value={searchQuery}
+            searchQuery={searchQuery}
             handleQueryChange={setSearchQuery}
             allowSlashShortcut
           />

src/shared/components/UI5Panel/UI5Panel.tsx

@@ -15,7 +15,7 @@ type UI5PanelProps = {
   modeActions?: ReactNode;
   keyComponent?: string;
   className?: string;
-  children: ReactNode;
+  children?: ReactNode;
   description?: string;
   stickyHeader?: boolean;
   headerTop?: string;