ARTESCA-3019: Handle the case of edit oracle location

src/react/locations/LocationDetails/LocationDetailsOracle.tsx

@@ -29,14 +29,28 @@ const INIT_STATE: State = {
 export const oracleCloudEndpointBuilder = (namespace: string, region: string) =>
   `https://${namespace}.compat.objectstorage.${region}.oraclecloud.com`;
 
+export const getNamespaceAndRegion = (endpoint: string) => {
+  if (!endpoint) return { namespace: '', region: '' };
+  const regex =
+    /https:\/\/(?<namespace>.+)\.compat\.objectstorage\.(?<region>.+).oraclecloud.com/;
+  const parts = endpoint.match(regex);
+  return {
+    namespace: parts.groups['namespace'],
+    region: parts.groups['region'],
+  };
+};
+
 export default function LocationDetailsOracle({
   details,
   editingExisting,
   onChange,
 }: LocationDetailsFormProps) {
   const [formState, setFormState] = useState<State>(() => {
     return {
-      ...Object.assign({}, INIT_STATE, details, { secretKey: '' }),
+      ...Object.assign({}, INIT_STATE, details, {
+        secretKey: '',
+        ...getNamespaceAndRegion(details.endpoint),
+      }),
     };
   });
   const onFormItemChange = (e: React.ChangeEvent<HTMLInputElement>) => {

src/react/locations/LocationDetails/__tests__/LocationDetailsOracle.test.tsx

@@ -11,37 +11,65 @@ const selectors = {
   accessKeySelector: () => screen.getByLabelText(/Access Key/),
   secretKeySelector: () => screen.getByLabelText(/Secret Key/),
 };
-const props = {
-  details: {},
-  onChange: () => {},
-  locationType: ORACLE_CLOUD_LOCATION_KEY,
-};
+
 const namespace = 'namespace';
 const region = 'eu-paris-1';
-describe('class <LocationDetailsOracle />', () => {
-  it('should call onChange on mount', async () => {
+const targetBucketName = 'target-bucket';
+const accessKey = 'accessKey';
+const secretKey = 'secretKey';
+
+describe('LocationDetailsOracle', () => {
+  it('should call onChange with the expected props', async () => {
     //S
+    const props = {
+      details: {},
+      onChange: () => {},
+      locationType: ORACLE_CLOUD_LOCATION_KEY,
+    };
     let location = {};
     render(
       //@ts-ignore
       <LocationDetailsOracle {...props} onChange={(l) => (location = l)} />,
       { wrapper: Wrapper },
     );
-    waitFor(() => {
+    await waitFor(() => {
       expect(selectors.namespaceSelector()).toBeInTheDocument();
     });
     //E
     await userEvent.type(selectors.namespaceSelector(), namespace);
     await userEvent.type(selectors.regionSelector(), region);
-    await userEvent.type(selectors.targetBucketSelector(), 'target-bucket');
-    await userEvent.type(selectors.accessKeySelector(), 'accessKey');
-    await userEvent.type(selectors.secretKeySelector(), 'secretKey');
+    await userEvent.type(selectors.targetBucketSelector(), targetBucketName);
+    await userEvent.type(selectors.accessKeySelector(), accessKey);
+    await userEvent.type(selectors.secretKeySelector(), secretKey);
     expect(location).toEqual({
       bucketMatch: false,
       endpoint: `https://${namespace}.compat.objectstorage.${region}.oraclecloud.com`,
-      bucketName: 'target-bucket',
-      accessKey: 'accessKey',
-      secretKey: 'secretKey',
+      bucketName: targetBucketName,
+      accessKey: accessKey,
+      secretKey: secretKey,
+    });
+  });
+  it('should render the namespace and region while editing', async () => {
+    //S
+    const editProps = {
+      details: {
+        endpoint: `https://${namespace}.compat.objectstorage.${region}.oraclecloud.com`,
+        bucketName: targetBucketName,
+        accessKey: accessKey,
+        secretKey: secretKey,
+      },
+      onChange: () => {},
+      locationType: ORACLE_CLOUD_LOCATION_KEY,
+    };
+    render(
+      //@ts-ignore
+      <LocationDetailsOracle {...editProps} onChange={(l) => (location = l)} />,
+      { wrapper: Wrapper },
+    );
+    //V
+    await waitFor(() => {
+      expect(selectors.namespaceSelector()).toHaveValue(namespace);
     });
+    expect(selectors.regionSelector()).toHaveValue(region);
   });
 });

src/react/utils/storageOptions.ts

@@ -8,6 +8,7 @@ import {
   JAGUAR_S3_ENDPOINT,
   JAGUAR_S3_LOCATION_KEY,
   Location as LegacyLocation,
+  ORACLE_CLOUD_LOCATION_KEY,
   ORANGE_S3_ENDPOINT,
   ORANGE_S3_LOCATION_KEY,
   OUTSCALE_PUBLIC_S3_ENDPOINT,
@@ -34,8 +35,8 @@ export function checkIfExternalLocation(locations: LocationInfo[]): boolean {
 /**
  * Retrieve the `LocationTypeKey` so that it can be use to to get the right
  * storage option.
- * The `JAGUAR_S3_LOCATION_KEY` and `ORANGE_S3_LOCATION_KEY` work like
- * `location-scality-ring-s3-v1` in the UI with predefine values but are not
+ * The `JAGUAR_S3_LOCATION_KEY`,`ORANGE_S3_LOCATION_KEY` and `ORACLE_CLOUD_LOCATION_KEY`
+ * work like `location-scality-ring-s3-v1` in the UI with predefine values but are not
  * implemented in the backend.
  *
  * We need to add extra logic because changing the backend is expensive.
@@ -65,6 +66,8 @@ export const getLocationTypeKey = (
         return OUTSCALE_PUBLIC_S3_LOCATION_KEY;
       } else if (location.details.endpoint === OUTSCALE_SNC_S3_ENDPOINT) {
         return OUTSCALE_SNC_S3_LOCATION_KEY;
+      } else if (location.details.endpoint.endsWith('oraclecloud.com')) {
+        return ORACLE_CLOUD_LOCATION_KEY;
       } else {
         return 'locationType' in location
           ? location.locationType