From 648ed611a38760775926962a2122466677523365 Mon Sep 17 00:00:00 2001
From: Jiri Tomasek <jtomasek@redhat.com>
Date: Mon, 22 Jun 2020 20:12:02 +0200
Subject: [PATCH] Fix new cluster modal redirect

- fix axios client export
- fix getClusters url
- hide alerts section when empty
---
 src/api/axiosClient.ts                      |  4 +++-
 src/api/clusters.ts                         |  3 ++-
 src/components/clusters/Clusters.tsx        |  7 ++++--
 src/components/clusters/newClusterModal.tsx |  9 ++++----
 src/components/ui/AlertsSection/index.tsx   | 25 +++++++++++----------
 5 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/api/axiosClient.ts b/src/api/axiosClient.ts
index 0439bb4ac6..669c346b2e 100644
--- a/src/api/axiosClient.ts
+++ b/src/api/axiosClient.ts
@@ -10,8 +10,10 @@ const getDefaultClient = () => {
   return applyCaseMiddleware(client);
 };
 
-export let client: AxiosInstance = getDefaultClient();
+let client: AxiosInstance = getDefaultClient();
 
 export const setClient = (axiosInstance: AxiosInstance) => {
   client = applyCaseMiddleware(axiosInstance);
 };
+
+export { client };
diff --git a/src/api/clusters.ts b/src/api/clusters.ts
index 043bd90f52..d116edaeed 100644
--- a/src/api/clusters.ts
+++ b/src/api/clusters.ts
@@ -8,7 +8,8 @@ import {
   Credentials,
 } from './types';
 import { client } from './axiosClient';
-export const getClusters = (): AxiosPromise<Cluster[]> => client.get('clusters');
+
+export const getClusters = (): AxiosPromise<Cluster[]> => client.get('/clusters');
 
 export const getCluster = (id: string): AxiosPromise<Cluster> => client.get(`/clusters/${id}`);
 
diff --git a/src/components/clusters/Clusters.tsx b/src/components/clusters/Clusters.tsx
index 90d9d723c7..c60cd14fa7 100644
--- a/src/components/clusters/Clusters.tsx
+++ b/src/components/clusters/Clusters.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { RouteComponentProps } from 'react-router-dom';
 import {
   PageSectionVariants,
   TextContent,
@@ -26,7 +27,9 @@ import alertsReducer, {
   removeAlert,
 } from '../../features/alerts/alertsSlice';
 
-const Clusters: React.FC = () => {
+type ClustersProps = RouteComponentProps;
+
+const Clusters: React.FC<ClustersProps> = ({ history }) => {
   const { LOADING, EMPTY, ERROR, RELOADING } = ResourceUIState;
   const [isModalOpen, setIsModalOpen] = React.useState(false);
   const [alerts, dispatchAlertsAction] = React.useReducer(alertsReducer, []);
@@ -124,7 +127,7 @@ const Clusters: React.FC = () => {
   return (
     <>
       {body}
-      {isModalOpen && <NewClusterModal closeModal={closeModal} />}
+      {isModalOpen && <NewClusterModal closeModal={closeModal} history={history} />}
     </>
   );
 };
diff --git a/src/components/clusters/newClusterModal.tsx b/src/components/clusters/newClusterModal.tsx
index 2159d4ec5f..8f254b645f 100644
--- a/src/components/clusters/newClusterModal.tsx
+++ b/src/components/clusters/newClusterModal.tsx
@@ -10,9 +10,9 @@ import {
   ModalBoxFooter,
   ModalVariant,
 } from '@patternfly/react-core';
+import { History } from 'history';
 import { uniqueNamesGenerator, Config, adjectives, colors, animals } from 'unique-names-generator';
 import * as Yup from 'yup';
-// import history from '../../history';
 import { LoadingState } from '../ui/uiState';
 import { postCluster, getClusters } from '../../api/clusters';
 import { Formik, FormikHelpers } from 'formik';
@@ -47,9 +47,10 @@ export const NewClusterModalButton: React.FC<NewClusterModalButtonProps> = ({
 
 type NewClusterModalProps = {
   closeModal: () => void;
+  history: History;
 };
 
-export const NewClusterModal: React.FC<NewClusterModalProps> = ({ closeModal }) => {
+export const NewClusterModal: React.FC<NewClusterModalProps> = ({ closeModal, history }) => {
   const nameInputRef = React.useCallback((node) => {
     if (node !== null) {
       node.focus();
@@ -84,9 +85,7 @@ export const NewClusterModal: React.FC<NewClusterModalProps> = ({ closeModal })
 
     try {
       const { data } = await postCluster(values);
-      console.info(`Fix navigation to /clusters/${data.id}`);
-      // TODO(mlibra): Fix navigation, history is not available in the library
-      // history.push(`/clusters/${data.id}`);
+      history.push(`/clusters/${data.id}`);
     } catch (e) {
       handleApiError<ClusterCreateParams>(e, () =>
         formikActions.setStatus({
diff --git a/src/components/ui/AlertsSection/index.tsx b/src/components/ui/AlertsSection/index.tsx
index 219402d175..55c974fb77 100644
--- a/src/components/ui/AlertsSection/index.tsx
+++ b/src/components/ui/AlertsSection/index.tsx
@@ -10,17 +10,18 @@ type AlertsSectionProps = {
   onClose: (alert: AlertProps) => void;
 };
 
-const AlertsSection: React.FC<AlertsSectionProps> = ({ alerts, onClose }) => (
-  <PageSection padding={{ default: 'noPadding' }}>
-    <AlertGroup className="alerts-section">
-      {alerts.map((alert) => (
-        // eslint-disable-next-line react/jsx-key
-        <Alert actionClose={<AlertActionCloseButton onClose={() => onClose(alert)} />} {...alert}>
-          {alert.message}
-        </Alert>
-      ))}
-    </AlertGroup>
-  </PageSection>
-);
+const AlertsSection: React.FC<AlertsSectionProps> = ({ alerts, onClose }) =>
+  alerts.length ? (
+    <PageSection padding={{ default: 'noPadding' }}>
+      <AlertGroup className="alerts-section">
+        {alerts.map((alert) => (
+          // eslint-disable-next-line react/jsx-key
+          <Alert actionClose={<AlertActionCloseButton onClose={() => onClose(alert)} />} {...alert}>
+            {alert.message}
+          </Alert>
+        ))}
+      </AlertGroup>
+    </PageSection>
+  ) : null;
 
 export default AlertsSection;