refactor: routes use named exports (#86)

src/main/frontend/src/App.js

@@ -82,7 +82,7 @@ import pods from './pods';
 import rc from './replicationcontrollers';
 import {apiGroupsSet, setError, setOffline} from './redux';
 import roles from './roles';
-import routes from './routes';
+import {RoutesPage, RoutesDetailPage, RoutesEditPage} from './routes';
 import {SearchPage} from './search';
 import secrets from './secrets';
 import services from './services';
@@ -331,17 +331,9 @@ export const App = () => {
           path='/roles/:uid/edit'
           element={<roles.RolesEditPage />}
         />
-        <Route exact path='/routes' element={<routes.RoutesPage />} />
-        <Route
-          exact
-          path='/routes/:uid'
-          element={<routes.RoutesDetailPage />}
-        />
-        <Route
-          exact
-          path='/routes/:uid/edit'
-          element={<routes.RoutesEditPage />}
-        />
+        <Route exact path='/routes' element={<RoutesPage />} />
+        <Route exact path='/routes/:uid' element={<RoutesDetailPage />} />
+        <Route exact path='/routes/:uid/edit' element={<RoutesEditPage />} />
         <Route exact path='/search' element={<SearchPage />} />
         <Route exact path='/secrets' element={<secrets.SecretsPage />} />
         <Route

src/main/frontend/src/router.js

@@ -17,6 +17,11 @@
 import React from 'react';
 import {useParams} from 'react-router-dom';
 
+/**
+ * HOC that injects the current route params into the wrapped component
+ * @param {React.Component} Component - Component to wrap
+ * @returns {React.Component} - Wrapped Component with route params injected as props
+ */
 export const withParams = Component => props => {
   const params = useParams();
   return <Component params={params} {...props} />;

src/main/frontend/src/routes/Host.js

@@ -15,16 +15,16 @@
  *
  */
 import React from 'react';
-import r from './';
+import {selectors} from './';
 import {Icon, Link} from '../components';
 
-const Host = ({route}) => {
+export const Host = ({route}) => {
   const url = `http${
-    r.selectors.specTls(route) ? 's' : ''
-  }://${r.selectors.specHost(route)}${r.selectors.specPath(route)}`;
+    selectors.specTls(route) ? 's' : ''
+  }://${selectors.specHost(route)}${selectors.specPath(route)}`;
   return (
     <Link href={url} target='_blank'>
-      {r.selectors.specHost(route)}
+      {selectors.specHost(route)}
       <Icon
         className='ml-1 text-xs'
         icon='fa-external-link-alt'
@@ -33,5 +33,3 @@ const Host = ({route}) => {
     </Link>
   );
 };
-
-export default Host;

src/main/frontend/src/routes/List.js

@@ -16,7 +16,7 @@
  */
 import React from 'react';
 import {name, namespace, sortByCreationTimeStamp, uid} from '../metadata';
-import r from './';
+import {Host, api, selectors} from './';
 import {Icon, Link, Table} from '../components';
 import ResourceList from '../components/ResourceList';
 
@@ -31,7 +31,7 @@ const headers = [
 ];
 
 const Rows = ({routes}) => {
-  const deleteRoute = route => () => r.api.delete(route);
+  const deleteRoute = route => () => api.deleteRoute(route);
   return routes.sort(sortByCreationTimeStamp).map(route => (
     <Table.ResourceRow key={uid(route)} resource={route}>
       <Table.Cell>
@@ -43,20 +43,20 @@ const Rows = ({routes}) => {
         </Link.Namespace>
       </Table.Cell>
       <Table.Cell>
-        <r.Host route={route} />
+        <Host route={route} />
       </Table.Cell>
-      <Table.Cell>{r.selectors.specPath(route)}</Table.Cell>
+      <Table.Cell>{selectors.specPath(route)}</Table.Cell>
       <Table.Cell>
         <Table.DeleteButton onClick={deleteRoute(route)} />
       </Table.Cell>
     </Table.ResourceRow>
   ));
 };
 
-const List = ({resources, crudDelete, loadedResources, ...properties}) => (
-  <ResourceList headers={headers} resources={resources} {...properties}>
-    <Rows routes={resources} />
-  </ResourceList>
+export const List = ResourceList.resourceListConnect('routes')(
+  ({resources, crudDelete, loadedResources, ...properties}) => (
+    <ResourceList headers={headers} resources={resources} {...properties}>
+      <Rows routes={resources} />
+    </ResourceList>
+  )
 );
-
-export default ResourceList.resourceListConnect('routes')(List);

src/main/frontend/src/routes/RoutesDetailPage.js

@@ -18,27 +18,9 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {withParams} from '../router';
 import {Details} from '../metadata';
-import r from './';
+import {Host, api, selectors} from './';
 import {Form, ResourceDetailPage} from '../components';
 
-const RoutesDetailPage = ({route}) => (
-  <ResourceDetailPage
-    kind='Routes'
-    path='routes'
-    resource={route}
-    deleteFunction={r.api.delete}
-    body={
-      <Form>
-        <Details resource={route} />
-        <Form.Field label='Host'>
-          <r.Host route={route} />
-        </Form.Field>
-        <Form.Field label='Path'>{r.selectors.specPath(route)}</Form.Field>
-      </Form>
-    }
-  />
-);
-
 const mapStateToProps = ({routes}) => ({
   routes
 });
@@ -50,6 +32,26 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => ({
   route: stateProps.routes[ownProps.params.uid]
 });
 
-export default withParams(
-  connect(mapStateToProps, null, mergeProps)(RoutesDetailPage)
+export const RoutesDetailPage = withParams(
+  connect(
+    mapStateToProps,
+    null,
+    mergeProps
+  )(({route}) => (
+    <ResourceDetailPage
+      kind='Routes'
+      path='routes'
+      resource={route}
+      deleteFunction={api.deleteRoute}
+      body={
+        <Form>
+          <Details resource={route} />
+          <Form.Field label='Host'>
+            <Host route={route} />
+          </Form.Field>
+          <Form.Field label='Path'>{selectors.specPath(route)}</Form.Field>
+        </Form>
+      }
+    />
+  ))
 );

src/main/frontend/src/routes/RoutesEditPage.js

@@ -17,19 +17,17 @@
 import React from 'react';
 import {withParams} from '../router';
 import {name} from '../metadata';
-import r from './';
+import {api} from './';
 import {Link, ResourceEditPage} from '../components';
 
-const RoutesEditPage = ({params: {uid}}) => (
+export const RoutesEditPage = withParams(({params: {uid}}) => (
   <ResourceEditPage
     kind='Routes'
     path='routes'
     cardTitle={resource => (
       <Link.RouterLink to={`/routes/${uid}`}>{name(resource)}</Link.RouterLink>
     )}
-    save={async resource => await r.api.update(resource)}
+    save={async resource => await api.update(resource)}
     resourceFromState={state => state.routes[uid]}
   />
-);
-
-export default withParams(RoutesEditPage);
+));

src/main/frontend/src/routes/RoutesPage.js

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

src/main/frontend/src/routes/api.js

@@ -16,9 +16,5 @@
  */
 import {deleteNamespacedResource, updateNamespacedResource} from '../fetch';
 
-const api = {
-  delete: deleteNamespacedResource('routes'),
-  update: updateNamespacedResource('routes')
-};
-
-export default api;
+export const deleteRoute = deleteNamespacedResource('routes');
+export const update = updateNamespacedResource('routes');

src/main/frontend/src/routes/index.js

@@ -14,22 +14,10 @@
  * limitations under the License.
  *
  */
-import api from './api';
-import selectors from './selectors';
-import Host from './Host';
-import List from './List';
-import RoutesDetailPage from './RoutesDetailPage';
-import RoutesEditPage from './RoutesEditPage';
-import RoutesPage from './RoutesPage';
-
-const index = {
-  api,
-  selectors,
-  Host,
-  List,
-  RoutesDetailPage,
-  RoutesEditPage,
-  RoutesPage
-};
-
-export default index;
+export * as api from './api';
+export * as selectors from './selectors';
+export {Host} from './Host';
+export {List as RoutesList} from './List';
+export {RoutesDetailPage} from './RoutesDetailPage';
+export {RoutesEditPage} from './RoutesEditPage';
+export {RoutesPage} from './RoutesPage';

src/main/frontend/src/routes/selectors.js

@@ -14,12 +14,8 @@
  * limitations under the License.
  *
  */
-const selectors = {};
+export const specHost = route => route?.spec?.host ?? '';
 
-selectors.specHost = route => route?.spec?.host ?? '';
+export const specPath = route => route?.spec?.path ?? '';
 
-selectors.specPath = route => route?.spec?.path ?? '';
-
-selectors.specTls = route => route?.spec?.tls;
-
-export default selectors;
+export const specTls = route => route?.spec?.tls;

src/main/frontend/src/search/SearchPage.js

@@ -41,7 +41,7 @@ import {setQuery} from '../redux';
 import rs from '../replicasets';
 import rc from '../replicationcontrollers';
 import roles from '../roles';
-import routes from '../routes';
+import {RoutesList} from '../routes';
 import {Card, DashboardPage, FilterBar, Textfield} from '../components';
 
 const Instructions = () => (
@@ -138,7 +138,7 @@ const Results = ({query, selectedNamespace}) => {
         nameLike={query}
         namespace={selectedNamespace}
       />
-      <routes.List
+      <RoutesList
         {...commonProps}
         title='Routes'
         nameLike={query}