F #7138: Update vrouter download modal (#3728)

Signed-off-by: Victor Hansson <vhansson@opennebula.io>
(cherry picked from commit ac8c7bd)

Author: vichansson

src/fireedge/src/modules/components/Forms/MarketplaceApp/ExportForm/Steps/DatastoresTable/schema.js

@@ -13,11 +13,12 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
+import { T } from '@ConstantsModule'
 import { array, object, ArraySchema } from 'yup'
 
 /** @type {ArraySchema} Datastore table schema */
 export const SCHEMA = array(object())
-  .min(1)
+  .min(1, T.SelectADatastore)
   .max(1)
   .required()
   .ensure()

src/fireedge/src/modules/components/Tables/VrTemplates/table.js

@@ -13,36 +13,29 @@
  * See the License for the specific language governing permissions and       *
  * limitations under the License.                                            *
  * ------------------------------------------------------------------------- */
-import { Box, Grid, useTheme } from '@mui/material'
 import MultipleTags from '@modules/components/MultipleTags'
-import { SubmitButton } from '@modules/components/FormControl'
-import { Component, useEffect, useMemo, useState } from 'react'
-import { DatastoreDialog } from '@modules/components/Tables/VrTemplates/DatastoreSelectionDialog'
+import { Component, useMemo, useCallback } from 'react'
+import { CloudDownload } from 'iconoir-react'
 
 import {
   useAuth,
   useViews,
-  useGeneralApi,
-  MarketplaceAPI,
+  useModalsApi,
   VrTemplateAPI,
   MarketplaceAppAPI,
-  DatastoreAPI,
 } from '@FeaturesModule'
 import { getResourceLabels } from '@UtilsModule'
 import { getColorFromString, timeToString } from '@ModelsModule'
 import { RESOURCE_NAMES, T, STYLE_BUTTONS } from '@ConstantsModule'
-import { BoxIso as DownloadIcon } from 'iconoir-react'
-
-import { Tr, Translate } from '@modules/components/HOC'
+import { Box } from '@mui/material'
 import EnhancedTable, {
   createColumns,
 } from '@modules/components/Tables/Enhanced'
 import WrapperRow from '@modules/components/Tables/Enhanced/WrapperRow'
 import VrTemplateColumns from '@modules/components/Tables/VrTemplates/columns'
 import VrTemplateRow from '@modules/components/Tables/VrTemplates/row'
-import { useStyles } from '@modules/components/Tabs/EmptyTab/styles'
-import InfoEmpty from 'iconoir-react/dist/InfoEmpty'
-import { debounce } from 'lodash'
+import SubmitButton from '@modules/components/FormControl/SubmitButton'
+import { ExportForm } from '@modules/components/Forms/MarketplaceApp'
 
 const DEFAULT_DATA_CY = 'vrouter-templates'
 
@@ -51,35 +44,32 @@ const DEFAULT_DATA_CY = 'vrouter-templates'
  * @returns {Component} - Vr Templates table
  */
 const VrTemplatesTable = (props) => {
+  const { showModal } = useModalsApi()
+  const [exportApp] = MarketplaceAppAPI.useExportAppMutation()
+  const { data: defaultVrApp = [], isFetching: loadingApps } =
+    MarketplaceAppAPI.useGetMarketplaceAppsQuery(undefined, {
+      selectFromResult: ({ data: result = [] }) => ({
+        data: result?.find(
+          (app) =>
+            app?.MARKETPLACE === 'OpenNebula Public' &&
+            app?.NAME === 'Service Virtual Router'
+        ),
+      }),
+    })
   const { rootProps = {}, searchProps = {}, ...rest } = props ?? {}
   const { labels = {} } = useAuth()
 
-  const theme = useTheme()
-  const classes = useMemo(() => useStyles(theme), [theme])
-
   rootProps['data-cy'] ??= DEFAULT_DATA_CY
   searchProps['data-cy'] ??= `search-${DEFAULT_DATA_CY}`
 
-  const { enqueueError, enqueueSuccess, enqueueInfo } = useGeneralApi()
   const { view, getResourceView } = useViews()
-  const [loading, setLoading] = useState(false)
-  const [oneMarket, setOneMarket] = useState(null)
-  const [defaultImage, setDefaultImage] = useState(null)
-  const [disableDownload, setDisableDownload] = useState(false)
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const [enableMarketplace] = MarketplaceAPI.useEnableMarketplaceMutation()
-  const [exportApp] = MarketplaceAppAPI.useExportAppMutation()
   const {
     data = [],
-    isFetching,
+    isFetching: loadingTemplates,
     refetch,
   } = VrTemplateAPI.useGetVrTemplatesQuery()
-  const [
-    fetchMarketplaces,
-    { data: marketplaces = [], isFetching: fetchingMarketplaces },
-  ] = MarketplaceAPI.useLazyGetMarketplacesQuery(undefined, {
-    skip: true, // Does not run on initial render
-  })
+
+  const loading = loadingTemplates || loadingApps
 
   const fmtData = useMemo(
     () =>
@@ -98,24 +88,6 @@ const VrTemplatesTable = (props) => {
     [data, labels]
   )
 
-  const [
-    fetchDatastores,
-    { data: datastores = [], isFetching: fetchingDatastores },
-  ] = DatastoreAPI.useLazyGetDatastoresQuery(undefined, {
-    skip: true, // Does not run on initial render
-  })
-
-  const [
-    fetchMarketplaceApps,
-    { data: marketplaceApps = [], isFetching: fetchingMarketplaceApps },
-  ] = MarketplaceAppAPI.useLazyGetMarketplaceAppsQuery(undefined, {
-    skip: true,
-  }) // Does not run on initial render
-
-  useEffect(() => {
-    setLoading(isFetching || fetchingMarketplaces)
-  }, [isFetching, fetchingMarketplaces])
-
   const columns = useMemo(
     () =>
       createColumns({
@@ -125,166 +97,47 @@ const VrTemplatesTable = (props) => {
     [view]
   )
 
-  const submitDisabled = useMemo(
-    () =>
-      !(
-        !fetchingMarketplaces &&
-        !fetchingMarketplaceApps &&
-        !fetchingDatastores
-      ),
-    [fetchingMarketplaces, fetchingMarketplaceApps, fetchingDatastores]
-  )
-
-  const handleDownloadDefaultImage = debounce(
-    async () => {
-      // Use cache if exists
-      setDisableDownload(true)
-      await fetchMarketplaces(undefined, true)
-      await fetchDatastores(undefined, true)
-      if (defaultImage !== null) {
-        setDialogOpen(true)
-      }
+  const handleSubmit = useCallback(
+    async (formData) => {
+      await exportApp({ id: defaultVrApp.ID, ...formData })
+      refetch()
     },
-    4000,
-    { leading: true }
+    [defaultVrApp]
   )
 
-  useEffect(() => {
-    if (marketplaces?.length) {
-      const mid =
-        marketplaces?.find(
-          (marketplace) => marketplace?.NAME === 'OpenNebula Public'
-        ) ?? null
-      mid !== null &&
-        setOneMarket({
-          ID: mid?.ID ?? -1,
-          STATE: mid?.STATE === '0' ? 'ENABLED' : 'DISABLED',
-        })
-    }
-  }, [marketplaces])
-
-  useEffect(() => {
-    // Internal ASYNC funcs -->
-
-    const fetchApps = async () => {
-      await fetchMarketplaceApps(undefined, true) // Prefer cache
-    }
-
-    const enableMarket = async (marketID) => {
-      const response = await enableMarketplace({ id: marketID })
-      if (response?.data === parseInt(marketID, 10)) {
-        enqueueInfo(T.InfoEnableOpenNebulaMarketplace)
-        setOneMarket({ ...oneMarket, STATE: 'ENABLED' })
-        fetchApps()
-      }
-
-      return response
-    }
-
-    // <--Internal ASYNC funcs
-
-    try {
-      if (
-        oneMarket !== null &&
-        oneMarket?.ID !== -1 &&
-        oneMarket?.STATE !== 'ENABLED'
-      ) {
-        enableMarket(oneMarket?.ID).catch(console.error)
-
-        // Prefer cache
-      } else if (
-        oneMarket !== null &&
-        oneMarket?.ID !== -1 &&
-        oneMarket?.STATE === 'ENABLED'
-      ) {
-        fetchApps()
-      }
-    } catch {}
-  }, [oneMarket])
-
-  useEffect(() => {
-    if (marketplaceApps?.length && !fetchingMarketplaceApps) {
-      const vrTemplate =
-        marketplaceApps?.find(
-          (app) => app?.NAME === 'Service Virtual Router'
-        ) ?? null
-      setDefaultImage(vrTemplate)
-    }
-  }, [marketplaceApps])
-
-  useEffect(() => {
-    if (defaultImage !== null && !fetchingDatastores) {
-      setDisableDownload(true)
-      setDialogOpen(true)
-    }
-  }, [defaultImage, datastores])
-
-  const handleCloseDialog = () => {
-    setDialogOpen(false)
-    setDisableDownload(false)
-  }
-
-  const handleDownloadApp = async (datastoreId) => {
-    await exportApp({
-      id: defaultImage?.ID,
-      name: 'Service Virtual Router',
-      vmname: 'Service Virtual Router',
-      datastore: datastoreId,
+  const handleExportApp = () => {
+    showModal({
+      id: 'export-default-vr',
+      dialogProps: {
+        title: T.DownloadDefaultImage,
+        dataCy: 'modal-download-vr-app',
+      },
+      form: ExportForm({
+        initialValues: defaultVrApp,
+        stepProps: defaultVrApp,
+      }),
+      onSubmit: handleSubmit,
     })
-      .then((res) => {
-        if (res?.data) {
-          enqueueSuccess(T.SuccessDownloadDefaultImage) && refetch()
-        } else if (res?.error) {
-          enqueueError(res.error)
-        } else {
-          throw new Error('Unexpected problem occured')
-        }
-      })
-      .catch((error) => {
-        console.error(error)
-      })
   }
 
-  const filterDatastores = useMemo(() =>
-    datastores?.filter((ds) => ds?.TYPE === '0')
-  )
-
   const NoDataAvailable = () => (
-    <>
-      <Grid
-        container
-        sx={{
-          alignItems: 'start',
-          justifyContent: 'start',
-          width: '100%',
-          height: '100%',
-        }}
-      >
-        <Grid item xs={12}>
-          <Box className={classes.noDataMessage}>
-            <InfoEmpty />
-            <Translate word={T.NoDataAvailable} />
-            <SubmitButton
-              importance={STYLE_BUTTONS.IMPORTANCE.MAIN}
-              size={STYLE_BUTTONS.SIZE.MEDIUM}
-              type={STYLE_BUTTONS.TYPE.FILLED}
-              disabled={disableDownload}
-              icon={<DownloadIcon />}
-              onClick={() => handleDownloadDefaultImage()}
-              label={Tr(T.DownloadDefaultImage)}
-            />
-          </Box>
-        </Grid>
-      </Grid>
-
-      <DatastoreDialog
-        open={dialogOpen}
-        onClose={handleCloseDialog}
-        datastores={filterDatastores}
-        submitDisabled={submitDisabled}
-        onSelect={(ds) => handleDownloadApp(ds?.ID ?? -1)}
+    <Box
+      sx={{
+        width: 'fit-content',
+        height: 'fit-content',
+      }}
+    >
+      <SubmitButton
+        dataCy="download-vr-app"
+        icon=<CloudDownload />
+        label={T.DownloadDefaultImage}
+        importance={STYLE_BUTTONS.IMPORTANCE.MAIN}
+        size={STYLE_BUTTONS.SIZE.MEDIUM}
+        type={STYLE_BUTTONS.TYPE.FILLED}
+        disabled={loading}
+        onClick={handleExportApp}
       />
-    </>
+    </Box>
   )
 
   const listHeader = [

src/fireedge/src/modules/constants/translates.js

@@ -55,6 +55,7 @@ module.exports = {
   NumberOfResourcesSelected: 'All %s resources are selected',
   SelectAllResources: 'Select all %s resources',
   SelectAImage: 'Select a image',
+  SelectADatastore: 'Select a datastore',
   ClearSelection: 'Clear selection',
   ResetFilters: 'Clear current search query, filters, and sorts',
   VmsClearErrors: