port over change from #10394 to release 4.9

frontend/packages/ceph-storage-plugin/console-extensions.json

@@ -152,40 +152,40 @@
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/:resourceKind/:resourceName",
+      "path": "/odf/resource/noobaa.io~v1alpha1~BackingStore/create/~new",
       "exact": true,
       "component": {
-        "$codeRef": "resourceDetailsPage.GenericDetailsPage"
+        "$codeRef": "bsCreate.default"
       }
     }
   },
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~BackingStore/create/~new",
+      "path": "/odf/resource/noobaa.io~v1alpha1~NamespaceStore/create/~new",
       "exact": true,
       "component": {
-        "$codeRef": "bsCreate.default"
+        "$codeRef": "nssCreate.default"
       }
     }
   },
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~NamespaceStore/create/~new",
+      "path": "/odf/resource/noobaa.io~v1alpha1~BucketClass/create/~new",
       "exact": true,
       "component": {
-        "$codeRef": "nssCreate.default"
+        "$codeRef": "bcCreate.default"
       }
     }
   },
   {
     "type": "console.page/route",
     "properties": {
-      "path": "/odf/resource/noobaa.io~v1alpha1~BucketClass/create/~new",
-      "exact": true,
+      "path": "/odf/resource/:resourceKind/:resourceName",
+      "exact": false,
       "component": {
-        "$codeRef": "bcCreate.default"
+        "$codeRef": "resourceDetailsPage.GenericDetailsPage"
       }
     }
   },

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

@@ -152,6 +152,7 @@
   "Advanced Subscription": "Advanced Subscription",
   "Advanced": "Advanced",
   "Deployment type": "Deployment type",
+  "A default StorageClass is needed for deployment.": "A default StorageClass is needed for deployment.",
   "Storage platform": "Storage platform",
   "Select a storage platform you wish to connect": "Select a storage platform you wish to connect",
   "Select external system from list": "Select external system from list",
@@ -661,9 +662,8 @@
   "Last updated": "Last updated",
   "Storage Systems": "Storage Systems",
   "Used capacity": "Used capacity",
-  "Storage status represents the health status of Openshift Data Foundation's StorageCluster.": "Storage status represents the health status of Openshift Data Foundation's StorageCluster.",
+  "Storage status represents the health status of {{operatorName}}'s StorageCluster.": "Storage status represents the health status of {{operatorName}}'s StorageCluster.",
   "Health": "Health",
-  "Openshift Data Foundation": "Openshift Data Foundation",
   "Standard": "Standard",
   "Data will be consumed by a Multi-cloud object gateway, deduped, compressed, and encrypted. The encrypted chunks would be saved on the selected BackingStores. Best used when the applications would always use the OpenShift Data Foundation endpoints to access the data.": "Data will be consumed by a Multi-cloud object gateway, deduped, compressed, and encrypted. The encrypted chunks would be saved on the selected BackingStores. Best used when the applications would always use the OpenShift Data Foundation endpoints to access the data.",
   "Data is stored on the NamespaceStores without performing de-duplication, compression, or encryption. BucketClasses of namespace type allow connecting to existing data and serving from them. These are best used for existing data or when other applications (and cloud-native services) need to access the data from outside OpenShift Container Storage.": "Data is stored on the NamespaceStores without performing de-duplication, compression, or encryption. BucketClasses of namespace type allow connecting to existing data and serving from them. These are best used for existing data or when other applications (and cloud-native services) need to access the data from outside OpenShift Container Storage.",

frontend/packages/ceph-storage-plugin/src/components/bucket-class/create-bc.tsx

@@ -12,7 +12,7 @@ import {
 import { history } from '@console/internal/components/utils/router';
 import { BreadCrumbs, resourcePathFromModel } from '@console/internal/components/utils';
 import { ClusterServiceVersionModel } from '@console/operator-lifecycle-manager';
-import { getName } from '@console/shared';
+import { getName, useFlag } from '@console/shared';
 import GeneralPage from './wizard-pages/general-page';
 import PlacementPolicyPage from './wizard-pages/placement-policy-page';
 import BackingStorePage from './wizard-pages/backingstore-page';
@@ -27,6 +27,7 @@ import { BucketClassType, NamespacePolicyType } from '../../constants/bucket-cla
 import { validateBucketClassName, validateDuration } from '../../utils/bucket-class';
 import { NooBaaBucketClassModel } from '../../models';
 import { PlacementPolicy } from '../../types';
+import { ODF_MODEL_FLAG, CEPH_STORAGE_NAMESPACE } from '../../constants';
 
 enum CreateStepsBC {
   GENERAL = 'GENERAL',
@@ -38,8 +39,9 @@ enum CreateStepsBC {
 const CreateBucketClass: React.FC<CreateBCProps> = ({ match }) => {
   const { t } = useTranslation();
   const [state, dispatch] = React.useReducer(reducer, initialState);
-  const { ns, appName } = match.params;
+  const { ns = CEPH_STORAGE_NAMESPACE, appName } = match.params;
   const [clusterServiceVersion, setClusterServiceVersion] = React.useState(null);
+  const isODF = useFlag(ODF_MODEL_FLAG);
 
   React.useEffect(() => {
     k8sGet(ClusterServiceVersionModel, appName, ns)
@@ -156,12 +158,15 @@ const CreateBucketClass: React.FC<CreateBCProps> = ({ match }) => {
     const promiseObj = k8sCreate(NooBaaBucketClassModel, payload);
     promiseObj
       .then((obj) => {
+        const resourcePath = `${referenceForModel(NooBaaBucketClassModel)}/${getName(obj)}`;
         dispatch({ type: 'setIsLoading', value: false });
-        history.push(
-          `/k8s/ns/${ns}/clusterserviceversions/${getName(
-            clusterServiceVersion,
-          )}/${referenceForModel(NooBaaBucketClassModel)}/${getName(obj)}`,
-        );
+        isODF
+          ? history.push(`/odf/resource/${resourcePath}`)
+          : history.push(
+              `/k8s/ns/${ns}/clusterserviceversions/${getName(
+                clusterServiceVersion,
+              )}/${resourcePath}`,
+            );
       })
       .catch((err) => {
         dispatch({ type: 'setIsLoading', value: false });

frontend/packages/ceph-storage-plugin/src/components/create-backingstore-page/create-bs.tsx

@@ -10,7 +10,7 @@ import {
 } from '@console/internal/components/utils';
 import { apiVersionForModel, k8sCreate, referenceForModel } from '@console/internal/module/k8s';
 import { ModalComponentProps } from '@console/internal/components/factory';
-import { getName } from '@console/shared';
+import { getName, useFlag } from '@console/shared';
 import { SecretModel } from '@console/internal/models';
 import { history } from '@console/internal/components/utils/router';
 import { CEPH_STORAGE_NAMESPACE } from '@console/ceph-storage-plugin/src/constants';
@@ -22,6 +22,7 @@ import {
   NOOBAA_TYPE_MAP,
   PROVIDERS_NOOBAA_MAP,
   BUCKET_LABEL_NOOBAA_MAP,
+  ODF_MODEL_FLAG,
 } from '../../constants';
 import { getExternalProviders, getProviders, secretPayloadCreator } from '../../utils/noobaa-utils';
 import { Payload } from '../../types';
@@ -43,6 +44,7 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
     providerDataReducer,
     initialState,
   );
+  const isODF = useFlag(ODF_MODEL_FLAG);
 
   const handleBsNameTextInputChange = (strVal: string) => {
     if (strVal.length <= 43) {
@@ -59,7 +61,7 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
     handlePromise,
     isPage,
     appName,
-    namespace,
+    namespace = CEPH_STORAGE_NAMESPACE,
   } = props;
 
   const onSubmit = (event) => {
@@ -134,12 +136,13 @@ const CreateBackingStoreForm: React.FC<CreateBackingStoreFormProps> = withHandle
     promises.push(k8sCreate(NooBaaBackingStoreModel, bsPayload));
     return handlePromise(Promise.all(promises), (resource) => {
       const lastIndex = resource.length - 1;
+      const resourcePath = `${referenceForModel(NooBaaBackingStoreModel)}/${getName(
+        resource[lastIndex],
+      )}`;
       if (isPage)
-        history.push(
-          `/k8s/ns/${namespace}/clusterserviceversions/${appName}/${referenceForModel(
-            NooBaaBackingStoreModel,
-          )}/${getName(resource[lastIndex])}`,
-        );
+        isODF
+          ? history.push(`/odf/resource/${resourcePath}`)
+          : history.push(`/k8s/ns/${namespace}/clusterserviceversions/${appName}/${resourcePath}`);
       else close();
     });
   };

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

@@ -9,6 +9,8 @@ import {
   SelectProps,
   SelectVariant,
 } from '@patternfly/react-core';
+import { StorageClassResourceKind } from '@console/internal/module/k8s';
+import { isDefaultClass } from '@console/internal/components/storage-class';
 import { DeploymentType } from '../../../../constants/create-storage-system';
 import { WizardDispatch, WizardState } from '../../reducer';
 import './backing-storage-step.scss';
@@ -19,7 +21,9 @@ export const AdvancedSection: React.FC<AdvancedSelectionProps> = ({
   deployment,
   isAdvancedOpen,
   dispatch,
-  hasOCS,
+  isDisabled,
+  scList,
+  isValidSC,
   currentStep,
 }) => {
   const { t } = useTranslation();
@@ -33,6 +37,12 @@ export const AdvancedSection: React.FC<AdvancedSelectionProps> = ({
        */
       dispatch({ type: 'wizard/setInitialState' });
     }
+    const defaultSC = scList.find(isDefaultClass);
+    dispatch({
+      type: 'backingStorage/setIsValidSC',
+      // 'value' on SelectProps['onSelect'] is string hence not matching with payload which is of "DeploymentType"
+      payload: value === DeploymentType.MCG ? !!defaultSC : true,
+    });
     dispatch({
       type: 'backingStorage/setDeployment',
       // 'value' on SelectProps['onSelect'] is string hence not matching with payload which is of "DeploymentType"
@@ -55,15 +65,22 @@ export const AdvancedSection: React.FC<AdvancedSelectionProps> = ({
       onToggle={handleExpanadableToggling}
       isExpanded={isAdvancedOpen}
     >
-      <FormGroup label={t('ceph-storage-plugin~Deployment type')} fieldId="deployment-type">
+      <FormGroup
+        label={t('ceph-storage-plugin~Deployment type')}
+        fieldId="deployment-type"
+        validated={isValidSC ? 'default' : 'error'}
+        helperTextInvalid={t(
+          'ceph-storage-plugin~A default StorageClass is needed for deployment.',
+        )}
+      >
         <Select
           className="odf-backing-storage__selection--width"
           variant={SelectVariant.single}
           onToggle={handleToggling}
           onSelect={handleSelection}
           selections={deployment}
           isOpen={isSelectOpen}
-          isDisabled={hasOCS}
+          isDisabled={isDisabled}
         >
           {selectOptions}
         </Select>
@@ -76,6 +93,8 @@ type AdvancedSelectionProps = {
   dispatch: WizardDispatch;
   deployment: WizardState['backingStorage']['deployment'];
   isAdvancedOpen: WizardState['backingStorage']['isAdvancedOpen'];
-  hasOCS: boolean;
+  isValidSC: WizardState['backingStorage']['isValidSC'];
+  scList: StorageClassResourceKind[];
   currentStep: number;
+  isDisabled: boolean;
 };

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

@@ -1,5 +1,10 @@
-.odf-backing-storage__selection--width {
-    width: 22rem;
+.odf-backing-storage__selection {
+    &--width {
+        width: 22rem;
+    }
+    &--spacer {
+        margin-right: var(--pf-global--spacer--md);
+    }
 }
 
 .odf-backing-storage__deployment-type {

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { useTranslation } from 'react-i18next';
-import { useFlag } from '@console/shared/src';
+import { useFlag, DevPreviewBadge } from '@console/shared/src';
 import {
   Form,
   FormGroup,
@@ -19,7 +19,7 @@ import {
   ClusterServiceVersionModel,
 } from '@console/operator-lifecycle-manager/src';
 import { AdvancedSection } from './advanced-section';
-import { SUPPORTED_EXTERNAL_STORAGE } from '../../external-storage';
+import { SUPPORTED_EXTERNAL_STORAGE, isStorageProviderDevPreview } from '../../external-storage';
 import { StorageSystemKind } from '../../../../types';
 import {
   getODFCsv,
@@ -76,13 +76,14 @@ const ExternalSystemSelection: React.FC<ExternalSystemSelectionProps> = ({
         aria-label={t('ceph-storage-plugin~Select external system from list')}
         value={selectedStorage}
         id="storage-platform-name"
-        className="odf-backing-storage__selection--width"
+        className="odf-backing-storage__selection--width  odf-backing-storage__selection--spacer"
         onChange={handleSelection}
       >
         {selectOptions.map(({ displayName, model: { kind } }) => (
           <FormSelectOption key={kind} value={kind} label={displayName} />
         ))}
       </FormSelect>
+      {isStorageProviderDevPreview(selectedStorage) && <DevPreviewBadge />}
     </FormGroup>
   );
 };
@@ -163,7 +164,7 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
         })
       : SUPPORTED_EXTERNAL_STORAGE;
 
-  const { type, externalStorage, deployment, isAdvancedOpen } = state;
+  const { type, externalStorage, deployment, isAdvancedOpen, isValidSC } = state;
 
   React.useEffect(() => {
     /*
@@ -295,7 +296,9 @@ export const BackingStorage: React.FC<BackingStorageProps> = ({
             dispatch={dispatch}
             deployment={deployment}
             isAdvancedOpen={isAdvancedOpen}
-            hasOCS={hasOCS}
+            isDisabled={hasOCS}
+            scList={sc?.items}
+            isValidSC={isValidSC}
             currentStep={stepIdReached}
           />
         )}

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/capacity-and-nodes-step/capacity-and-nodes-step.tsx

@@ -260,7 +260,7 @@ export const CapacityAndNodes: React.FC<CapacityAndNodesProps> = ({
 
   const isNoProvisioner = storageClass.provisioner === NO_PROVISIONER;
 
-  const validations = capacityAndNodesValidate(nodes, enableArbiter);
+  const validations = capacityAndNodesValidate(nodes, enableArbiter, isNoProvisioner);
 
   return (
     <Form>

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/body.tsx

@@ -208,7 +208,7 @@ export const LocalVolumeSetBody: React.FC<LocalVolumeSetBodyProps> = ({
             items={diskModeDropdownItems}
             title={state.diskMode}
             selectedKey={state.diskMode}
-            onChange={(mode: string) => formHandler('diskMode', mode)}
+            onChange={(mode: string) => formHandler('diskMode', diskModeDropdownItems[mode])}
           />
         </FormGroup>
         <FormGroup

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/create-local-volume-set-step.tsx

@@ -38,7 +38,13 @@ import { LocalVolumeSetBody } from './body';
 import { SelectedCapacity } from './selected-capacity';
 import { createWizardNodeState } from '../../../../utils/create-storage-system';
 import { GUARDED_FEATURES } from '../../../../features';
-import { arbiterText, LSO_OPERATOR, MINIMUM_NODES, OCS_TOLERATION } from '../../../../constants';
+import {
+  arbiterText,
+  LSO_OPERATOR,
+  MINIMUM_NODES,
+  NO_PROVISIONER,
+  OCS_TOLERATION,
+} from '../../../../constants';
 import { ErrorHandler } from '../../error-handler';
 import { WizardDispatch, WizardNodeState, WizardState } from '../../reducer';
 import { useFetchCsv } from '../../use-fetch-csv';
@@ -59,6 +65,7 @@ const makeLocalVolumeSetCall = (
   ns: string,
   onNext: () => void,
   lvsNodes: WizardState['nodes'],
+  dispatch: WizardDispatch,
 ) => {
   setInProgress(true);
 
@@ -73,6 +80,12 @@ const makeLocalVolumeSetCall = (
   k8sCreate(LocalVolumeSetModel, requestData)
     .then(() => {
       setInProgress(false);
+      if (!storageClassName) {
+        dispatch({
+          type: 'wizard/setStorageClass',
+          payload: { name: state.volumeSetName, provisioner: NO_PROVISIONER },
+        });
+      }
       onNext();
     })
     .catch((err) => {
@@ -306,6 +319,7 @@ const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
       ns,
       handleNext,
       nodes,
+      dispatch,
     );
   };
 

frontend/packages/ceph-storage-plugin/src/components/create-storage-system/create-storage-system-steps/create-local-volume-set-step/selected-capacity.tsx

@@ -40,8 +40,8 @@ const isValidDiskProperty = (disk: DiscoveredDisk, property: DiskMetadata['prope
 const isValidDeviceType = (disk: DiscoveredDisk, types: string[]) =>
   types.includes(deviceTypeDropdownItems[disk.type.toUpperCase()]);
 
-const addNodesOnAvailableDisks = (disks: DiskMetadata[], node: string) =>
-  disks?.reduce((availableDisks: DiscoveredDisk[], disk: DiscoveredDisk) => {
+const addNodesOnAvailableDisks = (disks: DiskMetadata[] = [], node: string) =>
+  disks.reduce((availableDisks: DiscoveredDisk[], disk: DiscoveredDisk) => {
     if (isAvailableDisk(disk)) {
       disk.node = node;
       return [disk, ...availableDisks];
@@ -53,7 +53,7 @@ const createDiscoveredDiskData = (results: LocalVolumeDiscoveryResultKind[]): Di
   results?.reduce((discoveredDisk: DiscoveredDisk[], lvdr) => {
     const lvdrDisks = lvdr?.status?.discoveredDevices;
     const lvdrNode = lvdr?.spec?.nodeName;
-    const availableDisks = addNodesOnAvailableDisks(lvdrDisks, lvdrNode);
+    const availableDisks = addNodesOnAvailableDisks(lvdrDisks, lvdrNode) || [];
     return [...availableDisks, ...discoveredDisk];
   }, []);
 

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

@@ -63,7 +63,6 @@ const CreateStorageSystem: React.FC<CreateStorageSystemProps> = ({ match }) => {
             state={state}
             hasOCS={hasOCS}
             dispatch={dispatch}
-            storageSystems={ssList?.items}
             disableNext={!ssLoaded || !!ssLoadError}
           />
         }