Improve email domain discovery page to incorporate new configuration for enabling email domain discovery for self-registration

.changeset/shiny-bulldogs-bathe.md

@@ -0,0 +1,6 @@
+---
+"@wso2is/admin.organization-discovery.v1": patch
+"@wso2is/i18n": patch
+---
+
+Improve email domain discovery page to incorporate new configuration for enabling email domain discovery for self-registration.

features/admin.organization-discovery.v1/api/update-organization-discovery-config.ts

@@ -0,0 +1,60 @@
+/**
+ * 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.
+ */
+
+import { AsgardeoSPAClient, HttpClientInstance } from "@asgardeo/auth-react";
+import { store } from "@wso2is/admin.core.v1/store";
+import { HttpMethods } from "@wso2is/core/models";
+import { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
+import { OrganizationDiscoveryConfigInterface } from "../models/organization-discovery";
+
+/**
+ * Get an axios instance.
+ */
+const httpClient: HttpClientInstance = AsgardeoSPAClient.getInstance()
+    .httpRequest.bind(AsgardeoSPAClient.getInstance());
+
+/**
+ * Update organization discovery configurations
+ *
+ * @param properties - Data that needs to be updated.
+ */
+export const updateOrganizationDiscoveryConfig = (
+    properties: OrganizationDiscoveryConfigInterface
+): Promise<any> => {
+    const requestConfig: AxiosRequestConfig = {
+        data: properties,
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.PUT,
+        url: `${ store.getState().config.endpoints.organizations }/organization-configs/discovery`
+    };
+
+    return httpClient(requestConfig)
+        .then((response: AxiosResponse) => {
+            if (response.status !== 200) {
+                return Promise.reject(new Error("Failed to update organization discovery configs."));
+            }
+
+            return Promise.resolve(response?.data);
+        }).catch((error: AxiosError) => {
+            return Promise.reject(error?.response?.data);
+        });
+};
+
+export default updateOrganizationDiscoveryConfig;

features/admin.organization-discovery.v1/api/use-get-organization-discovery-config.ts

@@ -36,7 +36,8 @@ import {
  * @returns SWR response object containing the data, error, isValidating, mutate.
  */
 const useGetOrganizationDiscoveryConfig = <
-    Data = OrganizationDiscoveryConfigInterface & { isOrganizationDiscoveryEnabled: boolean },
+    Data = OrganizationDiscoveryConfigInterface & { isOrganizationDiscoveryEnabled: boolean,
+        isEmailDomainBasedSelfRegistrationEnabled: boolean },
     Error = RequestErrorInterface
 >(shouldFetch: boolean = true): RequestResultInterface<Data, Error> => {
     const requestConfig: RequestConfigInterface = {
@@ -53,13 +54,18 @@ const useGetOrganizationDiscoveryConfig = <
     });
 
     let isOrganizationDiscoveryEnabled: boolean = false;
+    let isEmailDomainBasedSelfRegistrationEnabled: boolean = false;
 
     if ((data as OrganizationDiscoveryConfigInterface)?.properties) {
         (data as OrganizationDiscoveryConfigInterface).properties?.forEach(
             (property: OrganizationDiscoveryConfigPropertyInterface) => {
-                if (property.key === "emailDomain.enable") {
+                if (property.key === "emailDomain.enable" && property.value === "true") {
                     isOrganizationDiscoveryEnabled = true;
                 }
+
+                if (property.key === "emailDomainBasedSelfSignup.enable" && property.value === "true") {
+                    isEmailDomainBasedSelfRegistrationEnabled = true;
+                }
             }
         );
     }
@@ -83,6 +89,7 @@ const useGetOrganizationDiscoveryConfig = <
 
     return {
         data: {
+            isEmailDomainBasedSelfRegistrationEnabled,
             isOrganizationDiscoveryEnabled,
             ...data
         },

features/admin.organization-discovery.v1/components/discoverable-organizations-list-layout.scss

@@ -0,0 +1,15 @@
+.discoverable-organizations-list-layout {
+    .top-action-panel {
+        display: flex;
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 10px;
+
+        >.ui.grid {
+            flex-grow: 1;
+        }
+    }
+}

features/admin.organization-discovery.v1/components/discoverable-organizations-list-layout.tsx

@@ -0,0 +1,256 @@
+/**
+ * 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.
+ */
+
+import { Show } from "@wso2is/access-control";
+import { EventPublisher, FeatureConfigInterface } from "@wso2is/admin.core.v1";
+import { AdvancedSearchWithBasicFilters } from "@wso2is/admin.core.v1/components";
+import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
+import { history } from "@wso2is/admin.core.v1/helpers/history";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import { I18n } from "@wso2is/i18n";
+import { ListLayout, PrimaryButton } from "@wso2is/react-components";
+import find from "lodash-es/find";
+import React, {
+    FunctionComponent,
+    MouseEvent,
+    ReactElement,
+    ReactNode,
+    SyntheticEvent,
+    useCallback,
+    useState } from "react";
+import { useTranslation } from "react-i18next";
+import { DropdownItemProps, DropdownProps, Icon, PaginationProps } from "semantic-ui-react";
+import DiscoverableOrganizationsList from "./discoverable-organizations-list";
+import { OrganizationListWithDiscoveryInterface } from "../models/organization-discovery";
+import "./discoverable-organizations-list-layout.scss";
+
+/**
+ * Props interface of {@link DiscoverableOrganizationsListLayout}
+ */
+export interface DiscoverableOrganizationsListLayoutPropsInterface extends IdentifiableComponentInterface {
+    discoverableOrganizations: OrganizationListWithDiscoveryInterface
+    listItemLimit: number;
+    isDiscoverableOrganizationsFetchRequestLoading: boolean;
+    featureConfig: FeatureConfigInterface;
+    searchQuery: string;
+    onListItemLimitChange: (limit: number) => void;
+    onListOffsetChange: (offset: number) => void;
+    onSearchQueryChange: (query: string) => void;
+
+}
+
+/**
+ * Layout for the discoverable organizations list.
+ *
+ * @param props - Props injected to the component.
+ * @returns Discoverable organization list layout component.
+ */
+const DiscoverableOrganizationsListLayout: FunctionComponent<DiscoverableOrganizationsListLayoutPropsInterface> = (
+    props: DiscoverableOrganizationsListLayoutPropsInterface
+): ReactElement => {
+
+    const {
+        discoverableOrganizations,
+        listItemLimit,
+        isDiscoverableOrganizationsFetchRequestLoading,
+        featureConfig,
+        searchQuery,
+        onListItemLimitChange,
+        onListOffsetChange,
+        onSearchQueryChange,
+        [ "data-componentid" ]: componentId
+    } = props;
+
+    const ORGANIZATIONS_LIST_SORTING_OPTIONS: DropdownItemProps[] = [
+        {
+            key: 0,
+            text: I18n.instance.t("organizationDiscovery:advancedSearch." +
+            "form.dropdown.filterAttributeOptions.organizationName") as ReactNode,
+            value: "organizationName"
+        }
+    ];
+
+    const eventPublisher: EventPublisher = EventPublisher.getInstance();
+    const { t } = useTranslation();
+    const [ triggerClearQuery, setTriggerClearQuery ] = useState<boolean>(false);
+    const [ listSortingStrategy, setListSortingStrategy ] = useState<DropdownItemProps>(
+        ORGANIZATIONS_LIST_SORTING_OPTIONS[ 0 ]
+    );
+
+    /**
+     * Handles the `onFilter` callback action from the
+     * organization search component.
+     *
+     * @param query - Search query.
+     */
+    const handleOrganizationFilter: (query: string) => void = useCallback(
+        (query: string): void => {
+            onSearchQueryChange(query);
+        },
+        [ onSearchQueryChange ]
+    );
+
+    /**
+     * Handles the `onSearchQueryClear` callback action.
+     */
+    const handleSearchQueryClear: () => void = useCallback((): void => {
+        setTriggerClearQuery(!triggerClearQuery);
+        onSearchQueryChange("");
+    }, [ onSearchQueryChange, triggerClearQuery ]);
+
+    /**
+     * Handles per page dropdown page.
+     *
+     * @param event - Mouse event.
+     * @param data - Dropdown data.
+     */
+    const handleItemsPerPageDropdownChange = (event: MouseEvent<HTMLAnchorElement>, data: DropdownProps): void => {
+        onListItemLimitChange(data.value as number);
+    };
+
+    /**
+     * Handles the pagination change.
+     *
+     * @param event - Mouse event.
+     * @param data - Pagination component data.
+     */
+    const handlePaginationChange = (event: MouseEvent<HTMLAnchorElement>, data: PaginationProps) => {
+        const offsetValue: number = ((data.activePage as number) - 1) * listItemLimit;
+
+        onListOffsetChange(offsetValue);
+    };
+
+    /**
+     * Sets the list sorting strategy.
+     *
+     * @param event - The event.
+     * @param data - Dropdown data.
+     */
+    const handleListSortingStrategyOnChange = (event: SyntheticEvent<HTMLElement>, data: DropdownProps): void => {
+        setListSortingStrategy(
+            find(ORGANIZATIONS_LIST_SORTING_OPTIONS, (option: DropdownItemProps) => {
+                return data.value === option.value;
+            })
+        );
+    };
+
+    /**
+     * Checks if the `Next` page nav button should be shown.
+     *
+     * @param orgList - List of discoverable organizations.
+     * @returns `true` if `Next` page nav button should be shown.
+     */
+    const shouldShowNextPageNavigation = (orgList: OrganizationListWithDiscoveryInterface): boolean => {
+        return orgList?.startIndex + orgList?.count !== orgList?.totalResults + 1;
+    };
+
+    return (
+        <ListLayout
+            advancedSearch={ (
+                <AdvancedSearchWithBasicFilters
+                    onFilter={ handleOrganizationFilter }
+                    filterAttributeOptions={ [
+                        {
+                            key: 0,
+                            text: t("organizationDiscovery:advancedSearch." +
+                            "form.dropdown.filterAttributeOptions.organizationName"),
+                            value: "organizationName"
+                        }
+                    ] }
+                    filterAttributePlaceholder={ t(
+                        "organizationDiscovery:advancedSearch.form" +
+                                ".inputs.filterAttribute.placeholder"
+                    ) }
+                    filterConditionsPlaceholder={ t(
+                        "organizationDiscovery:advancedSearch.form" +
+                                ".inputs.filterCondition.placeholder"
+                    ) }
+                    filterValuePlaceholder={ t(
+                        "organizationDiscovery:advancedSearch.form" +
+                        ".inputs.filterValue.placeholder"
+                    ) }
+                    placeholder={ t(
+                        "organizationDiscovery:advancedSearch.placeholder"
+                    ) }
+                    defaultSearchAttribute="organizationName"
+                    defaultSearchOperator="co"
+                    triggerClearQuery={ triggerClearQuery }
+                    data-componentid={ `${ componentId }-list-advanced-search` }
+                />
+            ) }
+            currentListSize={ discoverableOrganizations?.organizations?.length }
+            listItemLimit={ listItemLimit }
+            onItemsPerPageDropdownChange={ handleItemsPerPageDropdownChange }
+            onPageChange={ handlePaginationChange }
+            onSortStrategyChange={ handleListSortingStrategyOnChange }
+            showTopActionPanel={
+                isDiscoverableOrganizationsFetchRequestLoading ||
+                        !(!searchQuery && discoverableOrganizations?.organizations?.length <= 0)
+            }
+            sortOptions={ ORGANIZATIONS_LIST_SORTING_OPTIONS }
+            sortStrategy={ listSortingStrategy }
+            topActionPanelExtension={
+                (
+                    <Show when={ featureConfig?.organizationDiscovery?.scopes?.create }>
+                        <PrimaryButton
+                            disabled={ isDiscoverableOrganizationsFetchRequestLoading }
+                            loading={ isDiscoverableOrganizationsFetchRequestLoading }
+                            onClick={ () => {
+                                eventPublisher.publish("organization-click-assign-email-domain-button");
+                                history.push(
+                                    AppConstants.getPaths().get("ASSIGN_ORGANIZATION_DISCOVERY_DOMAINS")
+                                );
+                            } }
+                            data-componentid={ `${ componentId }-assign-button` }
+                        >
+                            <Icon name="add" />
+                            { t("organizationDiscovery:emailDomains.actions.assign") }
+                        </PrimaryButton>
+                    </Show>
+                ) }
+            totalPages={ 10 }
+            totalListSize={ discoverableOrganizations?.organizations?.length }
+            isLoading={ isDiscoverableOrganizationsFetchRequestLoading }
+            paginationOptions={ {
+                disableNextButton: !shouldShowNextPageNavigation(discoverableOrganizations)
+            } }
+            data-componentid={ `${ componentId }-list-layout` }
+            className="discoverable-organizations-list-layout"
+            showPagination
+        >
+            <DiscoverableOrganizationsList
+                list={ discoverableOrganizations }
+                onEmptyListPlaceholderActionClick={ () => {
+                    history.push(AppConstants.getPaths().get("ASSIGN_ORGANIZATION_DISCOVERY_DOMAINS"));
+                } }
+                onSearchQueryClear={ handleSearchQueryClear }
+                searchQuery={ searchQuery }
+                data-componentid="organization-list-with-discovery"
+            />
+        </ListLayout>
+    );
+};
+
+/**
+ * Default props for the component.
+ */
+DiscoverableOrganizationsListLayout.defaultProps = {
+    "data-componentid": "discoverable-organizations-list-layout"
+};
+
+export default DiscoverableOrganizationsListLayout;

features/admin.organization-discovery.v1/models/organization-discovery.ts

@@ -77,7 +77,7 @@ export interface OrganizationAttributesInterface {
 
 export interface OrganizationDiscoveryConfigPropertyInterface {
     key: string;
-    value: boolean;
+    value: string;
 }
 
 export interface OrganizationDiscoveryAttributesInterface {