UI updated for Filtering Organizations by Metadata Attributes

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

@@ -27,7 +27,7 @@ import {
     PrimaryButton,
     SessionTimedOutContext
 } from "@wso2is/react-components";
-import React, { CSSProperties, FunctionComponent, ReactElement, useState } from "react";
+import React, { CSSProperties, FunctionComponent, ReactElement, ReactNode, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Divider, Form, Grid } from "semantic-ui-react";
 import { getAdvancedSearchIcons } from "../configs";
@@ -51,6 +51,11 @@ const FILTER_VALUES_FIELD_IDENTIFIER: string = "filterValues";
  * Prop types for the application search component.
  */
 export interface AdvancedSearchWithBasicFiltersPropsInterface extends TestableComponentInterface {
+
+    /**
+     * Children node form field passed from parent
+     */
+    children?: ReactNode;
     /**
      * Default Search attribute. ex: "name"
      */
@@ -71,10 +76,22 @@ export interface AdvancedSearchWithBasicFiltersPropsInterface extends TestableCo
      * Fill color.
      */
     fill?: AdvancedSearchPropsInterface[ "fill" ];
+    /**
+     * Callback to be triggered on advance search close.
+     */
+    onClose?: () => void;
     /**
      * Callback to be triggered on filter query change.
      */
     onFilter: (query: string) => void;
+    /**
+     * Callback to be triggered on filter attribute option change.
+     */
+    onFilterAttributeOptionsChange?: (values) => void;
+    /**
+     * Callback to be get custom query.
+     */
+    getQuery?: (values) => string;
     /**
      * Filter attributes options.
      */
@@ -127,7 +144,7 @@ export interface AdvancedSearchWithBasicFiltersPropsInterface extends TestableCo
      * Enable query search with shift and enter.
      */
     enableQuerySearch?: boolean;
-    /**
+        /**
      * Disable search and filter options.
      */
     disableSearchAndFilterOptions?: boolean;
@@ -152,6 +169,7 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
 ): ReactElement => {
 
     const {
+        children,
         defaultSearchAttribute,
         defaultSearchOperator,
         disableSearchFilterDropdown,
@@ -163,7 +181,10 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
         filterConditionsPlaceholder,
         filterAttributePlaceholder,
         filterValuePlaceholder,
+        onClose,
         onFilter,
+        onFilterAttributeOptionsChange,
+        getQuery,
         placeholder,
         predefinedDefaultSearchStrategy,
         resetButtonLabel,
@@ -181,19 +202,26 @@ 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);
 
     /**
      * Handles the form submit.
      *
      * @param values - Form values.
      */
     const handleFormSubmit = (values: Map<string, string | string[]>): void => {
-        const query: string = values.get(FILTER_ATTRIBUTE_FIELD_IDENTIFIER)
-            + " "
-            + values.get(FILTER_CONDITION_FIELD_IDENTIFIER)
-            + " "
-            + values?.get(FILTER_VALUES_FIELD_IDENTIFIER);
+        let query: string;
+        const customQuery = getQuery ? getQuery(values) : null;
 
+        if (customQuery !== null) {
+            query = customQuery;
+        } else {
+            query = values.get(FILTER_ATTRIBUTE_FIELD_IDENTIFIER)
+                    + " "
+                    + values.get(FILTER_CONDITION_FIELD_IDENTIFIER)
+                    + " "
+                    + values?.get(FILTER_VALUES_FIELD_IDENTIFIER);
+        }
         setExternalSearchQuery(query);
         onFilter(query);
         setIsFormSubmitted(true);
@@ -247,6 +275,24 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
         }
     };
 
+    /**
+     * Handles any clicks outside the form.
+     */
+    const handleClickOutside = (event: MouseEvent) => {
+        if (formRef.current && !formRef.current.contains(event.target as Node)) {
+            if (onClose) {
+                onClose();
+            }
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
     /**
      * Default filter condition options.
      */
@@ -305,6 +351,7 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
                             onSubmit={ (values: Map<string, FormValue>) => handleFormSubmit(values) }
                             resetState={ isFiltersReset }
                             onChange={ () => setIsFiltersReset(false) }
+                            ref={ formRef }
                         >
                             <Field
                                 children={
@@ -335,7 +382,9 @@ export const AdvancedSearchWithBasicFilters: FunctionComponent<AdvancedSearchWit
                                 value={ defaultSearchAttribute }
                                 data-testid={ `${ testId }-filter-attribute-dropdown` }
                                 data-componentid={ `${ testId }-filter-attribute-dropdown` }
+                                listen={(values) => onFilterAttributeOptionsChange?.(values)}
                             />
+                            { children }
                             <Form.Group widths="equal">
                                 <Field
                                     children={

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

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -35,6 +35,7 @@ import {
     OrganizationListInterface,
     OrganizationPatchData,
     OrganizationResponseInterface,
+    OrganizationsMetaAttributesListInterface,
     ShareApplicationRequestInterface,
     UpdateOrganizationInterface
 } from "../models";
@@ -480,3 +481,52 @@ export const unshareApplication = (
         return Promise.reject(error?.response?.data);
     });
 };
+
+/**
+ * Get a list of organizations' meta attributes.
+ *
+ * @param filter - The filter query.
+ * @param limit - The maximum number of meta attributes to return.
+ * @param after - The previous range of data to be returned.
+ * @param before - The next range of data to be returned.
+ * @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.
+ */
+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`
+    };
+    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/meta-attribute-auto-complete-component.scss

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+.ui.form {
+    .meta-attribute-autocomplete {
+        margin-bottom: 1em;
+        input {
+            border: none;
+        }
+        label {
+            font-size: .92857143em;
+            color: rgba(0, 0, 0, .87);
+            margin-bottom: .28571429rem;
+        }
+    }
+}
+
+.meta-attribute-autocomplete {
+    .list-item-loader {
+        margin: 8px;
+    }
+    .list-item-content {
+        display: flex !important;
+        align-items: center;
+    }
+}