[feature-porting] Onboard sign-in options visual editor

apps/console/package.json

@@ -42,13 +42,14 @@
         "@microsoft/applicationinsights-core-js": "^3.0.0",
         "@microsoft/applicationinsights-react-js": "^3.4.2",
         "@microsoft/applicationinsights-web": "^3.0.0",
+        "@monaco-editor/react": "^4.5.1",
         "@mui/icons-material": "^5.11.16",
         "@mui/lab": "5.0.0-alpha.129",
         "@mui/material": "^5.13.0",
         "@mui/system": "^5.12.3",
         "@mui/utils": "^5.12.3",
-        "@oxygen-ui/react": "^1.1.11",
-        "@oxygen-ui/react-icons": "^1.1.11",
+        "@oxygen-ui/react": "^1.3.0",
+        "@oxygen-ui/react-icons": "^1.3.0",
         "@wso2is/access-control": "^2.0.2",
         "@wso2is/core": "^2.0.1",
         "@wso2is/form": "^2.0.0",
@@ -83,6 +84,7 @@
         "react-notification-system": "^0.4.0",
         "react-redux": "^7.2.9",
         "react-router-dom": "^4.3.1",
+        "reactflow": "^11.7.2",
         "reactour": "^1.18.0",
         "recharts": "^2.6.2",
         "reduce-reducers": "^1.0.4",

apps/console/src/features/applications/api/application.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023, 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
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import { AsgardeoSPAClient, HttpClientInstance, HttpRequestConfig } from "@asgardeo/auth-react";
 import { IdentityAppsApiException } from "@wso2is/core/exceptions";
 import { HttpMethods } from "@wso2is/core/models";
@@ -27,6 +28,7 @@ import useRequest, {
 import { store } from "../../core/store";
 import { ApplicationManagementConstants } from "../constants";
 import {
+    AdaptiveAuthTemplateCategoryListItemInterface,
     AdaptiveAuthTemplatesListInterface,
     ApplicationBasicInterface,
     ApplicationInterface,
@@ -764,6 +766,50 @@ export const getAdaptiveAuthTemplates = (): Promise<AdaptiveAuthTemplatesListInt
         });
 };
 
+/**
+ * Hook to get the adaptive templates.
+ *
+ * @returns Adaptive auth template GET hook.
+ */
+export const useGetAdaptiveAuthTemplates = <
+    Data = AdaptiveAuthTemplateCategoryListItemInterface,
+    Error = RequestErrorInterface
+>(): RequestResultInterface<Data, Error> => {
+    const requestConfig: RequestConfigInterface = {
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json"
+        },
+        method: HttpMethods.GET,
+        url: `${store.getState().config.endpoints.applications}/meta/adaptive-auth-templates`
+    };
+
+    const {
+        data,
+        error,
+        isValidating,
+        mutate
+    } = useRequest<Data, Error>(requestConfig);
+
+    let parsed: Data | undefined = undefined;
+
+    if ((data as AdaptiveAuthTemplatesListInterface)?.templatesJSON) {
+        try {
+            parsed = JSON.parse((data as any).templatesJSON);
+        } catch(e) {
+            parsed = undefined;
+        }
+    }
+
+    return {
+        data: parsed,
+        error,
+        isLoading: !error && !data,
+        isValidating,
+        mutate
+    };
+};
+
 /**
  * Get Application Template data.
  *

apps/console/src/features/applications/components/settings/sign-on-methods/script-based-flow/script-based-flow.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2020-2023, 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
@@ -15,6 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
 import Chip from "@oxygen-ui/react/Chip";
 import { FeatureStatus, FeatureTags, useCheckFeatureStatus, useCheckFeatureTags } from "@wso2is/access-control";
 import { UIConstants } from "@wso2is/core/constants";
@@ -60,6 +61,7 @@ import { Dispatch } from "redux";
 import { Checkbox, Dropdown, Header, Icon, Input, Menu, Sidebar } from "semantic-ui-react";
 import { stripSlashes } from "slashes";
 import { ScriptTemplatesSidePanel, ScriptTemplatesSidePanelRefInterface } from "./script-templates-side-panel";
+import useAuthenticationFlow from "../../../../../authentication-flow-builder/hooks/use-authentication-flow";
 import { AppUtils, EventPublisher, getOperationIcons } from "../../../../../core";
 import { OrganizationType } from "../../../../../organizations/constants";
 import { OrganizationUtils } from "../../../../../organizations/utils";
@@ -75,7 +77,6 @@ import {
     AuthenticationSequenceInterface
 } from "../../../../models";
 import { AdaptiveScriptUtils } from "../../../../utils/adaptive-script-utils";
-import UseAuthenticationFlow from "../hooks/use-authentication-flow";
 
 /**
  * Proptypes for the adaptive scripts component.
@@ -185,7 +186,7 @@ export const ScriptBasedFlow: FunctionComponent<AdaptiveScriptsPropsInterface> =
     const [ showDeleteConfirmationModal, setShowDeleteConfirmationModal ] = useState<boolean>(false);
     const [ deletingSecret, setDeletingSecret ] = useState<SecretModel>(undefined);
 
-    const { isConditionalAuthenticationEnabled, onConditionalAuthenticationToggle } = UseAuthenticationFlow();
+    const { isConditionalAuthenticationEnabled, onConditionalAuthenticationToggle } = useAuthenticationFlow();
 
     const eventPublisher: EventPublisher = EventPublisher.getInstance();
 
@@ -237,8 +238,8 @@ export const ScriptBasedFlow: FunctionComponent<AdaptiveScriptsPropsInterface> =
      * Check if the feature is a premium.
      */
     useEffect(() => {
-        if(adaptiveFeatureStatus === FeatureStatus.ENABLED 
-            && adaptiveFeatureTags?.includes(FeatureTags.PREMIUM)) {           
+        if (adaptiveFeatureStatus === FeatureStatus.ENABLED
+            && adaptiveFeatureTags?.includes(FeatureTags.PREMIUM)) {
             setIsPremiumFeature(true);
         }
     }, []);

apps/console/src/features/applications/components/settings/sign-on-methods/script-based-flow/script-templates-side-panel.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2020, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2020, 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
@@ -31,7 +31,8 @@ import React, {
 } from "react";
 import { useTranslation } from "react-i18next";
 import { Accordion, Icon, Menu, Segment, Sidebar } from "semantic-ui-react";
-import { TemplateDescription } from "./template-description";
+// eslint-disable-next-line max-len
+import AdaptiveAuthTemplateInfoModal from "../../../../../authentication-flow-builder/components/predefined-flows-side-panel/adaptive-auth-template-info-modal";
 import { AdaptiveAuthTemplateCategoryInterface, AdaptiveAuthTemplateInterface } from "../../../../models";
 
 /**
@@ -218,9 +219,8 @@ export const ScriptTemplatesSidePanel: FunctionComponent<ScriptTemplatesSidePane
         return (
             <>
                 {
-                    selectedTemplate &&
-                    (
-                        <TemplateDescription
+                    selectedTemplate && (
+                        <AdaptiveAuthTemplateInfoModal
                             template={ selectedTemplate }
                             open={ !!selectedTemplate }
                             onClose={ closeTemplateDescriptionModal }