Bug 1986426: Fixes for odf and ibm integration

frontend/packages/ceph-storage-plugin/locales/en/ceph-storage-plugin.json

@@ -218,6 +218,7 @@
   "Selected versus Available Capacity": "Selected versus Available Capacity",
   "Out of {{capacity}}": "Out of {{capacity}}",
   "StorageClass name": "StorageClass name",
+  "{{displayName}} connection details": "{{displayName}} connection details",
   "Backing storage": "Backing storage",
   "StorageClass:": "StorageClass:",
   "Capacity and nodes": "Capacity and nodes",
@@ -245,7 +246,6 @@
   "Password": "Password",
   "Hide password": "Hide password",
   "Reveal password": "Reveal password",
-  "Poolname": "Poolname",
   "External storage metadata": "External storage metadata",
   "Download <1>{{SCRIPT_NAME}}</1> script and run on the RHCS cluster, then upload the results (JSON).": "Download <1>{{SCRIPT_NAME}}</1> script and run on the RHCS cluster, then upload the results (JSON).",
   "Download script": "Download script",

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/backing-storage-step/advanced-section.tsx

@@ -9,7 +9,7 @@ import {
 } from '@patternfly/react-core';
 import { DeploymentType } from '../../../../constants/create-storage-system';
 import { WizardDispatch, WizardState } from '../../reducer';
-import './backing-storage.scss';
+import './backing-storage-step.scss';
 
 export const AdvancedSection: React.FC<AdvancedSelectionProps> = ({
   deployment,

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/backing-storage-step/backing-storage-step.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { Form, FormSelect, FormSelectOption, FormSelectProps, Radio } from '@patternfly/react-core';
 import { StorageClassDropdown } from '@console/internal/components/utils/storage-class-dropdown';
 import { StorageClassResourceKind } from '@console/internal/module/k8s';
-import './backing-storage.scss';
 import { AdvancedSection } from './advanced-section';
 import { SUPPORTED_EXTERNAL_STORAGE } from '../../external-storage';
 import { StorageSystemKind } from '../../../../types';
@@ -19,6 +18,7 @@ import {
 import { ErrorHandler } from '../../error-handler';
 import { ExternalStorage } from '../../external-storage/types';
 import { NO_PROVISIONER } from '../../../../constants';
+import './backing-storage-step.scss';
 
 const ExternalSystemSelection: React.FC<ExternalSystemSelectionProps> = ({
   dispatch,

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-storage-class-step/create-storage-class-step.scss

@@ -0,0 +1,3 @@
+.odf-create-storage-class__form {
+    padding-right: 10rem;
+}

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-storage-class-step.tsx → frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-storage-class-step/create-storage-class-step.tsx

@@ -1,9 +1,17 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Form, FormGroup, TextInput } from '@patternfly/react-core';
-import { getExternalStorage } from '../../../utils/create-storage-system';
-import { WizardDispatch, WizardState } from '../reducer';
-import { ExternalStateValues, ExternalStateKeys } from '../external-storage/types';
+import {
+  Form,
+  FormGroup,
+  TextContent,
+  TextInput,
+  TextVariants,
+  Text,
+} from '@patternfly/react-core';
+import { getExternalStorage } from '../../../../utils/create-storage-system';
+import { WizardDispatch, WizardState } from '../../reducer';
+import { ExternalStateValues, ExternalStateKeys } from '../../external-storage/types';
+import './create-storage-class-step.scss';
 
 export const CreateStorageClass: React.FC<CreateStorageClassProps> = ({
   state,
@@ -13,7 +21,7 @@ export const CreateStorageClass: React.FC<CreateStorageClassProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const { Component } = getExternalStorage(externalStorage) || {};
+  const { Component, displayName } = getExternalStorage(externalStorage) || {};
 
   const setForm = React.useCallback(
     (field: ExternalStateKeys, value: ExternalStateValues) =>
@@ -28,7 +36,7 @@ export const CreateStorageClass: React.FC<CreateStorageClassProps> = ({
   );
 
   return (
-    <Form>
+    <Form className="odf-create-storage-class__form">
       <FormGroup label={t('ceph-storage-plugin~StorageClass name')} fieldId="storage-class-name">
         <TextInput
           id="storage-class-name"
@@ -44,6 +52,11 @@ export const CreateStorageClass: React.FC<CreateStorageClassProps> = ({
           }
         />
       </FormGroup>
+      <TextContent>
+        <Text component={TextVariants.h4}>
+          {t('ceph-storage-plugin~{{displayName}} connection details', { displayName })}
+        </Text>
+      </TextContent>
       {Component && <Component setFormState={setForm} formState={state} />}
     </Form>
   );

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/index.ts

@@ -1,7 +1,7 @@
 export { BackingStorage } from './backing-storage-step/backing-storage-step';
 export { CapacityAndNodes } from './capacity-and-nodes-step/capacity-and-nodes-step';
 export { ConnectionDetails } from './connection-details-step';
-export { CreateStorageClass } from './create-storage-class-step';
+export { CreateStorageClass } from './create-storage-class-step/create-storage-class-step';
 export { ReviewAndCreate } from './review-and-create-step/review-and-create-step';
-export { CreateLocalVolumeSet } from './create-local-volume-set/create-local-volume-set-step';
+export { CreateLocalVolumeSet } from './create-local-volume-set-step/create-local-volume-set-step';
 export { SecurityAndNetwork } from './security-and-network-step/security-and-network-step';

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system.tsx

@@ -20,7 +20,7 @@ const CreateStorageSystem: React.FC<CreateStorageSystemProps> = ({ match }) => {
     StorageSystemModel,
   );
 
-  const { url } = match;
+  const { url, params } = match;
 
   let wizardSteps: WizardStep[] = [];
   let hasOCS: boolean = false;
@@ -60,6 +60,7 @@ const CreateStorageSystem: React.FC<CreateStorageSystemProps> = ({ match }) => {
             hasOCS={hasOCS}
             dispatch={dispatch}
             disableNext={!ssLoaded || !!ssLoadError}
+            appName={params.appName}
           />
         }
         cancelButtonText={t('ceph-storage-plugin~Cancel')}

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/ibm-flashsystem/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Form,
   FormGroup,
   TextInput,
   InputGroup,
@@ -33,7 +32,7 @@ export const FlashSystemConnectionDetails: React.FC<ExternalComponentProps<Flash
   };
 
   return (
-    <Form>
+    <>
       <FormGroup
         label={t('ceph-storage-plugin~Endpoint')}
         fieldId="endpoint-input"
@@ -81,7 +80,7 @@ export const FlashSystemConnectionDetails: React.FC<ExternalComponentProps<Flash
           </Tooltip>
         </InputGroup>
       </FormGroup>
-      <FormGroup label={t('ceph-storage-plugin~Poolname')} isRequired fieldId="poolname-input">
+      <FormGroup label={t('ceph-storage-plugin~Pool name')} isRequired fieldId="poolname-input">
         <TextInput
           id="poolname-input"
           value={formState.poolname}
@@ -90,11 +89,11 @@ export const FlashSystemConnectionDetails: React.FC<ExternalComponentProps<Flash
           isRequired
         />
       </FormGroup>
-    </Form>
+    </>
   );
 };
 
-export const FlashSystemPayload: CreatePayload<FlashSystemState> = (
+export const createFlashSystemPayload: CreatePayload<FlashSystemState> = (
   systemName,
   form,
   model,
@@ -161,5 +160,5 @@ export const FlashSystemPayload: CreatePayload<FlashSystemState> = (
   return [secretPayload, flashSystemPayload];
 };
 
-export const FlashSystemCanGoToNextStep: CanGoToNextStep<FlashSystemState> = (state) =>
+export const flashSystemCanGoToNextStep: CanGoToNextStep<FlashSystemState> = (state) =>
   !!state.endpoint && !!state.username && !!state.password && !!state.poolname;

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/ibm-flashsystem/models.ts

@@ -5,7 +5,7 @@ export const IBMFlashSystemModel: K8sKind = {
   labelPlural: 'IBM Flash Systems',
   apiVersion: 'v1alpha1',
   apiGroup: 'odf.ibm.com',
-  plural: 'FlashSystemclusters',
+  plural: 'flashsystemclusters',
   abbr: 'FS',
   namespaced: true,
   kind: 'FlashSystemCluster',

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/external-storage/index.ts

@@ -1,9 +1,9 @@
 import { ExternalStorage } from './types';
 import { rhcsCanGoToNextStep, ConnectionDetails, rhcsPayload } from './red-hat-ceph-storage';
 import {
-  FlashSystemCanGoToNextStep,
+  flashSystemCanGoToNextStep,
   FlashSystemConnectionDetails,
-  FlashSystemPayload,
+  createFlashSystemPayload,
 } from './ibm-flashsystem/index';
 import { IBMFlashSystemModel } from './ibm-flashsystem/models';
 import { OCSServiceModel } from '../../../models';
@@ -30,7 +30,7 @@ export const SUPPORTED_EXTERNAL_STORAGE: ExternalStorage[] = [
       plural: IBMFlashSystemModel.plural,
     },
     Component: FlashSystemConnectionDetails,
-    createPayload: FlashSystemPayload,
-    canGoToNextStep: FlashSystemCanGoToNextStep,
+    createPayload: createFlashSystemPayload,
+    canGoToNextStep: flashSystemCanGoToNextStep,
   },
 ];

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/footer.tsx

@@ -10,8 +10,9 @@ import {
   Alert,
   AlertActionCloseButton,
 } from '@patternfly/react-core';
-import { k8sCreate, K8sKind } from '@console/internal/module/k8s';
+import { k8sCreate, K8sKind, referenceForModel } from '@console/internal/module/k8s';
 import { history } from '@console/internal/components/utils';
+import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager/src';
 import { WizardCommonProps, WizardState } from './reducer';
 import {
   createNoobaaPayload,
@@ -26,14 +27,14 @@ import {
   StepsName,
   StorageClusterSystemName,
 } from '../../constants/create-storage-system';
-import { OCSServiceModel } from '../../models';
+import { OCSServiceModel, StorageSystemModel } from '../../models';
 import './create-storage-system.scss';
 import {
   getExternalStorage,
   getStorageSystemKind,
   createExternalSSName,
 } from '../../utils/create-storage-system';
-import { MINIMUM_NODES } from '../../constants';
+import { CEPH_STORAGE_NAMESPACE, MINIMUM_NODES } from '../../constants';
 import { NetworkType } from '../../types';
 import { labelOCSNamespace } from '../ocs-install/ocs-request-data';
 
@@ -156,6 +157,7 @@ export const CreateStorageSystemFooter: React.FC<CreateStorageSystemFooterProps>
   state,
   disableNext,
   hasOCS,
+  appName,
 }) => {
   const { t } = useTranslation();
   const { activeStep, onNext, onBack } = React.useContext<WizardContextType>(WizardContext);
@@ -181,7 +183,13 @@ export const CreateStorageSystemFooter: React.FC<CreateStorageSystemFooterProps>
           type: 'wizard/setStepIdReached',
           payload: state.stepIdReached <= stepId ? stepId + 1 : state.stepIdReached,
         });
-        onNext();
+        stepName === StepsName(t)[Steps.ReviewAndCreate]
+          ? history.push(
+              `/k8s/ns/${CEPH_STORAGE_NAMESPACE}/${referenceForModel(
+                ClusterServiceVersionModel,
+              )}/${appName}/${referenceForModel(StorageSystemModel)}`,
+            )
+          : onNext();
       } catch (err) {
         setRequestError(err.message);
         setShowErrorAlert(true);
@@ -241,4 +249,5 @@ export const CreateStorageSystemFooter: React.FC<CreateStorageSystemFooterProps>
 type CreateStorageSystemFooterProps = WizardCommonProps & {
   disableNext: boolean;
   hasOCS: boolean;
+  appName: string;
 };