feat(admin-ui): integrate GET endpoint to fetch script-types

Signed-off-by: Jeet Viramgama <jviramgama5@gmail.com>

admin-ui/plugins/admin/components/CustomScripts/CustomScriptForm.js

@@ -18,16 +18,18 @@ import GluuCommitDialog from 'Routes/Apps/Gluu/GluuCommitDialog'
 import GluuTooltip from 'Routes/Apps/Gluu/GluuTooltip'
 import { SCRIPT } from 'Utils/ApiResources'
 import { useTranslation } from 'react-i18next'
-import items from './scriptTypes'
 import { Alert, Button } from "reactstrap";
 import ErrorIcon from '@mui/icons-material/Error';
 import GluuSuspenseLoader from 'Routes/Apps/Gluu/GluuSuspenseLoader'
+import { useSelector } from 'react-redux'
+import { Skeleton } from '@mui/material'
 
 const GluuScriptErrorModal = lazy(() => import('Routes/Apps/Gluu/GluuScriptErrorModal'))
 const Counter = lazy(() => import('Components/Widgets/GroupedButtons/Counter'))
 const GluuInputEditor = lazy(() => import('Routes/Apps/Gluu/GluuInputEditor'))
 
-function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
+function CustomScriptForm({ item, handleSubmit, viewOnly }) {
+  const { scriptTypes, loadingScriptTypes } = useSelector((state) => state.customScriptReducer)
   const { t } = useTranslation()
   const [init, setInit] = useState(false)
   const [modal, setModal] = useState(false)
@@ -385,7 +387,12 @@ function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
         <FormGroup row>
           <GluuLabel label="fields.script_type" required doc_category={SCRIPT} doc_entry="scriptType"/>
           <Col sm={9}>
-            <InputGroup>
+              {loadingScriptTypes ? 
+              <Skeleton
+                variant='text'
+                width='100%'
+                sx={{ fontSize: '3rem' }}
+              /> : <InputGroup>
               <CustomInput
                 type="select"
                 id="scriptType"
@@ -398,13 +405,13 @@ function CustomScriptForm({ item, scripts, handleSubmit, viewOnly }) {
                 }}
               >
                 <option value="">{t('options.choose')}...</option>
-                {items.map((ele, index) => (
+                {scriptTypes.map((ele, index) => (
                   <option key={index} value={ele.value}>
                     {ele.name}
                   </option>
                 ))}
               </CustomInput>
-            </InputGroup>
+            </InputGroup>}
             {formik.errors.scriptType && formik.touched.scriptType ? (
               <div style={{ color: 'red' }}>{formik.errors.scriptType}</div>
             ) : null}

admin-ui/plugins/admin/components/CustomScripts/ScriptListPage.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from 'react'
 import MaterialTable from '@material-table/core'
 import { DeleteOutlined } from '@mui/icons-material'
 import { useNavigate } from 'react-router-dom'
-import { Paper, TablePagination } from '@mui/material'
+import { Paper, Skeleton, TablePagination } from '@mui/material'
 import { Badge } from 'reactstrap'
 import { useSelector, useDispatch } from 'react-redux'
 import GluuDialog from 'Routes/Apps/Gluu/GluuDialog'
@@ -16,6 +16,7 @@ import {
   getCustomScriptByType,
   setCurrentItem,
   viewOnly,
+  getScriptTypes,
 } from 'Plugins/admin/redux/features/customScriptSlice'
 import {
   hasPermission,
@@ -36,7 +37,6 @@ import { useTranslation } from 'react-i18next'
 import SetTitle from 'Utils/SetTitle'
 import { ThemeContext } from 'Context/theme/themeContext'
 import getThemeColor from 'Context/theme/config'
-import scriptTypes from './scriptTypes'
 
 function ScriptListTable() {
   const { t } = useTranslation()
@@ -58,9 +58,12 @@ function ScriptListTable() {
   const bgThemeColor = { background: themeColors.background }
   const scripts = useSelector((state) => state.customScriptReducer.items)
   const loading = useSelector((state) => state.customScriptReducer.loading)
+  const hasFetchedScriptTypes = useSelector(
+    (state) => state.customScriptReducer.hasFetchedScriptTypes
+  )
   const permissions = useSelector((state) => state.authReducer.permissions)
-  const { totalItems, entriesCount } = useSelector(
-    (state) => state.customScriptReducer,
+  const { totalItems, scriptTypes, loadingScriptTypes } = useSelector(
+    (state) => state.customScriptReducer
   )
   const [pageNumber, setPageNumber] = useState(0)
   let memoPattern = pattern
@@ -82,14 +85,23 @@ function ScriptListTable() {
     makeOptions()
     dispatch(getCustomScriptByType({ action: options }))
   }, [])
+
+  useEffect(() => {
+    if (!hasFetchedScriptTypes) {
+      dispatch(getScriptTypes())
+    }
+  }, [hasFetchedScriptTypes])
+
   if (hasPermission(permissions, SCRIPT_WRITE)) {
     myActions.push((rowData) => ({
       icon: 'edit',
       iconProps: {
         id: 'editCustomScript' + rowData.inum,
       },
       tooltip: `${t('messages.edit_script')}`,
-      onClick: (event, entry) => {handleGoToCustomScriptEditPage(entry)},
+      onClick: (event, entry) => {
+        handleGoToCustomScriptEditPage(entry)
+      },
       disabled: false,
     }))
   }
@@ -108,16 +120,28 @@ function ScriptListTable() {
   if (hasPermission(permissions, SCRIPT_READ)) {
     myActions.push({
       icon: () => (
-        <GluuCustomScriptSearch
-          limitId={LIMIT_ID}
-          limit={limit}
-          typeId={TYPE_ID}
-          patternId={PATTERN_ID}
-          scriptType={type}
-          pattern={pattern}
-          handler={handleOptionsChange}
-          options={scriptTypes}
-        />
+        <>
+          {loadingScriptTypes ? (
+            <>
+              <Skeleton
+                variant='text'
+                width='10rem'
+                sx={{ fontSize: '3rem' }}
+              />
+            </>
+          ) : (
+            <GluuCustomScriptSearch
+              limitId={LIMIT_ID}
+              limit={limit}
+              typeId={TYPE_ID}
+              patternId={PATTERN_ID}
+              scriptType={type}
+              pattern={pattern}
+              handler={handleOptionsChange}
+              options={scriptTypes}
+            />
+          )}
+        </>
       ),
       tooltip: `${t('messages.advanced_search')}`,
       iconProps: { color: 'primary' },
@@ -246,16 +270,18 @@ function ScriptListTable() {
             ]}
             data={scripts}
             isLoading={loading}
-            title=""
+            title=''
             actions={myActions}
             options={{
               search: true,
               searchFieldAlignment: 'left',
               selection: false,
               pageSize: limit,
               rowStyle: (rowData) => ({
-                backgroundColor: rowData.enabled && rowData?.scriptError?.stackTrace
-                  ? '#FF5858' : rowData.enabled
+                backgroundColor:
+                  rowData.enabled && rowData?.scriptError?.stackTrace
+                    ? '#FF5858'
+                    : rowData.enabled
                     ? themeColors.lightBackground
                     : '#FFF',
               }),
@@ -275,7 +301,7 @@ function ScriptListTable() {
             row={item}
             handler={toggle}
             modal={modal}
-            subject="script"
+            subject='script'
             onAccept={onDeletionConfirmed}
           />
         )}

admin-ui/plugins/admin/redux/api/ScriptApi.js

@@ -11,6 +11,15 @@ export default class ScriptApi {
       })
     })
   }
+
+  getCustomScriptTypes = () => {
+    return new Promise((resolve, reject) => {
+      this.api.getCustomScriptTypes((error, data) => {
+        handleResponse(error, reject, resolve, data)
+      })
+    })
+  }
+
   getScriptsByType = (options) => {
     return new Promise((resolve, reject) => {
       this.api.getConfigScriptsByType(

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

@@ -8,7 +8,10 @@ const initialState = {
   saveOperationFlag: false,
   errorInSaveOperationFlag: false,
   totalItems: 0,
-  entriesCount: 0
+  entriesCount: 0,
+  scriptTypes: [],
+  hasFetchedScriptTypes: false,
+  loadingScriptTypes: false
 }
 
 const customScriptSlice = createSlice({
@@ -20,6 +23,9 @@ const customScriptSlice = createSlice({
       state.saveOperationFlag = false
       state.errorInSaveOperationFlag = false
     },
+    setIsScriptTypesLoading: (state, action) => {
+      state.loadingScriptTypes = action.payload
+    },
     getCustomScriptsResponse: (state, action) => {
       state.loading = false
       if (action.payload?.data) {
@@ -85,6 +91,10 @@ const customScriptSlice = createSlice({
         state.errorInSaveOperationFlag = false
       }
     },
+    setScriptTypes: (state, action) => {
+      state.scriptTypes = action.payload || [],
+      state.hasFetchedScriptTypes = true
+    },
     setCurrentItem: (state, action) => {
       state.item = action.payload?.item
       state.loading = false
@@ -97,7 +107,8 @@ const customScriptSlice = createSlice({
         state.saveOperationFlag = false
         state.errorInSaveOperationFlag = false
       }
-    }
+    },
+    getScriptTypes: () => {}
   }
 })
 
@@ -112,7 +123,10 @@ export const {
   deleteCustomScriptResponse,
   getCustomScriptByType,
   viewOnly,
-  setCurrentItem
+  setCurrentItem,
+  setScriptTypes,
+  getScriptTypes,
+  setIsScriptTypesLoading
 } = customScriptSlice.actions
 export { initialState }
 export const { actions, reducer, state } = customScriptSlice

admin-ui/plugins/admin/redux/sagas/CustomScriptSaga.js

@@ -4,6 +4,8 @@ import {
   addCustomScriptResponse,
   editCustomScriptResponse,
   deleteCustomScriptResponse,
+  setScriptTypes,
+  setIsScriptTypesLoading
 } from 'Plugins/admin/redux/features/customScriptSlice'
 import { SCRIPT } from '../audit/Resources'
 import {
@@ -135,6 +137,34 @@ export function* deleteScript({ payload }) {
   }
 }
 
+export function* getScriptTypes() {
+  yield put(setIsScriptTypesLoading(true))
+  try {
+    const scriptApi = yield* newFunction()
+    const data = yield call(scriptApi.getCustomScriptTypes)
+
+    const types = data.map((type) => {
+      if(type?.includes('_')) {
+        const splitFormat = type?.split('_')
+        const formattedTypes = splitFormat?.map((formattedType) => formattedType?.charAt(0)?.toUpperCase() + formattedType?.slice(1))
+        return { value: type, name: formattedTypes?.join(' ') };
+      }
+
+      return { value: type, name: type?.charAt(0)?.toUpperCase() + type?.slice(1) };
+    })
+    yield put(setScriptTypes(types || []))
+  } catch (e) {
+    console.log('error in getting script-types: ', e)
+    yield put(setScriptTypes([]))
+    if (isFourZeroOneError(e)) {
+      const jwt = yield select((state) => state.authReducer.userinfo_jwt)
+      yield put(getAPIAccessToken(jwt))
+    }
+  } finally {
+    yield put(setIsScriptTypesLoading(false))
+  }
+}
+
 export function* watchGetAllCustomScripts() {
   yield takeLatest('customScript/getCustomScripts', getCustomScripts)
 }
@@ -152,12 +182,16 @@ export function* watchDeleteScript() {
 export function* watchScriptsByType() {
   yield takeLatest('customScript/getCustomScriptByType', getScriptsByType)
 }
+export function* watchGetScriptTypes() {
+  yield takeLatest('customScript/getScriptTypes', getScriptTypes)
+}
 export default function* rootSaga() {
   yield all([
     fork(watchGetAllCustomScripts),
     fork(watchAddScript),
     fork(watchEditScript),
     fork(watchDeleteScript),
     fork(watchScriptsByType),
+    fork(watchGetScriptTypes)
   ])
 }