fix(admin-ui): unable to add country claim in Users form. (#1966)

* fix: removable select value

* feat: update search on scope form

Author: mjatin-dev

admin-ui/app/routes/Apps/Gluu/GluuRemovableSelectRow.js

@@ -36,10 +36,10 @@ function GluuRemovableSelectRow({
               data-testid={name}
               name={name}
               defaultValue={value}
-              onChange={() => {
+              onChange={(e) => {
                 setModifiedFields({
                   ...modifiedFields,
-                  [name]: formik.values[name],
+                  [name]: e.target.value,
                 });
                 formik.handleChange(e);
               }}

admin-ui/plugins/auth-server/components/Scopes/ScopeAddPage.js

@@ -1,56 +1,68 @@
-import React, { useEffect } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-import { useNavigate } from 'react-router-dom'
-import { CardBody, Card } from 'Components'
-import ScopeForm from './ScopeForm'
-import { addScope } from 'Plugins/auth-server/redux/features/scopeSlice'
-import { buildPayload } from 'Utils/PermChecker'
-import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
-import { getAttributes, getScripts } from 'Redux/features/initSlice'
-import GluuAlert from 'Routes/Apps/Gluu/GluuAlert'
-import { useTranslation } from 'react-i18next'
-import applicationStyle from 'Routes/Apps/Gluu/styles/applicationstyle'
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useNavigate } from "react-router-dom";
+import { CardBody, Card } from "Components";
+import ScopeForm from "./ScopeForm";
+import { addScope } from "Plugins/auth-server/redux/features/scopeSlice";
+import { buildPayload } from "Utils/PermChecker";
+import GluuLoader from "Routes/Apps/Gluu/GluuLoader";
+import { getAttributes, getScripts } from "Redux/features/initSlice";
+import GluuAlert from "Routes/Apps/Gluu/GluuAlert";
+import { useTranslation } from "react-i18next";
+import applicationStyle from "Routes/Apps/Gluu/styles/applicationstyle";
 
 function ScopeAddPage() {
-  const loading = useSelector((state) => state.scopeReducer.loading)
-  const scripts = useSelector((state) => state.initReducer.scripts)
-  const attributes = useSelector((state) => state.initReducer.attributes)
-  const saveOperationFlag = useSelector((state) => state.scopeReducer.saveOperationFlag)
-  const errorInSaveOperationFlag = useSelector((state) => state.scopeReducer.errorInSaveOperationFlag)
+  const loading = useSelector((state) => state.scopeReducer.loading);
+  const scripts = useSelector((state) => state.initReducer.scripts);
+  const attributes = useSelector((state) => state.initReducer.attributes);
+  const saveOperationFlag = useSelector(
+    (state) => state.scopeReducer.saveOperationFlag
+  );
+  const errorInSaveOperationFlag = useSelector(
+    (state) => state.scopeReducer.errorInSaveOperationFlag
+  );
 
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
 
-  const userAction = {}
-  const navigate = useNavigate()
-  const { t } = useTranslation()
+  const userAction = {};
+  const navigate = useNavigate();
+  const { t } = useTranslation();
   useEffect(() => {
     if (attributes.length === 0) {
-      buildPayload(userAction, 'Fetch attributes', { limit: 100 })
-      dispatch(getAttributes({ options: userAction }))
+      buildPayload(userAction, "Fetch attributes", { limit: 100 });
+      console.log("userAction", userAction);
+      dispatch(getAttributes({ options: userAction }));
     }
     if (scripts.length === 0) {
-      buildPayload(userAction, 'Fetch custom scripts', {})
-      dispatch(getScripts({ action: userAction }))
+      buildPayload(userAction, "Fetch custom scripts", {});
+      dispatch(getScripts({ action: userAction }));
     }
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (saveOperationFlag && !errorInSaveOperationFlag)
-      navigate('/auth-server/scopes')
-  }, [saveOperationFlag])
+      navigate("/auth-server/scopes");
+  }, [saveOperationFlag]);
 
   function handleSubmit(data) {
     if (data) {
-      const postBody = {}
-      data = JSON.parse(data)
-      const message = data.action_message
-      delete data.action_message
-      postBody['scope'] = data
-      buildPayload(userAction, message, postBody)
-      dispatch(addScope({ action: userAction }))
+      const postBody = {};
+      data = JSON.parse(data);
+      const message = data.action_message;
+      delete data.action_message;
+      postBody["scope"] = data;
+      buildPayload(userAction, message, postBody);
+      dispatch(addScope({ action: userAction }));
     }
   }
 
+  const handleSearch = (value) => {
+    const option = {
+      pattern:value
+    }
+    dispatch(getAttributes({ options: option }));
+  };
+
   const scope = {
     claims: [],
     dynamicScopeScripts: [],
@@ -60,13 +72,13 @@ function ScopeAddPage() {
       spontaneousClientScopes: [],
       showInConfigurationEndpoint: false,
     },
-  }
+  };
 
   return (
     <GluuLoader blocking={loading}>
       <GluuAlert
-        severity={t('titles.error')}
-        message={t('messages.error_in_saving')}
+        severity={t("titles.error")}
+        message={t("messages.error_in_saving")}
         show={errorInSaveOperationFlag}
       />
       <Card className="mb-3" style={applicationStyle.mainCard}>
@@ -76,11 +88,12 @@ function ScopeAddPage() {
             scripts={scripts}
             attributes={attributes}
             handleSubmit={handleSubmit}
+            onSearch={handleSearch}
           />
         </CardBody>
       </Card>
     </GluuLoader>
-  )
+  );
 }
 
-export default ScopeAddPage
+export default ScopeAddPage;

admin-ui/plugins/auth-server/components/Scopes/ScopeForm.js

@@ -33,7 +33,7 @@ import { LIMIT, PATTERN } from "Plugins/auth-server/common/Constants";
 import moment from "moment";
 import { adminUiFeatures } from "Plugins/admin/helper/utils";
 
-function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
+function ScopeForm({ scope, scripts, attributes, handleSubmit,onSearch }) {
   const { t } = useTranslation();
   let dynamicScopeScripts = [];
   let umaAuthorizationPolicies = [];
@@ -361,6 +361,7 @@ function ScopeForm({ scope, scripts, attributes, handleSubmit }) {
                     options={claims}
                     doc_category={SCOPE}
                     placeholder="Search by display name or claim name"
+                    onSearch={onSearch}
                   />
                 </Accordion.Body>
               </Accordion>