refactor: custom resources use named exports (#80)

src/main/frontend/src/App.js

@@ -34,7 +34,11 @@ import {
   ConfigMapsEditPage
 } from './configmaps';
 import {CronJobsPage, CronJobsDetailPage, CronJobsEditPage} from './cronjobs';
-import crd from './customresourcedefinitions';
+import {
+  CustomResourceDefinitionsPage,
+  CustomResourceDefinitionsEditPage,
+  CustomResourceDefinitionsDetailPage
+} from './customresourcedefinitions';
 import dc from './deploymentconfigs';
 import {
   DaemonSetsPage,
@@ -177,17 +181,17 @@ export const App = () => {
         <Route
           exact
           path='/customresourcedefinitions'
-          element={<crd.CustomResourceDefinitionsPage />}
+          element={<CustomResourceDefinitionsPage />}
         />
         <Route
           exact
           path='/customresourcedefinitions/:uid'
-          element={<crd.CustomResourceDefinitionsDetailPage />}
+          element={<CustomResourceDefinitionsDetailPage />}
         />
         <Route
           exact
           path='/customresourcedefinitions/:uid/edit'
-          element={<crd.CustomResourceDefinitionsEditPage />}
+          element={<CustomResourceDefinitionsEditPage />}
         />
         <Route exact path='/daemonsets' element={<DaemonSetsPage />} />
         <Route

src/main/frontend/src/cronjobs/CronJobsDetailPage.js

@@ -122,7 +122,3 @@ export const CronJobsDetailPage = withParams(
     </ResourceDetailPage>
   ))
 );
-
-export default withParams(
-  connect(mapStateToProps, null, mergeProps)(CronJobsDetailPage)
-);

src/main/frontend/src/customresourcedefinitions/CustomResourceDefinitionsDetailPage.js

@@ -18,8 +18,8 @@ import React, {useEffect, useState} from 'react';
 import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details} from '../metadata';
-import crd from './';
-import cr from '../customresources';
+import {api as crApi, CustomResourceList} from '../customresources';
+import {api, selectors, DashboardPageTitle, GroupLink} from './';
 import {Card, Form, Link} from '../components';
 import ResourceDetailPage from '../components/ResourceDetailPage';
 
@@ -36,7 +36,7 @@ const useCustomResourceList = customResourceDefinition => {
     if (!timeoutHandle && customResourceDefinition) {
       const updateCustomResources = async () => {
         try {
-          const customResources = await cr.api.list(
+          const customResources = await crApi.list(
             customResourceDefinition,
             version
           )();
@@ -64,70 +64,6 @@ const useCustomResourceList = customResourceDefinition => {
   return [customResourceList, setCustomResourceList, version, changeVersion];
 };
 
-const CustomResourceDefinitionsDetailPage = ({customResourceDefinition}) => {
-  const [customResourceList, setCustomResourceList, version, changeVersion] =
-    useCustomResourceList(customResourceDefinition);
-  const kind = 'CustomResourceDefinitions';
-  const path = 'customresourcedefinitions';
-  const applicableVersion = version
-    ? version
-    : crd.selectors.specVersionsLatest(customResourceDefinition);
-  return (
-    <ResourceDetailPage
-      kind={kind}
-      path={path}
-      title={
-        <crd.DashboardPageTitle
-          customResourceDefinition={customResourceDefinition}
-        />
-      }
-      resource={customResourceDefinition}
-      deleteFunction={crd.api.delete}
-      body={
-        <Form>
-          <Details resource={customResourceDefinition} />
-          <Form.Field label='Group'>
-            <crd.GroupLink
-              customResourceDefinition={customResourceDefinition}
-            />
-          </Form.Field>
-          <Form.Field label='Versions'>
-            {crd.selectors.specVersions(customResourceDefinition).map(v => (
-              <div key={v}>
-                {v === applicableVersion ? (
-                  <span>{v}</span>
-                ) : (
-                  <Link onClick={() => changeVersion(v)}>{v}</Link>
-                )}
-              </div>
-            ))}
-          </Form.Field>
-          <Form.Field label='Scope'>
-            {crd.selectors.specScope(customResourceDefinition)}
-          </Form.Field>
-          <Form.Field label='Kind'>
-            {crd.selectors.specNamesKind(customResourceDefinition)}
-          </Form.Field>
-        </Form>
-      }
-    >
-      <cr.List
-        customResourceDefinition={customResourceDefinition}
-        version={applicableVersion}
-        customResources={customResourceList}
-        deleteResourceCallback={customResource => {
-          setCustomResourceList(
-            customResourceList.filter(c => c !== customResource)
-          );
-        }}
-        title={applicableVersion}
-        titleVariant={Card.titleVariants.small}
-        className='mt-2'
-      />
-    </ResourceDetailPage>
-  );
-};
-
 const mapStateToProps = ({customResourceDefinitions}) => ({
   customResourceDefinitions
 });
@@ -140,10 +76,70 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
     stateProps.customResourceDefinitions[ownProps.params.uid]
 });
 
-export default withParams(
+export const CustomResourceDefinitionsDetailPage = withParams(
   connect(
     mapStateToProps,
     null,
     mergeProps
-  )(CustomResourceDefinitionsDetailPage)
+  )(({customResourceDefinition}) => {
+    const [customResourceList, setCustomResourceList, version, changeVersion] =
+      useCustomResourceList(customResourceDefinition);
+    const kind = 'CustomResourceDefinitions';
+    const path = 'customresourcedefinitions';
+    const applicableVersion = version
+      ? version
+      : selectors.specVersionsLatest(customResourceDefinition);
+    return (
+      <ResourceDetailPage
+        kind={kind}
+        path={path}
+        title={
+          <DashboardPageTitle
+            customResourceDefinition={customResourceDefinition}
+          />
+        }
+        resource={customResourceDefinition}
+        deleteFunction={api.deleteCrd}
+        body={
+          <Form>
+            <Details resource={customResourceDefinition} />
+            <Form.Field label='Group'>
+              <GroupLink customResourceDefinition={customResourceDefinition} />
+            </Form.Field>
+            <Form.Field label='Versions'>
+              {selectors.specVersions(customResourceDefinition).map(v => (
+                <div key={v}>
+                  {v === applicableVersion ? (
+                    <span>{v}</span>
+                  ) : (
+                    <Link onClick={() => changeVersion(v)}>{v}</Link>
+                  )}
+                </div>
+              ))}
+            </Form.Field>
+            <Form.Field label='Scope'>
+              {selectors.specScope(customResourceDefinition)}
+            </Form.Field>
+            <Form.Field label='Kind'>
+              {selectors.specNamesKind(customResourceDefinition)}
+            </Form.Field>
+          </Form>
+        }
+      >
+        <CustomResourceList
+          customResourceDefinition={customResourceDefinition}
+          version={applicableVersion}
+          customResources={customResourceList}
+          deleteResourceCallback={customResource => {
+            setCustomResourceList(
+              customResourceList.filter(c => c !== customResource)
+            );
+          }}
+          title={applicableVersion}
+          titleVariant={Card.titleVariants.small}
+          className='mt-2'
+        />
+      </ResourceDetailPage>
+    );
+  })
 );

src/main/frontend/src/customresourcedefinitions/CustomResourceDefinitionsEditPage.js

@@ -17,27 +17,27 @@
 import React from 'react';
 import {withParams} from '../router';
 import {name} from '../metadata';
-import crd from './';
+import {api, DashboardPageTitle} from './';
 import ResourceEditPage from '../components/ResourceEditPage';
 import {Link} from '../components';
 
-const CustomResourceDefinitionsEditPage = ({params: {uid}}) => (
-  <ResourceEditPage
-    kind='CustomResourceDefinitions'
-    path='customresourcedefinitions'
-    dashboardPageTitle={resource => (
-      <crd.DashboardPageTitle customResourceDefinition={resource}>
-        &nbsp;- Edit
-      </crd.DashboardPageTitle>
-    )}
-    cardTitle={resource => (
-      <Link.RouterLink to={`/customresourcedefinitions/${uid}`}>
-        {name(resource)}
-      </Link.RouterLink>
-    )}
-    save={async resource => await crd.api.update(resource)}
-    resourceFromState={state => state.customResourceDefinitions[uid]}
-  />
+export const CustomResourceDefinitionsEditPage = withParams(
+  ({params: {uid}}) => (
+    <ResourceEditPage
+      kind='CustomResourceDefinitions'
+      path='customresourcedefinitions'
+      dashboardPageTitle={resource => (
+        <DashboardPageTitle customResourceDefinition={resource}>
+          &nbsp;- Edit
+        </DashboardPageTitle>
+      )}
+      cardTitle={resource => (
+        <Link.RouterLink to={`/customresourcedefinitions/${uid}`}>
+          {name(resource)}
+        </Link.RouterLink>
+      )}
+      save={async resource => await api.update(resource)}
+      resourceFromState={state => state.customResourceDefinitions[uid]}
+    />
+  )
 );
-
-export default withParams(CustomResourceDefinitionsEditPage);

src/main/frontend/src/customresourcedefinitions/CustomResourceDefinitionsPage.js

@@ -17,9 +17,9 @@
 import React from 'react';
 import {useLocation} from 'react-router-dom';
 import {DashboardPage, Link} from '../components';
-import crd from './';
+import {CustomResourceDefinitionsList} from './';
 
-const CustomResourceDefinitionsPage = () => {
+export const CustomResourceDefinitionsPage = () => {
   const queryParams = new URLSearchParams(useLocation().search);
   const group = queryParams.get('group');
   return (
@@ -33,9 +33,7 @@ const CustomResourceDefinitionsPage = () => {
         </>
       }
     >
-      <crd.List className='mt-4' group={group} />
+      <CustomResourceDefinitionsList className='mt-4' group={group} />
     </DashboardPage>
   );
 };
-
-export default CustomResourceDefinitionsPage;

src/main/frontend/src/customresourcedefinitions/DashboardPageTitle.js

@@ -17,18 +17,16 @@
 import React from 'react';
 import {DashboardPage} from '../components';
 import {name} from '../metadata';
-import crd from './index';
+import {GroupLink} from './';
 
-const DashboardPageTitle = ({customResourceDefinition, children}) => (
+export const DashboardPageTitle = ({customResourceDefinition, children}) => (
   <DashboardPage.Title
     path='customresourcedefinitions'
     kind='CustomResourceDefinitions'
   >
     &nbsp;-&nbsp;
-    <crd.GroupLink customResourceDefinition={customResourceDefinition} />
+    <GroupLink customResourceDefinition={customResourceDefinition} />
     &nbsp;- {name(customResourceDefinition)}
     {children}
   </DashboardPage.Title>
 );
-
-export default DashboardPageTitle;

src/main/frontend/src/customresourcedefinitions/GroupLink.js

@@ -16,16 +16,14 @@
  */
 import React from 'react';
 import {Link} from '../components';
-import crd from './index';
+import {selectors} from './index';
 
-const GroupLink = ({customResourceDefinition}) => (
+export const GroupLink = ({customResourceDefinition}) => (
   <Link.ResourceLink
-    to={`/customresourcedefinitions?group=${crd.selectors.specGroup(
+    to={`/customresourcedefinitions?group=${selectors.specGroup(
       customResourceDefinition
     )}`}
   >
-    {crd.selectors.specGroup(customResourceDefinition)}
+    {selectors.specGroup(customResourceDefinition)}
   </Link.ResourceLink>
 );
-
-export default GroupLink;

src/main/frontend/src/customresourcedefinitions/List.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {name, sortByCreationTimeStamp, uid} from '../metadata';
-import crd from './';
+import {api, selectors, GroupLink} from './';
 import {Icon, Link} from '../components';
 import ResourceList from '../components/ResourceList';
 import Table from '../components/Table';
@@ -35,7 +35,7 @@ const headers = [
 
 const Rows = ({customResourceDefinitions}) => {
   const deleteCrd = customResourceDefinition => async () =>
-    await crd.api.delete(customResourceDefinition);
+    await api.deleteCrd(customResourceDefinition);
   return customResourceDefinitions
     .sort(sortByCreationTimeStamp)
     .map(customResourceDefinition => (
@@ -51,18 +51,16 @@ const Rows = ({customResourceDefinitions}) => {
           </Link.CustomResourceDefinition>
         </Table.Cell>
         <Table.Cell>
-          <crd.GroupLink customResourceDefinition={customResourceDefinition} />
+          <GroupLink customResourceDefinition={customResourceDefinition} />
         </Table.Cell>
         <Table.Cell>
-          {crd.selectors.specVersions(customResourceDefinition).map(v => (
+          {selectors.specVersions(customResourceDefinition).map(v => (
             <div key={v}>{v}</div>
           ))}
         </Table.Cell>
+        <Table.Cell>{selectors.specScope(customResourceDefinition)}</Table.Cell>
         <Table.Cell>
-          {crd.selectors.specScope(customResourceDefinition)}
-        </Table.Cell>
-        <Table.Cell>
-          {crd.selectors.specNamesKind(customResourceDefinition)}
+          {selectors.specNamesKind(customResourceDefinition)}
         </Table.Cell>
         <Table.Cell>
           <Table.DeleteButton onClick={deleteCrd(customResourceDefinition)} />
@@ -71,15 +69,6 @@ const Rows = ({customResourceDefinitions}) => {
     ));
 };
 
-const List = ({customResourceDefinitions, group, ...properties}) => (
-  <ResourceList
-    headers={headers}
-    resources={customResourceDefinitions}
-    {...properties}
-  >
-    <Rows customResourceDefinitions={customResourceDefinitions} />
-  </ResourceList>
-);
 const mapStateToProps = ({customResourceDefinitions}) => ({
   customResourceDefinitions
 });
@@ -89,8 +78,20 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   ...dispatchProps,
   ...ownProps,
   customResourceDefinitions: Object.values(
-    crd.selectors.crdsBy(stateProps.customResourceDefinitions, ownProps)
+    selectors.crdsBy(stateProps.customResourceDefinitions, ownProps)
   )
 });
 
-export default connect(mapStateToProps, null, mergeProps)(List);
+export const List = connect(
+  mapStateToProps,
+  null,
+  mergeProps
+)(({customResourceDefinitions, group, ...properties}) => (
+  <ResourceList
+    headers={headers}
+    resources={customResourceDefinitions}
+    {...properties}
+  >
+    <Rows customResourceDefinitions={customResourceDefinitions} />
+  </ResourceList>
+));