F #5516: Change vm backup to be a stepper (#2355)

src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/index.js

@@ -0,0 +1,59 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2022, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+/* eslint-disable jsdoc/require-jsdoc */
+import PropTypes from 'prop-types'
+
+import FormWithSchema from 'client/components/Forms/FormWithSchema'
+
+import {
+  SCHEMA,
+  FIELDS,
+} from 'client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema'
+import { Step } from 'client/utils'
+import { T } from 'client/constants'
+
+export const STEP_ID = 'configuration'
+
+const Content = (props) => (
+  <FormWithSchema
+    cy="restore-configuration"
+    id={STEP_ID}
+    fields={() => FIELDS(props)}
+  />
+)
+
+/**
+ * Step to configure the marketplace app.
+ *
+ * @param {object} isMultiple - is multiple rows
+ * @returns {Step} Configuration step
+ */
+const ConfigurationStep = (isMultiple) => ({
+  id: STEP_ID,
+  label: T.Configuration,
+  resolver: () => SCHEMA(isMultiple),
+  optionsValidate: { abortEarly: false },
+  content: () => Content(isMultiple),
+})
+
+Content.propTypes = {
+  data: PropTypes.any,
+  setFormData: PropTypes.func,
+  nics: PropTypes.array,
+  isMultiple: PropTypes.bool,
+}
+
+export default ConfigurationStep

src/fireedge/src/client/components/Forms/Vm/BackupForm/schema.js → src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration/schema.js

@@ -13,42 +13,26 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { number, object, boolean } from 'yup'
-import { getValidationFromFields, arrayToOptions } from 'client/utils'
+import { boolean, object, ObjectSchema } from 'yup'
+import { Field, getValidationFromFields } from 'client/utils'
 import { T, INPUT_TYPES } from 'client/constants'
-import { useGetDatastoresQuery } from 'client/features/OneApi/datastore'
-
-const DS_ID = {
-  name: 'dsId',
-  label: T.BackupDatastore,
-  type: INPUT_TYPES.SELECT,
-  values: () => {
-    const { data: datastores = [] } = useGetDatastoresQuery()
-
-    return arrayToOptions(
-      datastores.filter(({ TEMPLATE }) => TEMPLATE.TYPE === 'BACKUP_DS'),
-      {
-        addEmpty: true,
-        getText: ({ NAME, ID } = {}) => `${ID}: ${NAME}`,
-        getValue: ({ ID } = {}) => parseInt(ID),
-      }
-    )
-  },
-  validation: number()
-    .positive()
-    .required()
-    .default(() => undefined)
-    .transform((_, val) => parseInt(val)),
-}
 
 const RESET = {
   name: 'reset',
   label: T.ResetBackup,
   type: INPUT_TYPES.SWITCH,
   validation: boolean(),
-  grid: { xs: 12 },
+  grid: { xs: 12, md: 6 },
 }
 
-export const FIELDS = [RESET, DS_ID]
+/**
+ * @returns {Field[]} Fields
+ */
+export const FIELDS = () => [RESET]
 
-export const SCHEMA = object(getValidationFromFields(FIELDS))
+/**
+ * @param {object} [stepProps] - Step props
+ * @returns {ObjectSchema} Schema
+ */
+export const SCHEMA = (stepProps) =>
+  object(getValidationFromFields(FIELDS(stepProps)))

src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/index.js

@@ -0,0 +1,72 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2022, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import PropTypes from 'prop-types'
+import { useFormContext } from 'react-hook-form'
+
+import { DatastoresTable } from 'client/components/Tables'
+import { SCHEMA } from 'client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema'
+
+import { Step } from 'client/utils'
+import { T } from 'client/constants'
+
+export const STEP_ID = 'datastore'
+
+const Content = ({ data, app }) => {
+  const { NAME } = data?.[0] ?? {}
+  const { setValue } = useFormContext()
+
+  const handleSelectedRows = (rows) => {
+    const { original = {} } = rows?.[0] ?? {}
+
+    setValue(STEP_ID, original.ID !== undefined ? [original] : [])
+  }
+
+  return (
+    <DatastoresTable
+      singleSelect
+      disableGlobalSort
+      displaySelectedRows
+      pageSize={5}
+      getRowId={(row) => String(row.NAME)}
+      initialState={{
+        selectedRowIds: { [NAME]: true },
+        filters: [{ id: 'TYPE', value: 'BACKUP_DS' }],
+      }}
+      onSelectedRowsChange={handleSelectedRows}
+    />
+  )
+}
+
+/**
+ * Step to select the Datastore.
+ *
+ * @param {object} app - Marketplace App resource
+ * @returns {Step} Datastore step
+ */
+const DatastoreStep = (app) => ({
+  id: STEP_ID,
+  label: T.SelectDatastoreImage,
+  resolver: SCHEMA,
+  content: (props) => Content({ ...props, app }),
+})
+
+Content.propTypes = {
+  data: PropTypes.any,
+  setFormData: PropTypes.func,
+  app: PropTypes.object,
+}
+
+export default DatastoreStep

src/fireedge/src/client/components/Forms/Vm/BackupForm/Steps/DatastoresTable/schema.js

@@ -0,0 +1,24 @@
+/* ------------------------------------------------------------------------- *
+ * Copyright 2002-2022, OpenNebula Project, OpenNebula Systems               *
+ *                                                                           *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may   *
+ * not use this file except in compliance with the License. You may obtain   *
+ * a copy of the License at                                                  *
+ *                                                                           *
+ * http://www.apache.org/licenses/LICENSE-2.0                                *
+ *                                                                           *
+ * Unless required by applicable law or agreed to in writing, software       *
+ * distributed under the License is distributed on an "AS IS" BASIS,         *
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  *
+ * See the License for the specific language governing permissions and       *
+ * limitations under the License.                                            *
+ * ------------------------------------------------------------------------- */
+import { array, object, ArraySchema } from 'yup'
+
+/** @type {ArraySchema} Datastore table schema */
+export const SCHEMA = array(object())
+  .min(1)
+  .max(1)
+  .required()
+  .ensure()
+  .default(() => [])

src/fireedge/src/client/components/Forms/Vm/BackupForm/index.js

@@ -13,9 +13,29 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { SCHEMA, FIELDS } from 'client/components/Forms/Vm/BackupForm/schema'
-import { createForm } from 'client/utils'
+import BasicConfiguration, {
+  STEP_ID as BASIC_ID,
+} from 'client/components/Forms/Vm/BackupForm/Steps/BasicConfiguration'
+import DatastoresTable, {
+  STEP_ID as DATASTORE_ID,
+} from 'client/components/Forms/Vm/BackupForm/Steps/DatastoresTable'
+import { createSteps } from 'client/utils'
 
-const BackupForm = createForm(SCHEMA, FIELDS)
+const Steps = createSteps(
+  (app) => [BasicConfiguration, DatastoresTable].filter(Boolean),
+  {
+    transformInitialValue: (app, schema) =>
+      schema.cast({}, { context: { app } }),
+    transformBeforeSubmit: (formData) => {
+      const { [BASIC_ID]: configuration, [DATASTORE_ID]: [datastore] = [] } =
+        formData
 
-export default BackupForm
+      return {
+        dsId: datastore?.ID,
+        ...configuration,
+      }
+    },
+  }
+)
+
+export default Steps