Added review suggestions and fixed ESlint issues

.changeset/poor-schools-retire.md

@@ -2,7 +2,7 @@
 "@wso2is/admin.organizations.v1": minor
 "@wso2is/react-components": minor
 "@wso2is/admin.core.v1": minor
-"@wso2is/i18n": minor
+"@wso2is/i18n": patch
 ---
 
-UI for Filtering Organizations by Metadata Attributes
+UI support for Filtering Organizations by Metadata Attributes

features/admin.core.v1/components/advanced-search-with-basic-filters.tsx

@@ -19,7 +19,7 @@
 import { commonConfig } from "@wso2is/admin.extensions.v1";
 import { TestableComponentInterface } from "@wso2is/core/models";
 import { SearchUtils } from "@wso2is/core/utils";
-import { DropdownChild, Field, FormValue, Forms } from "@wso2is/forms";
+import { DropdownChild, Field, FormValue, Forms, Validation } from "@wso2is/forms";
 import {
     AdvancedSearch,
     AdvancedSearchPropsInterface,
@@ -88,6 +88,10 @@ export interface AdvancedSearchWithBasicFiltersPropsInterface extends TestableCo
      * Callback to be triggered on filter attribute option change.
      */
     onFilterAttributeOptionsChange?: (values) => void;
+    /**
+     * Callback to be triggered on submit error.
+     */
+    onSubmitError?: () => boolean;
     /**
      * Callback to be get custom query.
      */
@@ -144,7 +148,7 @@ export interface AdvancedSearchWithBasicFiltersPropsInterface extends TestableCo
      * Enable query search with shift and enter.
      */
     enableQuerySearch?: boolean;
-        /**
+    /**
      * Disable search and filter options.
      */
     disableSearchAndFilterOptions?: boolean;
@@ -184,6 +188,7 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
         onClose,
         onFilter,
         onFilterAttributeOptionsChange,
+        onSubmitError,
         getQuery,
         placeholder,
         predefinedDefaultSearchStrategy,
@@ -202,16 +207,22 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
     const [ isFiltersReset, setIsFiltersReset ] = useState<boolean>(false);
     const [ externalSearchQuery, setExternalSearchQuery ] = useState<string>("");
     const sessionTimedOut: boolean = React.useContext(SessionTimedOutContext);
-    const formRef = useRef<HTMLDivElement>(null);
+    const formRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
 
     /**
      * Handles the form submit.
      *
      * @param values - Form values.
      */
     const handleFormSubmit = (values: Map<string, string | string[]>): void => {
+
+        if (onSubmitError?.()) {
+
+            return;
+        }
+
         let query: string;
-        const customQuery = getQuery ? getQuery(values) : null;
+        const customQuery: string = getQuery ? getQuery(values) : null;
 
         if (customQuery !== null) {
             query = customQuery;
@@ -286,10 +297,14 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
         }
     };
 
+    /**
+     * Adds an event listener for detecting clicks outside the form on component mount.
+     */
     useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener("mousedown", handleClickOutside);
+
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener("mousedown", handleClickOutside);
         };
     }, []);
 
@@ -351,6 +366,7 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
                             onSubmit={ (values: Map<string, FormValue>) => handleFormSubmit(values) }
                             resetState={ isFiltersReset }
                             onChange={ () => setIsFiltersReset(false) }
+                            onSubmitError={ () => {onSubmitError?.();} }
                             ref={ formRef }
                         >
                             <Field
@@ -382,7 +398,7 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
                                 value={ defaultSearchAttribute }
                                 data-testid={ `${ testId }-filter-attribute-dropdown` }
                                 data-componentid={ `${ testId }-filter-attribute-dropdown` }
-                                listen={(values) => onFilterAttributeOptionsChange?.(values)}
+                                listen={ (values: Map<string, FormValue>) => onFilterAttributeOptionsChange?.(values) }
                             />
                             { children }
                             <Form.Group widths="equal">

features/admin.organizations.v1/api/organization.ts

@@ -24,7 +24,11 @@ import {
     HttpResponse
 } from "@asgardeo/auth-react";
 import { store } from "@wso2is/admin.core.v1";
-import useRequest, { RequestErrorInterface, RequestResultInterface } from "@wso2is/admin.core.v1/hooks/use-request";
+import useRequest, {
+    RequestConfigInterface,
+    RequestErrorInterface,
+    RequestResultInterface
+} from "@wso2is/admin.core.v1/hooks/use-request";
 import { IdentityAppsApiException } from "@wso2is/core/exceptions";
 import { HttpMethods } from "@wso2is/core/models";
 import { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
@@ -483,7 +487,7 @@ export const unshareApplication = (
 };
 
 /**
- * Get a list of organizations' meta attributes.
+ * Hook to get a list of organizations' meta attributes.
  *
  * @param filter - The filter query.
  * @param limit - The maximum number of meta attributes to return.
@@ -492,41 +496,45 @@ export const unshareApplication = (
  * @param recursive - Whether we need to do a recursive search.
  * @param isRoot - Whether the organization is the root
  *
- * @returns a promise containing the response with the meta attributes.
+ * @returns Organizations Meta Attributes GET hook.
  */
-export const getOrganizationsMetaAttributes = (
-    filter: string,
-    limit: number,
-    after: string,
-    before: string,
-    recursive: boolean = false,
-    isRoot: boolean = false
-): Promise<OrganizationsMetaAttributesListInterface> => {
-    const config: HttpRequestConfig = {
-        headers: {
-            Accept: "application/json",
-            "Content-Type": "application/json"
-        },
-        method: "GET",
-        params: {
-            after,
-            before,
-            filter,
-            limit,
-            recursive
-        },
-        url: `${ isRoot
-            ? store.getState().config.endpoints.rootOrganization
-            : store.getState().config.endpoints.organizations }/organizations/meta-attributes`
+export const useGetOrganizationsMetaAttributes =
+    <Data = OrganizationsMetaAttributesListInterface, Error = RequestErrorInterface>(
+        filter?: string,
+        limit?: number,
+        after?: string,
+        before?: string,
+        recursive: boolean = false,
+        isRoot: boolean = false
+    ): RequestResultInterface<Data, Error> => {
+        const requestConfig: RequestConfigInterface = {
+            headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json"
+            },
+            method: HttpMethods.GET,
+            params: {
+                after,
+                before,
+                filter,
+                limit,
+                recursive
+            },
+            url: `${isRoot
+                ? store.getState().config.endpoints.rootOrganization
+                : store.getState().config.endpoints.organizations}/organizations/meta-attributes`
+        };
+
+        const { data, error, isValidating, mutate } = useRequest<Data, Error>(
+            requestConfig,
+            { revalidateIfStale: false }
+        );
+
+        return {
+            data,
+            error,
+            isLoading: !error && !data,
+            isValidating,
+            mutate
+        };
     };
-    return httpClient(config)
-        .then((response: HttpResponse<OrganizationsMetaAttributesListInterface>) => {
-            if (response.status !== 200) {
-                return Promise.reject(new Error("Failed to get organizations' meta attributes."));
-            }
-            return Promise.resolve(response?.data);
-        })
-        .catch((error: HttpError) => {
-            return Promise.reject(error?.response?.data);
-        });
-};

features/admin.organizations.v1/components/index.ts

@@ -20,3 +20,4 @@ export * from "./organization-list";
 export * from "./add-organization-modal";
 export * from "./organization-role-list";
 export * from "./root-only-component";
+export * from "./meta-attribute-auto-complete";