Improve Identity Verification Providers feature

apps/console/src/public/deployment.config.json

@@ -657,10 +657,10 @@
  }
  },
  "identityVerificationProviders": {
- "enabled": false,
+ "enabled": true,
  "scopes": {
  "create": [
- "internal_idvp_create"
+ "internal_idvp_add"
  ],
  "delete": [
  "internal_idvp_delete"

features/admin.connections.v1/components/create/connection-create-wizard-factory.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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 {
+ IdVPCreationModal
+} from "@wso2is/admin.identity-verification-providers.v1/components/modals/idvp-creation-modal";
+import { IdentifiableComponentInterface } from "@wso2is/core/models";
+import React, { FC, ReactElement } from "react";
+import { AuthenticatorCreateWizardFactory } from "./authenticator-create-wizard-factory";
+import {
+ ConnectionTemplateInterface,
+ GenericConnectionCreateWizardPropsInterface
+} from "../../models/connection";
+
+enum ConnectionType {
+ CONNECTION = "connections",
+ IDVP = "identity-verification-providers"
+}
+
+/**
+ * Proptypes for the Authenticator Create Wizard factory.
+ */
+interface ConnectionCreateWizardFactoryPropsInterface extends IdentifiableComponentInterface {
+
+ /**
+ * Show/Hide the wizard
+ */
+ isModalOpen: boolean;
+ /**
+ * Callback to be triggered on modal visibility change.
+ */
+ handleModalVisibility: (isVisible: boolean) => void;
+ /**
+ * Callback to be triggered on wizard close.
+ */
+ onWizardClose: GenericConnectionCreateWizardPropsInterface[ "onWizardClose" ];
+ /**
+ * Callback to be triggered on successful IDP create.
+ */
+ onIDPCreate: GenericConnectionCreateWizardPropsInterface[ "onIDPCreate" ];
+ connectionType: ConnectionType;
+ /**
+ * Type of the wizard.
+ */
+ type: string;
+ /**
+ * Selected template. Added this since this {@link AuthenticatorCreateWizardFactory}
+ * does not support template grouping. If we are introducing the functionality
+ * this must be well tested because it might be a breaking change. For more context
+ * please refer {@link IdentityProviderTemplateSelectPage}
+ */
+ selectedTemplate?: ConnectionTemplateInterface;
+}
+
+/**
+ * Authenticator Create Wizard factory.
+ *
+ * @param props - Props injected to the component.
+ *
+ * @returns ReactElement
+ */
+export const ConnectionCreateWizardFactory: FC<ConnectionCreateWizardFactoryPropsInterface> = (
+ {
+ isModalOpen,
+ handleModalVisibility,
+ onWizardClose,
+ connectionType,
+ type,
+ selectedTemplate,
+ ...rest
+ }: ConnectionCreateWizardFactoryPropsInterface
+): ReactElement => {
+
+ if (!isModalOpen) {
+ return null;
+ }
+
+ switch (connectionType) {
+ case ConnectionType.IDVP:
+ return (
+ <IdVPCreationModal
+ selectedTemplate={ selectedTemplate }
+ selectedTemplateId={ selectedTemplate?.id }
+ onClose={ onWizardClose }
+ />
+ );
+
+ case ConnectionType.CONNECTION:
+ return (
+ <AuthenticatorCreateWizardFactory
+ isModalOpen={ isModalOpen }
+ handleModalVisibility={ handleModalVisibility }
+ type={ type }
+ selectedTemplate={ selectedTemplate }
+ onWizardClose={ onWizardClose }
+ { ...rest }
+ />
+ );
+
+ default:
+ return null;
+ };
+};

features/admin.connections.v1/models/connection.ts

@@ -441,6 +441,7 @@ export interface ConnectionTemplateListItemInterface extends ConnectionTemplateI
  */
 export interface ConnectionTemplateItemInterface {
  id?: string;
+ version?: string;
  name?: string;
  description?: string;
  image?: any;

features/admin.connections.v1/package.json

@@ -29,8 +29,10 @@
  "@wso2is/admin.extensions.v1": "^2.30.0",
  "@wso2is/admin.feature-gate.v1": "^1.1.0",
  "@wso2is/admin.identity-providers.v1": "^2.22.0",
+ "@wso2is/admin.identity-verification-providers.v1": "workspace:^2.22.0",
  "@wso2is/admin.organizations.v1": "^2.22.0",
  "@wso2is/admin.roles.v2": "^2.22.0",
+ "@wso2is/admin.template-core.v1": "^1.0.52",
  "@wso2is/admin.userstores.v1": "^2.21.0",
  "@wso2is/core": "^2.1.0",
  "@wso2is/dynamic-forms": "^2.0.107",
@@ -75,8 +77,7 @@
  "slashes": "^2.0.2",
  "styled-components": "^4.4.1",
  "swr": "^2.0.0",
- "uuid": "^8.3.0",
- "@wso2is/admin.template-core.v1": "^1.0.52"
+ "uuid": "^8.3.0"
  },
  "devDependencies": {
  "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

features/admin.connections.v1/pages/connection-templates.tsx

@@ -16,6 +16,7 @@
  * under the License.
  */
 
+import { FeatureAccessConfigInterface, useRequiredScopes } from "@wso2is/access-control";
 import { AppState, EventPublisher, history } from "@wso2is/admin.core.v1";
 import {
  getEmptyPlaceholderIllustrations
@@ -24,8 +25,12 @@
  AppConstants
 } from "@wso2is/admin.core.v1/constants/app-constants";
 import useDeploymentConfig from "@wso2is/admin.core.v1/hooks/use-app-configs";
+import { RequestErrorInterface } from "@wso2is/admin.core.v1/hooks/use-request";
 import useUIConfig from "@wso2is/admin.core.v1/hooks/use-ui-configs";
 import { FeatureStatusLabel } from "@wso2is/admin.feature-gate.v1/models/feature-status";
+import {
+ useGetIdVPTemplateList
+} from "@wso2is/admin.identity-verification-providers.v1/api/use-get-idvp-template-list";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import {
  DocumentationLink,
@@ -36,15 +41,14 @@
  SearchWithFilterLabels,
  useDocumentation
 } from "@wso2is/react-components";
+import { AxiosError } from "axios";
 import union from "lodash-es/union";
-import React, { FC, ReactElement, ReactNode, SyntheticEvent, useEffect, useState } from "react";
+import React, { FC, ReactElement, ReactNode, SyntheticEvent, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
 import { RouteComponentProps } from "react-router";
 import { useGetConnectionTemplates } from "../api/use-get-connection-templates";
-import {
- AuthenticatorCreateWizardFactory
-} from "../components/create/authenticator-create-wizard-factory";
+import { ConnectionCreateWizardFactory } from "../components/create/connection-create-wizard-factory";
 import { CommonAuthenticatorConstants } from "../constants/common-authenticator-constants";
 import { ConnectionUIConstants } from "../constants/connection-ui-constants";
 import {
@@ -86,6 +90,9 @@
  const { UIConfig } = useUIConfig();
 
  const productName: string = useSelector((state: AppState) => state?.config?.ui?.productName);
+ const idVPFeatureConfig: FeatureAccessConfigInterface = UIConfig?.features?.identityVerificationProviders;
+ const isIdVPFeatureEnabled: boolean = idVPFeatureConfig?.enabled;
+ const hasIdVPCreatePermissions: boolean = useRequiredScopes(idVPFeatureConfig?.scopes?.create);
 
  // External connection resources URL from the UI config.
  const connectionResourcesUrl: string = UIConfig?.connectionResourcesUrl;
@@ -106,25 +113,47 @@
  isValidating: isConnectionTemplatesRequestValidating
  } = useGetConnectionTemplates(null, null, null);
 
+ const {
+ data: fetchedIdVPTemplates,
+ isLoading: isIdVPTemplatesFetchRequestLoading,
+ error: idVPTemplatesFetchRequestError,
+ isValidating: isIdVPTemplatesRequestValidating
+ } = useGetIdVPTemplateList(isIdVPFeatureEnabled && hasIdVPCreatePermissions);
+
+ const isTemplatesLoading: boolean = isConnectionTemplatesFetchRequestLoading || isIdVPTemplatesFetchRequestLoading;
+ const isTemplatesValidating: boolean = isConnectionTemplatesRequestValidating || isIdVPTemplatesRequestValidating;
+ const templatesFetchError: AxiosError<RequestErrorInterface> = connectionTemplatesFetchRequestError
+ || idVPTemplatesFetchRequestError;
+
+ const combinedConnectionTemplates: ConnectionTemplateInterface[] = useMemo(() => {
+ if (isTemplatesLoading || templatesFetchError) {
+ return [];
+ }
+
+ return [ ...fetchedConnectionTemplates, ...fetchedIdVPTemplates ];
+ }, [ isTemplatesLoading, isTemplatesValidating, templatesFetchError ]);
+
  /**
  * Set the filtered connection templates to the component state
  * and set the filter tags lit based on the fetched templates.
  */
  useEffect(() => {
- if (fetchedConnectionTemplates?.length > 0) {
- setFilteredConnectionTemplates(fetchedConnectionTemplates);
+ if (isTemplatesLoading) {
+ return;
+ }
 
-  let _filterTagsList: string[] = [];
+ setFilteredConnectionTemplates(combinedConnectionTemplates);
 
- for (const template of fetchedConnectionTemplates) {
- if (template.tags?.length > 0) {
- _filterTagsList = union(_filterTagsList, template.tags);
- }
+ let _filterTagsList: string[] = [];
+
+ for (const template of combinedConnectionTemplates) {
+ if (template.tags?.length > 0) {
+ _filterTagsList = union(_filterTagsList, template.tags);
  }
- setFilterTags(_filterTagsList);
  }
+ setFilterTags(_filterTagsList);
 
- }, [ isConnectionTemplatesRequestValidating, connectionTemplatesFetchRequestError ]);
+ }, [ isConnectionTemplatesFetchRequestLoading, isIdVPTemplatesFetchRequestLoading ]);
 
  /**
  * Handles the connection template fetch request errors.
@@ -181,6 +210,8 @@
  ({ id: templateId }: { id: string }) => (templateId === id));
 
  if (selectedTemplate) {
+ console.log("selectedTemplate", selectedTemplate);
+
  setSelectedTemplate(selectedTemplate);
  eventPublisher.publish("connections-select-template", {
  type: selectedTemplate.templateId
@@ -224,13 +255,13 @@
 
  if (filterLabels.length > 0) {
  // Filter out the templates based on the selected filter labels.
- for (const connectionTemplate of fetchedConnectionTemplates) {
+ for (const connectionTemplate of combinedConnectionTemplates) {
  if (connectionTemplate.tags.some((tag: string) => filterLabels.includes(tag))) {
  _filteredCategorizedTemplates.push(connectionTemplate);
  }
  }
  } else {
- _filteredCategorizedTemplates = [ ...fetchedConnectionTemplates ];
+ _filteredCategorizedTemplates = [ ...combinedConnectionTemplates ];
  }
 
  if (query) {
@@ -352,13 +383,14 @@
  onSearch={ handleConnectionTypeSearch }
  onFilter={ handleConnectionTypeFilter }
  filterLabels={ filterTags }
+ isLoading={ isTemplatesLoading }
  />
  ) }
- isLoading={ isConnectionTemplatesFetchRequestLoading }
  >
  <ResourceGrid
  isEmpty={ filteredConnectionTemplates?.length === 0 }
  emptyPlaceholder={ showPlaceholders(filteredConnectionTemplates) }
+ isLoading={ isTemplatesLoading }
  >
  {
  filteredConnectionTemplates?.map((
@@ -431,9 +463,10 @@
  </GridLayout>
  {
  showWizard && (
- <AuthenticatorCreateWizardFactory
+ <ConnectionCreateWizardFactory
  isModalOpen={ showWizard }
  handleModalVisibility={ (isOpen: boolean) => setShowWizard(isOpen) }
+ connectionType={ selectedTemplate?.type }
  type={ templateType }
  selectedTemplate={ selectedTemplate }
  onIDPCreate={ handleSuccessfulIDPCreation }