refactor: deployment configs use named exports (#85)

src/main/frontend/src/App.js

@@ -39,7 +39,11 @@ import {
   CustomResourceDefinitionsEditPage,
   CustomResourceDefinitionsDetailPage
 } from './customresourcedefinitions';
-import dc from './deploymentconfigs';
+import {
+  DeploymentConfigsPage,
+  DeploymentConfigsDetailPage,
+  DeploymentConfigsEditPage
+} from './deploymentconfigs';
 import {
   DaemonSetsPage,
   DaemonSetsDetailPage,
@@ -211,17 +215,17 @@ export const App = () => {
         <Route
           exact
           path='/deploymentconfigs'
-          element={<dc.DeploymentConfigsPage />}
+          element={<DeploymentConfigsPage />}
         />
         <Route
           exact
           path='/deploymentconfigs/:uid'
-          element={<dc.DeploymentConfigsDetailPage />}
+          element={<DeploymentConfigsDetailPage />}
         />
         <Route
           exact
           path='/deploymentconfigs/:uid/edit'
-          element={<dc.DeploymentConfigsEditPage />}
+          element={<DeploymentConfigsEditPage />}
         />
         <Route exact path='/deployments' element={<DeploymentsPage />} />
         <Route

src/main/frontend/src/deploymentconfigs/DeploymentConfigsDetailPage.js

@@ -19,69 +19,12 @@ import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details, ownerReferencesUids, uid} from '../metadata';
 import {ContainerList} from '../containers';
-import dc from './';
+import {api, selectors} from './';
 import pods from '../pods';
 import rs from '../replicasets';
 import rc from '../replicationcontrollers';
 import {Card, Form, Icon, Link, ResourceDetailPage} from '../components';
 
-const DeploymentConfigsDetailPage = ({
-  deploymentConfig,
-  replicationControllersUids
-}) => (
-  <ResourceDetailPage
-    kind='DeploymentConfigs'
-    path='deploymentconfigs'
-    resource={deploymentConfig}
-    isReadyFunction={dc.selectors.isReady}
-    deleteFunction={dc.api.delete}
-    actions={
-      <Link
-        className='ml-2'
-        size={Link.sizes.small}
-        variant={Link.variants.outline}
-        onClick={() => dc.api.restart(deploymentConfig)}
-        title='Restart'
-      >
-        <Icon stylePrefix='fas' icon='fa-redo-alt' className='mr-2' />
-        Restart
-      </Link>
-    }
-    body={
-      <Form>
-        <Details resource={deploymentConfig} />
-        <rs.ReplicasField
-          resource={deploymentConfig}
-          replicas={dc.selectors.specReplicas(deploymentConfig)}
-          updateReplicas={dc.api.updateReplicas}
-        />
-        <Form.Field label='Strategy'>
-          {dc.selectors.specStrategyType(deploymentConfig)}
-        </Form.Field>
-      </Form>
-    }
-  >
-    <ContainerList
-      title='Containers'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      containers={dc.selectors.containers(deploymentConfig)}
-    />
-    <rc.List
-      title='Replication Controller'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      ownerUid={uid(deploymentConfig)}
-    />
-    <pods.List
-      title='Pods'
-      titleVariant={Card.titleVariants.medium}
-      className='mt-2'
-      ownerUids={replicationControllersUids}
-    />
-  </ResourceDetailPage>
-);
-
 const mapStateToProps = ({deploymentConfigs, replicationControllers}) => ({
   deploymentConfigs,
   replicationControllers
@@ -101,6 +44,62 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
     .map(replicationController => uid(replicationController))
 });
 
-export default withParams(
-  connect(mapStateToProps, null, mergeProps)(DeploymentConfigsDetailPage)
+export const DeploymentConfigsDetailPage = withParams(
+  connect(
+    mapStateToProps,
+    null,
+    mergeProps
+  )(({deploymentConfig, replicationControllersUids}) => (
+    <ResourceDetailPage
+      kind='DeploymentConfigs'
+      path='deploymentconfigs'
+      resource={deploymentConfig}
+      isReadyFunction={selectors.isReady}
+      deleteFunction={api.deleteDc}
+      actions={
+        <Link
+          className='ml-2'
+          size={Link.sizes.small}
+          variant={Link.variants.outline}
+          onClick={() => api.restart(deploymentConfig)}
+          title='Restart'
+        >
+          <Icon stylePrefix='fas' icon='fa-redo-alt' className='mr-2' />
+          Restart
+        </Link>
+      }
+      body={
+        <Form>
+          <Details resource={deploymentConfig} />
+          <rs.ReplicasField
+            resource={deploymentConfig}
+            replicas={selectors.specReplicas(deploymentConfig)}
+            updateReplicas={api.updateReplicas}
+          />
+          <Form.Field label='Strategy'>
+            {selectors.specStrategyType(deploymentConfig)}
+          </Form.Field>
+        </Form>
+      }
+    >
+      <ContainerList
+        title='Containers'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        containers={selectors.containers(deploymentConfig)}
+      />
+      <rc.List
+        title='Replication Controller'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        ownerUid={uid(deploymentConfig)}
+      />
+      <pods.List
+        title='Pods'
+        titleVariant={Card.titleVariants.medium}
+        className='mt-2'
+        ownerUids={replicationControllersUids}
+      />
+    </ResourceDetailPage>
+  ))
 );

src/main/frontend/src/deploymentconfigs/DeploymentConfigsEditPage.js

@@ -17,10 +17,10 @@
 import React from 'react';
 import {withParams} from '../router';
 import {name} from '../metadata';
-import dc from './';
+import {api} from './';
 import {Link, ResourceEditPage} from '../components';
 
-const DeploymentConfigsEditPage = ({params: {uid}}) => (
+export const DeploymentConfigsEditPage = withParams(({params: {uid}}) => (
   <ResourceEditPage
     kind='DeploymentConfigs'
     path='deploymentconfigs'
@@ -29,9 +29,7 @@ const DeploymentConfigsEditPage = ({params: {uid}}) => (
         {name(resource)}
       </Link.RouterLink>
     )}
-    save={async resource => await dc.api.update(resource)}
+    save={async resource => await api.update(resource)}
     resourceFromState={state => state.deploymentConfigs[uid]}
   />
-);
-
-export default withParams(DeploymentConfigsEditPage);
+));

src/main/frontend/src/deploymentconfigs/DeploymentConfigsPage.js

@@ -15,18 +15,16 @@
  *
  */
 import React from 'react';
-import dc from './';
+import {DeploymentConfigsList} from './';
 import {DashboardPage, FilterBar} from '../components';
 import {useUiNamespace} from '../redux';
 
-const DeploymentConfigsPage = () => {
+export const DeploymentConfigsPage = () => {
   const {selectedNamespace} = useUiNamespace();
   return (
     <DashboardPage title='DeploymentConfigs'>
       <FilterBar />
-      <dc.List className='mt-4' namespace={selectedNamespace} />
+      <DeploymentConfigsList className='mt-4' namespace={selectedNamespace} />
     </DashboardPage>
   );
 };
-
-export default DeploymentConfigsPage;

src/main/frontend/src/deploymentconfigs/List.js

@@ -17,7 +17,7 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import {name, namespace, sortByCreationTimeStamp, uid} from '../metadata';
-import dc from './';
+import {api, selectors} from './';
 import {resourcesBy} from '../redux';
 import {Icon, Link, Table} from '../components';
 import ResourceList from '../components/ResourceList';
@@ -35,8 +35,8 @@ const headers = [
 ];
 
 const Rows = ({deploymentConfigs}) => {
-  const deleteDC = deploymentConfig => () => dc.api.delete(deploymentConfig);
-  const restartDC = deploymentConfig => () => dc.api.restart(deploymentConfig);
+  const deleteDC = deploymentConfig => () => api.deleteDc(deploymentConfig);
+  const restartDC = deploymentConfig => () => api.restart(deploymentConfig);
   return deploymentConfigs
     .sort(sortByCreationTimeStamp)
     .map(deploymentConfig => (
@@ -47,12 +47,12 @@ const Rows = ({deploymentConfigs}) => {
         <Table.Cell className='whitespace-nowrap w-3 text-center'>
           <Icon
             className={
-              dc.selectors.isReady(deploymentConfig)
+              selectors.isReady(deploymentConfig)
                 ? 'text-green-500'
                 : 'text-red-500'
             }
             icon={
-              dc.selectors.isReady(deploymentConfig)
+              selectors.isReady(deploymentConfig)
                 ? 'fa-check'
                 : 'fa-exclamation-circle'
             }
@@ -71,7 +71,7 @@ const Rows = ({deploymentConfigs}) => {
           </Link.Namespace>
         </Table.Cell>
         <Table.Cell className='break-all'>
-          {dc.selectors.images(deploymentConfig).map((image, idx) => (
+          {selectors.images(deploymentConfig).map((image, idx) => (
             <div key={idx}>{image}</div>
           ))}
         </Table.Cell>
@@ -92,12 +92,6 @@ const Rows = ({deploymentConfigs}) => {
     ));
 };
 
-const List = ({deploymentConfigs, ...properties}) => (
-  <ResourceList headers={headers} resources={deploymentConfigs} {...properties}>
-    <Rows deploymentConfigs={deploymentConfigs} />
-  </ResourceList>
-);
-
 const mapStateToProps = ({deploymentConfigs}) => ({
   deploymentConfigs
 });
@@ -111,4 +105,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   )
 });
 
-export default connect(mapStateToProps, null, mergeProps)(List);
+export const List = connect(
+  mapStateToProps,
+  null,
+  mergeProps
+)(({deploymentConfigs, ...properties}) => (
+  <ResourceList headers={headers} resources={deploymentConfigs} {...properties}>
+    <Rows deploymentConfigs={deploymentConfigs} />
+  </ResourceList>
+));

src/main/frontend/src/deploymentconfigs/api.js

@@ -21,14 +21,11 @@ import {
   updateReplicasInNamespacedResource
 } from '../fetch';
 
-const api = {};
+export const deleteDc = deleteNamespacedResource('deploymentconfigs');
 
-api.delete = deleteNamespacedResource('deploymentconfigs');
+export const restart = restartNamespacedResource('deploymentconfigs');
 
-api.restart = restartNamespacedResource('deploymentconfigs');
+export const update = updateNamespacedResource('deploymentconfigs');
 
-api.update = updateNamespacedResource('deploymentconfigs');
-
-api.updateReplicas = updateReplicasInNamespacedResource('deploymentconfigs');
-
-export default api;
+export const updateReplicas =
+  updateReplicasInNamespacedResource('deploymentconfigs');

src/main/frontend/src/deploymentconfigs/index.js

@@ -14,20 +14,9 @@
  * limitations under the License.
  *
  */
-import api from './api';
-import selectors from './selectors';
-import List from './List';
-import DeploymentConfigsDetailPage from './DeploymentConfigsDetailPage';
-import DeploymentConfigsEditPage from './DeploymentConfigsEditPage';
-import DeploymentConfigsPage from './DeploymentConfigsPage';
-
-const deploymentConfigs = {};
-
-deploymentConfigs.api = api;
-deploymentConfigs.selectors = selectors;
-deploymentConfigs.List = List;
-deploymentConfigs.DeploymentConfigsDetailPage = DeploymentConfigsDetailPage;
-deploymentConfigs.DeploymentConfigsEditPage = DeploymentConfigsEditPage;
-deploymentConfigs.DeploymentConfigsPage = DeploymentConfigsPage;
-
-export default deploymentConfigs;
+export * as api from './api';
+export * as selectors from './selectors';
+export {List as DeploymentConfigsList} from './List';
+export {DeploymentConfigsDetailPage} from './DeploymentConfigsDetailPage';
+export {DeploymentConfigsEditPage} from './DeploymentConfigsEditPage';
+export {DeploymentConfigsPage} from './DeploymentConfigsPage';

src/main/frontend/src/deploymentconfigs/selectors.js

@@ -14,37 +14,29 @@
  * limitations under the License.
  *
  */
-const selectors = {};
-
-selectors.specReplicas = deploymentConfig =>
+export const specReplicas = deploymentConfig =>
   deploymentConfig?.spec?.replicas ?? 0;
 
-selectors.statusReadyReplicas = deploymentConfig =>
+export const statusReadyReplicas = deploymentConfig =>
   deploymentConfig?.status?.readyReplicas ?? 0;
 
-selectors.isReady = deploymentConfig =>
-  selectors.specReplicas(deploymentConfig) ===
-  selectors.statusReadyReplicas(deploymentConfig);
+export const isReady = deploymentConfig =>
+  specReplicas(deploymentConfig) === statusReadyReplicas(deploymentConfig);
 
-selectors.containers = deploymentConfig =>
+export const containers = deploymentConfig =>
   deploymentConfig?.spec?.template?.spec?.containers ?? [];
 
-selectors.images = deploymentConfig =>
-  selectors.containers(deploymentConfig).map(c => c.image);
-
-selectors.specReplicas = deploymentConfig =>
-  deploymentConfig?.spec?.replicas ?? 0;
+export const images = deploymentConfig =>
+  containers(deploymentConfig).map(c => c.image);
 
-selectors.specStrategyType = deploymentConfig =>
+export const specStrategyType = deploymentConfig =>
   deploymentConfig?.spec?.strategy?.type ?? '';
 
 // Selectors for array of deploymentConfigs
 
-selectors.readyCount = deploymentConfigs =>
+export const readyCount = deploymentConfigs =>
   deploymentConfigs.reduce(
     (count, deploymentConfig) =>
-      selectors.isReady(deploymentConfig) ? count + 1 : count,
+      isReady(deploymentConfig) ? count + 1 : count,
     0
   );
-
-export default selectors;