feat(admin-ui): implement file upload structure for add and edit #1635

admin-ui/app/locales/en/translation.json

@@ -78,6 +78,7 @@
   "fields": {
     "access_token_signing_alg": "JWS alg for signing",
     "asset_name": "Asset Name",
+    "upload": "Select a file to upload",
     "default_permission_in_token": "Default permission in token",
     "aui_feature_ids": "Admin UI Features",
     "introspection_signed_response_alg": "Introspection Signed Response Alg",

admin-ui/app/locales/fr/translation.json

@@ -139,6 +139,7 @@
     "asset_name": "Asset Name",
     "tag": "Étiqueter",
     "issuer": "Émetteur",
+    "upload": "Select a file to upload",
     "message_provider_type": "Type de fournisseur de messages",
     "ssl_key_store_file_path": "Chemin du fichier du magasin de clés SSL",
     "ssl_trust_store_password": "Mot de passe du magasin de confiance SSL",

admin-ui/app/locales/pt/translation.json

@@ -135,6 +135,7 @@
   "fields": {
     "asset_name": "Asset Name",
     "tag": "Marcação",
+    "upload": "Select a file to upload",
     "default_permission_in_token": "Permissão padrão no token",
     "introspection_signed_response_alg": "Algoritmo de assinatura da resposta de introspeção",
     "introspection_encrypted_response_alg": "Algoritmo de criptografia da resposta de introspeção",

admin-ui/app/utils/ApiResources.js

@@ -13,4 +13,5 @@ export const AUTHN = "authn"
 export const SSA = 'ssa'
 export const ROLES = 'roles'
 export const PERMISSIONS = "permissions"
-export const WEBHOOK = 'webhook'
+export const WEBHOOK = 'webhook'
+export const ASSET = 'asset'

admin-ui/plugins/admin/components/Assets/AssetForm.js

@@ -1,30 +1,55 @@
-import React, { useCallback, useState, useEffect } from 'react'
-import { Col, Form, Row, FormGroup } from 'Components'
+import React, { useCallback, useState, useEffect, useContext } from 'react'
+import { Col, Form, Row, FormGroup, Button } from 'Components'
 import GluuInputRow from 'Routes/Apps/Gluu/GluuInputRow'
 import { useFormik } from 'formik'
 import GluuCommitFooter from 'Routes/Apps/Gluu/GluuCommitFooter'
 import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
+import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
 import * as Yup from 'yup'
+import { useFilePicker } from 'use-file-picker'
 import {
-    createAsset,
-    updateAsset,
+    FileAmountLimitValidator,
+    FileTypeValidator,
+    FileSizeValidator,
+} from 'use-file-picker/validators'
+import {
+    createJansAsset,
+    updateJansAsset,
+    resetFlags,
 } from 'Plugins/admin/redux/features/AssetSlice'
 import { buildPayload } from 'Utils/PermChecker'
 import { useNavigate, useParams } from 'react-router'
 import GluuLabel from 'Routes/Apps/Gluu/GluuLabel'
 import Toggle from 'react-toggle'
-import { WEBHOOK } from 'Utils/ApiResources'
+import { ASSET } from 'Utils/ApiResources'
+import { ThemeContext } from 'Context/theme/themeContext'
 
 const AssetForm = () => {
     const { id } = useParams()
     const userAction = {}
-    const { selectedAsset } =
-        useSelector((state) => state.assetReducer)
-
+    const { selectedAsset } = useSelector((state) => state.assetReducer)
     const { t } = useTranslation()
     const navigate = useNavigate()
+    const theme = useContext(ThemeContext)
+    const selectedTheme = theme.state.theme
+    const { openFilePicker, filesContent, clear } = useFilePicker({
+        accept: [".css", ".html", ".js", ".jar"],
+        multiple: false,
+        validators: [
+            new FileAmountLimitValidator({ max: 1 }),
+            new FileTypeValidator(['js', 'css', 'html', 'jar']),
+            new FileSizeValidator({ maxFileSize: 10 * 1024 * 1024 /* 5 MB */ }),
+        ],
+        onFilesRejected: ({ errors }) => {
+            console.log('Failed to import flow file:', errors)
+            //toast.error('Failed to import flow file: Only JSON,css,html,jar, js files are allowed with max size 10MB.')
+        },
+        onFilesSuccessfullySelected: () => {
+            console.log('File imported successfully.')
+        },
+    })
     const saveOperationFlag = useSelector(
         (state) => state.assetReducer.saveOperationFlag
     )
@@ -36,18 +61,6 @@ const AssetForm = () => {
 
     const validatePayload = (values) => {
         let faulty = false
-        if (values.httpRequestBody) {
-            try {
-                JSON.parse(values.httpRequestBody)
-            } catch (error) {
-                faulty = true
-                formik.setFieldError(
-                    'httpRequestBody',
-                    t('messages.invalid_json_error')
-                )
-            }
-        }
-
         return faulty
     }
 
@@ -80,13 +93,19 @@ const AssetForm = () => {
     })
 
     const toggle = () => {
+        console.log('toggle')
         setModal(!modal)
     }
 
+    function flowUpload() {
+        formik.setFieldValue('displayName', filesContent[0].name)
+        formik.setFieldValue('document', filesContent[0])
+        clear()
+    }
+
     const submitForm = useCallback(
         (userMessage) => {
             toggle()
-
             const jansModuleProperties = formik.values.jansModuleProperty?.map((header) => {
                 return {
                     key: header.key || header.source,
@@ -107,22 +126,27 @@ const AssetForm = () => {
 
             buildPayload(userAction, userMessage, payload)
             if (id) {
-                dispatch(updateAsset({ action: userAction }))
+                dispatch(updateJansAsset({ action: userAction }))
             } else {
-                dispatch(createAsset({ action: userAction }))
+                dispatch(createJansAsset({ action: userAction }))
             }
         },
         [formik]
     )
 
     useEffect(() => {
         if (saveOperationFlag && !errorInSaveOperationFlag) navigate('/adm/assets')
-
         return function cleanup() {
             dispatch(resetFlags())
         }
     }, [saveOperationFlag, errorInSaveOperationFlag])
 
+    useEffect(() => {
+        if (filesContent.length >= 1) {
+            flowUpload()
+        }
+    }, [filesContent])
+
 
     return (
         <>
@@ -136,11 +160,33 @@ const AssetForm = () => {
                             lsize={4}
                             doc_entry='asset_id'
                             rsize={8}
-                            doc_category={WEBHOOK}
+                            doc_category={ASSET}
                             name='assetId'
                             disabled={true}
                         />
                     ) : null}
+                    <FormGroup row>
+                        <GluuLabel
+                            label='fields.upload'
+                            size={4}
+                            doc_category={ASSET}
+                            doc_entry='upload'
+                        />
+                        <Col sm={1}>
+                            <Button
+                                color={`primary-${selectedTheme}`}
+                                type="button"
+                                style={applicationStyle.buttonStyle}
+                                onClick={() => {
+                                    openFilePicker()
+                                }}
+                            >
+                                Import
+                            </Button>
+                            {filesContent[0]?.name}
+                        </Col>
+                    </FormGroup>
+
                     <GluuInputRow
                         label='fields.asset_name'
                         formik={formik}
@@ -150,7 +196,7 @@ const AssetForm = () => {
                         rsize={8}
                         required
                         name='displayName'
-                        doc_category={WEBHOOK}
+                        doc_category={ASSET}
                         errorMessage={formik.errors.displayName}
                         showError={formik.errors.displayName && formik.touched.displayName}
                     />
@@ -159,7 +205,7 @@ const AssetForm = () => {
                         label='fields.description'
                         formik={formik}
                         value={formik.values?.description}
-                        doc_category={WEBHOOK}
+                        doc_category={ASSET}
                         doc_entry='description'
                         lsize={4}
                         rsize={8}
@@ -171,7 +217,7 @@ const AssetForm = () => {
                     <GluuLabel
                         label='options.enabled'
                         size={4}
-                        doc_category={WEBHOOK}
+                        doc_category={ASSET}
                         doc_entry='enabled'
                     />
                     <Col sm={1}>
@@ -183,7 +229,6 @@ const AssetForm = () => {
                         />
                     </Col>
                 </FormGroup>
-
                 <Row>
                     <Col>
                         <GluuCommitFooter

admin-ui/plugins/admin/components/Assets/JansAssetEditPage.js

@@ -4,18 +4,13 @@ import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
 import AssetForm from './AssetForm'
 import { useTranslation } from 'react-i18next'
 import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
-import { useDispatch, useSelector } from 'react-redux'
-import { getAssets, getAssetResponse } from 'Plugins/admin/redux/features/AssetSlice'
-import { useParams } from 'react-router'
+import { useSelector } from 'react-redux'
 import SetTitle from 'Utils/SetTitle'
 
 const JansAssetEditPage = () => {
-    const { id } = useParams()
     const { t } = useTranslation()
-    const dispatch = useDispatch()
     SetTitle(t('titles.asset_edit'))
     const { loading } = useSelector((state) => state.assetReducer)
-
     useEffect(() => {
 
     }, [])

admin-ui/plugins/admin/components/Assets/JansAssetListPage.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useContext, useCallback } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@mui/icons-material'
 import { Paper, TablePagination } from '@mui/material'
-
 import { Card, CardBody } from 'Components'
 import GluuViewWrapper from 'Routes/Apps/Gluu/GluuViewWrapper'
 import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
@@ -23,7 +22,7 @@ import getThemeColor from 'Context/theme/config'
 import { LIMIT_ID, PATTERN_ID } from 'Plugins/admin/common/Constants'
 import SetTitle from 'Utils/SetTitle'
 import { useNavigate } from 'react-router'
-import { getJansAssets, deleteAsset, setSelectedAsset } from 'Plugins/admin/redux/features/AssetSlice'
+import { getJansAssets, deleteJansAsset, setSelectedAsset } from 'Plugins/admin/redux/features/AssetSlice'
 
 const JansAssetListPage = () => {
     const dispatch = useDispatch()
@@ -38,27 +37,22 @@ const JansAssetListPage = () => {
         (props) => <Paper {...props} elevation={0} />,
         []
     )
-
     const theme = useContext(ThemeContext)
     const themeColors = getThemeColor(theme.state.theme)
     const bgThemeColor = { background: themeColors.background }
-
     const [modal, setModal] = useState(false)
     const [deleteData, setDeleteData] = useState(null)
     const toggle = () => setModal(!modal)
     const submitForm = (userMessage) => {
         const userAction = {}
         toggle()
         buildPayload(userAction, userMessage, deleteData)
-        dispatch(deleteAsset({ action: userAction }))
+        dispatch(deleteJansAsset({ action: userAction }))
     }
-
     const myActions = []
     const options = {}
-
     const [limit, setLimit] = useState(10)
     const [pattern, setPattern] = useState(null)
-
     useEffect(() => {
         options['limit'] = 10
         dispatch(getJansAssets({ action: options }))

admin-ui/plugins/admin/redux/features/AssetSlice.js

@@ -54,20 +54,19 @@ const assetSlice = createSlice({
             state.loading = true
         },
         getJansAssetResponse: (state, action) => {
-            console.log("closing asset", action.payload)
             state.loading = false
             if (action.payload?.data) {
                 state.assets = action.payload.data.entries
                 state.totalItems = action.payload.data.totalEntriesCount
                 state.entriesCount = action.payload.data.entriesCount
             }
         },
-        createAsset: (state) => {
+        createJansAsset: (state) => {
             state.loading = true
             state.saveOperationFlag = false
             state.errorInSaveOperationFlag = false
         },
-        createAssetResponse: (state, action) => {
+        createJansAssetResponse: (state, action) => {
             state.loading = false
             state.saveOperationFlag = true
             if (action.payload?.data) {
@@ -76,21 +75,21 @@ const assetSlice = createSlice({
                 state.errorInSaveOperationFlag = true
             }
         },
-        deleteAsset: (state) => {
+        deleteJansAsset: (state) => {
             state.loading = true
         },
-        deleteAssetResponse: (state) => {
+        deleteJansAssetResponse: (state) => {
             state.loading = false
         },
         setSelectedAsset: (state, action) => {
             state.selectedAsset = action.payload
         },
-        updateAsset: (state) => {
+        updateJansAsset: (state) => {
             state.loading = true
             state.saveOperationFlag = false
             state.errorInSaveOperationFlag = false
         },
-        updateAssetResponse: (state, action) => {
+        updateJansAssetResponse: (state, action) => {
             state.saveOperationFlag = true
             state.loading = false
             if (action.payload?.data) {
@@ -115,13 +114,13 @@ const assetSlice = createSlice({
 export const {
     getJansAssets,
     getJansAssetResponse,
-    createAsset,
-    createAssetResponse,
-    deleteAsset,
-    deleteAssetResponse,
+    createJansAsset,
+    createJansAssetResponse,
+    deleteJansAsset,
+    deleteJansAssetResponse,
     setSelectedAsset,
-    updateAsset,
-    updateAssetResponse,
+    updateJansAsset,
+    updateJansAssetResponse,
     resetFlags,
     setAssetModal,
     setShowErrorModal