Merge branch 'master' into add-tests

README.md

@@ -9,20 +9,6 @@ configure your local development settings.
 
 `cp config/config.dev.json.example config/config.dev.json`
 
-### Openshift Logo
-
-The project requires some logos that are not checked in with the project, and
-require set up prior to running. Download and extract the logo package to a known location
-and install as follows:
-
-```
-yarn global add yalc
-cd <EXTRACTED_LOCATION>/openshift-logo-package
-yalc publish --private
-cd <MIG_UI_PROJECT>
-yalc add openshift-logo-package
-```
-
 ### UI development server
 
 ```bash

package.json

@@ -66,7 +66,7 @@
     "typescript": "3.3.4000",
     "uuid": "^3.3.2",
     "webpack": "4.29.6",
-    "webpack-bundle-analyzer": "3.1.0",
+    "webpack-bundle-analyzer": "^3.3.2",
     "webpack-cli": "3.3.0",
     "webpack-dev-server": "3.2.1"
   },

src/app/cluster/components/AddClusterModal/AddClusterForm.tsx

@@ -13,13 +13,11 @@ import {
   Form,
   FormGroup,
 } from '@patternfly/react-core';
-import ConnectionState from '../../../common/connection_state';
 import KeyDisplayIcon from '../../../common/components/KeyDisplayIcon';
-import StatusIcon from '../../../common/components/StatusIcon';
 import FormErrorDiv from './../../../common/components/FormErrorDiv';
 import { css } from '@emotion/core';
 import HideWrapper from './../../../common/components/HideWrapper';
-
+import CheckConnection from './../../../common/components/CheckConnection';
 class WrappedAddClusterForm extends React.Component<any, any> {
   state = {
     tokenHidden: true,
@@ -53,6 +51,7 @@ class WrappedAddClusterForm extends React.Component<any, any> {
       connectionState,
       setFieldTouched,
       setFieldValue,
+      checkConnection,
     } = this.props;
     const dynamicTokenSecurity = this.state.tokenHidden ? 'disc' : 'inherit';
     const customCss = css`
@@ -175,36 +174,6 @@ class WrappedAddClusterForm extends React.Component<any, any> {
   }
 }
 
-function renderConnectionState(connectionState: ConnectionState) {
-  let cxStateContents;
-  let iconStatus;
-
-  switch (connectionState) {
-    case ConnectionState.Checking:
-      cxStateContents = 'Checking...';
-      iconStatus = 'checking';
-      break;
-    case ConnectionState.Success:
-      cxStateContents = 'Success!';
-      iconStatus = 'success';
-      break;
-    case ConnectionState.Failed:
-      cxStateContents = 'Failed!';
-      iconStatus = 'failed';
-      break;
-  }
-
-  return (
-    <Flex m="10px 10px 10px 0">
-      <Box>
-        {cxStateContents}
-        {' '}
-        <StatusIcon status={iconStatus} />
-      </Box>
-    </Flex>
-  );
-}
-
 const AddClusterForm: any = withFormik({
   mapPropsToValues: () => ({ name: '', url: '', token: '', connectionStatus: '' }),
 

src/app/common/components/CheckConnection.tsx

@@ -0,0 +1,109 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/core';
+import styled from '@emotion/styled';
+import { EyeIcon, EyeSlashIcon } from '@patternfly/react-icons';
+import theme from '../../../theme';
+import {
+  Button,
+  FormGroup,
+} from '@patternfly/react-core';
+import { Flex, Box } from '@rebass/emotion';
+import ConnectionState from '../connection_state';
+import StatusIcon from './StatusIcon';
+
+interface IProps {
+  connectionState: any;
+  errors: any;
+  touched: any;
+  checkConnection: () => void;
+}
+
+const CheckConnection: React.FunctionComponent<IProps> = ({
+  connectionState,
+  checkConnection,
+  errors,
+  touched,
+  ...props
+}) => {
+
+  const errorsObj = Object.entries(errors).length === 0 && errors.constructor === Object;
+  const touchedObj = Object.entries(touched).length === 0 && touched.constructor === Object;
+
+  return (
+    <FormGroup
+      fieldId="check-connection"
+      id="check-connection"
+    >
+      <Flex width="100%" m="20px 10px 10px 0" flexDirection="column">
+        <Box>
+          <Flex flexDirection="column" >
+            <Box alignSelf="flex-start">
+              <Button
+                key="check connection"
+                variant="secondary"
+                isDisabled={!errorsObj || touchedObj}
+                onClick={() => checkConnection()}
+              >
+                Check connection
+              </Button>
+            </Box>
+            <Box alignSelf="flex-start">
+              {renderConnectionState(connectionState)}
+            </Box>
+          </Flex>
+
+        </Box>
+        <Box mt={30} alignSelf="flex-start">
+          <Button
+            variant="primary"
+            type="submit"
+            isDisabled={connectionState !== ConnectionState.Success}
+            style={{ marginRight: '10px' }}
+          >
+            Add
+          </Button>
+          <Button
+            key="cancel"
+            variant="secondary"
+            onClick={() => this.props.onHandleModalToggle(null)}
+          >
+            Cancel
+          </Button>
+        </Box>
+      </Flex>
+    </FormGroup>
+  );
+};
+
+export default CheckConnection;
+
+function renderConnectionState(connectionState: ConnectionState) {
+  let cxStateContents;
+  let iconStatus;
+
+  switch (connectionState) {
+    case ConnectionState.Checking:
+      cxStateContents = 'Checking...';
+      iconStatus = 'checking';
+      break;
+    case ConnectionState.Success:
+      cxStateContents = 'Success!';
+      iconStatus = 'success';
+      break;
+    case ConnectionState.Failed:
+      cxStateContents = 'Failed!';
+      iconStatus = 'failed';
+      break;
+  }
+
+  return (
+    <Flex m="10px 10px 10px 0">
+      <Box>
+        {cxStateContents}
+        {' '}
+        <StatusIcon status={iconStatus} />
+      </Box>
+    </Flex>
+  );
+}

src/app/home/HomeComponent.tsx

@@ -34,7 +34,7 @@ import clusterSelectors from '../cluster/duck/selectors';
 import storageSelectors from '../storage/duck/selectors';
 import planSelectors from '../plan/duck/selectors';
 
-// import openshiftLogo from 'openshift-logo-package/logos/SVG/Logo-Cluster_Application_Migration.svg';
+import openshiftLogo from '../../assets/Logo-Cluster_Application_Migration.svg';
 interface IProps {
   loggingIn?: boolean;
   user: any;
@@ -187,7 +187,7 @@ class HomeComponent extends React.Component<IProps, IState> {
       <StyledPageHeader
         logo={
           <React.Fragment>
-            {/* <Brand src={openshiftLogo} alt="OpenShift Logo" /> */}
+            <Brand src={openshiftLogo} alt="OpenShift Logo" />
           </React.Fragment>
         }
         toolbar={PageToolbar}

src/app/home/components/DataList/DataListEmptyState.tsx

@@ -61,7 +61,7 @@ const DataListEmptyState: React.FunctionComponent<IEmptyStateProps> = ({
           Add replication repositories for the migration
           </Title>
         <Button onClick={toggleOpen} variant="primary">
-          Add Storage
+          Add Repository
             </Button>
         <AddStorageModal isOpen={isOpen} onHandleClose={toggleOpen} />
       </React.Fragment>

src/app/home/components/DataList/Storage/StorageDataListItem.tsx

@@ -39,7 +39,7 @@ const StorageDataListItem = ({ dataList, isLoading, associatedPlans, ...props })
           />
           <DataListAction aria-label="add-plan" aria-labelledby="plan-item" id="add-plan">
             <Button onClick={toggleOpen} variant="link">
-              <PlusCircleIcon /> Add storage
+              <PlusCircleIcon /> Add Repository
             </Button>
             <AddStorageModal isOpen={isOpen} onHandleClose={toggleOpen} />
           </DataListAction>

src/app/plan/components/NameSpaceTable.tsx

@@ -168,8 +168,22 @@ class NamespaceTable extends React.Component<IProps, IState> {
 }
 
 function mapStateToProps(state) {
+  const allSourceClusterNamespaces = state.plan.sourceClusterNamespaces;
+  const filteredSourceClusterNamespaces = allSourceClusterNamespaces.filter(ns => {
+    const rejectedRegex = [
+      RegExp('^kube-.*', 'i'),
+      RegExp('^openshift-.*', 'i'),
+      RegExp('^openshift$', 'i'),
+      RegExp('^velero$', 'i'),
+    ];
+
+    // Short circuit the regex check if any of them match a rejected regex and filter it out
+    return !rejectedRegex.some(rx => rx.test(ns.metadata.name));
+  });
+
+
   return {
-    sourceClusterNamespaces: state.plan.sourceClusterNamespaces,
+    sourceClusterNamespaces: filteredSourceClusterNamespaces,
   };
 }
 

src/app/plan/components/Wizard.tsx

@@ -136,20 +136,6 @@ class WrappedWizard extends React.Component<any, any> {
         ),
         enableNext: !errors.targetCluster && touched.targetCluster === true && !this.state.isWizardLoading,
       },
-      // {
-      //   id: 5,
-      //   name: 'Confirmation',
-      //   component: (
-      //     <ConfirmationStep
-      //       values={values}
-      //       errors={errors}
-      //       onAddPlan={this.handleAddPlan}
-      //       onWizardLoadingToggle={this.handleWizardLoadingToggle}
-      //       setFieldValue={setFieldValue}
-      //     />
-      //   ),
-      //   enableNext: !this.state.isWizardLoading,
-      // },
       {
         id: 5,
         name: 'Results',
@@ -163,6 +149,8 @@ class WrappedWizard extends React.Component<any, any> {
         ),
         enableNext: !this.state.isWizardLoading,
         nextButtonText: 'Close',
+        hideCancelButton: true,
+        hideBackButton: true,
       },
     ];
     const customStyle = css`