fix(ui): TE-XX redirect to new json and advanced editors

thirdeye-ui/src/app/components/alert-wizard-v2/alert-details/alert-details-v2.component.tsx

@@ -12,16 +12,10 @@
  * See the License for the specific language governing permissions and limitations under
  * the License.
  */
-import {
-    Box,
-    FormHelperText,
-    Grid,
-    TextField,
-    Typography,
-} from "@material-ui/core";
+import { FormHelperText, Grid, TextField } from "@material-ui/core";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { easyAlertStyles } from "../../../pages/alerts-create-page/alerts-create-easy-page/alerts-create-easy-page.styles";
+import { NavigateAlertCreationFlowsDropdown } from "../../alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2";
 import { InputSectionV2 } from "../../form-basics/input-section-v2/input-section-v2.component";
 import { AlertDetailsProps } from "./alert-details.interfaces";
 import { AlertFrequency } from "./alert-frequency-v2/alert-frequency.component";
@@ -34,7 +28,6 @@ function AlertDetails({
     const [description, setDescription] = useState(alert.description);
     const [nameHasError, setNameHasError] = useState(false);
     const { t } = useTranslation();
-    const easyAlertClasses = easyAlertStyles();
 
     const handleNameChange = (
         e: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
@@ -56,27 +49,11 @@ function AlertDetails({
     return (
         <Grid container>
             <Grid item xs={12}>
-                <Box marginBottom={2} marginTop={2}>
-                    <Grid
-                        container
-                        alignContent="center"
-                        justifyContent="space-between"
-                    >
-                        <Grid item>
-                            <Typography
-                                className={easyAlertClasses.header}
-                                variant="h5"
-                            >
-                                {t("label.advanced-alert-old")}
-                            </Typography>
-                            <Typography variant="body2">
-                                {t(
-                                    "message.create-your-alert-filling-out-the-fields"
-                                )}
-                            </Typography>
-                        </Grid>
+                <Grid container alignContent="center" justifyContent="flex-end">
+                    <Grid item>
+                        <NavigateAlertCreationFlowsDropdown />
                     </Grid>
-                </Box>
+                </Grid>
             </Grid>
             <Grid item xs={4}>
                 <InputSectionV2

thirdeye-ui/src/app/components/alert-wizard-v2/alert-json-v2/alert-json.component.tsx

@@ -29,6 +29,7 @@ import { THIRDEYE_DOC_LINK } from "../../../utils/constants/constants.util";
 import { validateJSON } from "../../../utils/validation/validation.util";
 import { HelpDrawerV1 } from "../../help-drawer-v1/help-drawer-v1.component";
 import { AlertJsonProps } from "./alert-json.interfaces";
+import { NavigateAlertCreationFlowsDropdown } from "../../alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2";
 
 export const AlertJson: FunctionComponent<AlertJsonProps> = ({
     alert,
@@ -63,17 +64,19 @@ export const AlertJson: FunctionComponent<AlertJsonProps> = ({
 
     return (
         <Grid container>
+            <Grid item xs={12}>
+                <Grid container alignContent="center" justifyContent="flex-end">
+                    <Grid item>
+                        <NavigateAlertCreationFlowsDropdown />
+                    </Grid>
+                </Grid>
+            </Grid>
             <Grid item xs={12}>
                 <Grid
                     container
                     alignContent="center"
                     justifyContent="space-between"
                 >
-                    <Grid item>
-                        <Typography className={classes.header} variant="h5">
-                            {t("label.advanced-json-editor")}
-                        </Typography>
-                    </Grid>
                     <PageHeaderActionsV1>
                         <HelpDrawerV1
                             title={`${t("label.need-help")}?`}

thirdeye-ui/src/app/components/alert-wizard-v2/alert-template/alert-template-v2.component.tsx

@@ -28,7 +28,6 @@ import { easyAlertStyles } from "../../../pages/alerts-create-page/alerts-create
 import { AlertTemplate as AlertTemplateType } from "../../../rest/dto/alert-template.interfaces";
 import { TemplatePropertiesObject } from "../../../rest/dto/alert.interfaces";
 import { getAlertTemplatesCreatePath } from "../../../utils/routes/routes.util";
-import { AlertTemplatesInformationLinks } from "../../alert-wizard-v3/alert-templates-information-links/alert-templates-information-links";
 import { InputSectionV2 } from "../../form-basics/input-section-v2/input-section-v2.component";
 import { useAlertWizardV2Styles } from "../alert-wizard-v2.styles";
 import { AlertTemplatePropertiesBuilder } from "./alert-template-properties-builder/alert-template-properties-builder-v2.component";
@@ -171,16 +170,10 @@ function AlertTemplate({
                     <Typography className={classes.header} variant="h6">
                         {t("label.detection-template")}
                     </Typography>
-                    <Typography variant="body2">
-                        {t("label.select-the-detection-type-for-your-data")}
-                    </Typography>
                 </Box>
             </Grid>
             <Grid item xs={4}>
                 <InputSectionV2
-                    description={t(
-                        "message.select-a-template-to-monitor-an-detect-anomalies"
-                    )}
                     inputComponent={
                         <>
                             <Autocomplete<AlertTemplateType>
@@ -222,22 +215,32 @@ function AlertTemplate({
                 />
             </Grid>
             <Grid item xs={4}>
-                <Box alignItems="center" display="flex" height="100%">
+                <Box alignItems="flex-end" display="flex" height="100%">
                     <Button
                         className={easyAlertClasses.infoButton}
                         color="primary"
                         size="small"
                         variant="outlined"
                     >
-                        <Box component="span" display="flex" mr={1}>
-                            <Icon
-                                fontSize={24}
-                                icon="mdi:info-circle-outline"
-                            />
-                        </Box>
-                        <Box component="span">
-                            <AlertTemplatesInformationLinks />
-                        </Box>
+                        <Link
+                            className={
+                                easyAlertClasses.recommendedAlgorithmContainer
+                            }
+                            href="https://dev.startree.ai/docs/startree-enterprise-edition/startree-thirdeye/concepts/anomaly-detection-algorithms#detection-algorithms"
+                            target="_blank"
+                        >
+                            <Box component="span" display="flex" mr={1}>
+                                <Icon
+                                    fontSize={24}
+                                    icon="mdi:info-circle-outline"
+                                />
+                            </Box>
+                            <Box>
+                                <Typography variant="caption">
+                                    {t("message.view-algorithms-documentation")}
+                                </Typography>
+                            </Box>
+                        </Link>
                     </Button>
                 </Box>
             </Grid>

thirdeye-ui/src/app/components/alert-wizard-v3/navigate-alert-creation-flows-dropdown/navigate-alert-creation-flows-dropdown-v2.tsx

@@ -0,0 +1,124 @@
+/*
+ * Copyright 2023 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (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.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+import { Box, Grid, TextField } from "@material-ui/core";
+import { Autocomplete } from "@material-ui/lab";
+import React, { FunctionComponent, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { AppRouteRelative } from "../../../utils/routes/routes.util";
+import { ALERT_CREATION_NAVIGATE_DROPDOWN_TEST_IDS } from "./navigate-alert-creation-flows-dropdown.interface";
+import { useNavigateAlertCreationFlowsDropdownStyles } from "./navigate-alert-creation-flows-dropdown.styles";
+
+export const NavigateAlertCreationFlowsDropdown: FunctionComponent = () => {
+    const { t } = useTranslation();
+    const classes = useNavigateAlertCreationFlowsDropdownStyles();
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [searchParams] = useSearchParams();
+
+    /**
+     * `/alerts/73/update/simple`
+     * `/alerts/create/new/advanced`
+     * `/alerts/create/new/new-user/select-type`
+     * `/alerts/create/copy/69689/json-editor`
+     * `/alerts/create/copy/69689/new-user/select-type`
+     * `/welcome/create-alert/simple`
+     * `/welcome/create-alert/new-user/select-type`
+     */
+    const routePathPrefix = useMemo(() => {
+        let endIdx = 4;
+
+        if (location.pathname.includes(AppRouteRelative.WELCOME)) {
+            endIdx = 3;
+        }
+
+        if (
+            location.pathname.includes(
+                AppRouteRelative.ALERTS_CREATE_COPY.replace("/:id", "")
+            )
+        ) {
+            endIdx = 5;
+        }
+
+        return location.pathname.split("/").slice(0, endIdx).join("/");
+    }, [location]);
+
+    const shortcutCreateMenuItems = [
+        {
+            matcher: (path: string) =>
+                path.endsWith(AppRouteRelative.ALERTS_CREATE_ADVANCED_V2),
+            navLink: AppRouteRelative.ALERTS_CREATE_ADVANCED_V2,
+            text: t("label.advanced-setup"),
+        },
+        {
+            matcher: (path: string) =>
+                path.endsWith(AppRouteRelative.ALERTS_CREATE_JSON_EDITOR_V2),
+            navLink: AppRouteRelative.ALERTS_CREATE_JSON_EDITOR_V2,
+            text: t("label.json-setup"),
+        },
+    ];
+
+    const currentPage = useMemo(() => {
+        return shortcutCreateMenuItems.find((candidate) => {
+            return candidate.matcher(location.pathname);
+        });
+    }, [location]);
+
+    return (
+        <Grid container alignContent="center">
+            <Grid item>
+                <Box paddingTop={1}>
+                    {t("label.alert-editor")}
+                    {": "}
+                </Box>
+            </Grid>
+
+            <Grid item>
+                <Autocomplete
+                    disableClearable
+                    className={classes.autocomplete}
+                    data-testid={
+                        ALERT_CREATION_NAVIGATE_DROPDOWN_TEST_IDS.DROPDOWN_CONTAINER
+                    }
+                    getOptionLabel={(option) => option.text}
+                    options={shortcutCreateMenuItems}
+                    renderInput={(params) => (
+                        <TextField
+                            {...params}
+                            InputProps={{
+                                ...params.InputProps,
+                                /**
+                                 * Override class name so
+                                 * the size of input is smaller
+                                 */
+                                className: classes.autoCompleteInput,
+                            }}
+                            variant="outlined"
+                        />
+                    )}
+                    size="small"
+                    value={currentPage}
+                    onChange={(_, selectedValue) => {
+                        navigate(
+                            `${routePathPrefix}/${
+                                selectedValue.navLink
+                            }?${searchParams.toString()}`
+                        );
+                    }}
+                />
+            </Grid>
+        </Grid>
+    );
+};

thirdeye-ui/src/app/locale/languages/en-us.json

@@ -277,7 +277,7 @@
         "duplicate": "Duplicate",
         "duplicate-entity": "Duplicate {{entity}}",
         "duration": "Duration",
-        "easy-alert": "Easy Alert",
+        "easy-alert": "Simple Setup",
         "edit": "Edit",
         "edit-entity": "Edit {{entity}}",
         "eg": "e.g.",
@@ -356,8 +356,9 @@
         "investigation-details": "Investigation details",
         "investigation-name": "Investigation name",
         "investigation-preview": "Investigation preview",
-        "json-alert": "JSON Alert",
+        "json-alert-setup": "JSON Alert Setup",
         "json-editor": "JSON Editor",
+        "json-setup": "JSON Setup",
         "last-1-hour": "Last 1 Hour",
         "last-12-hours": "Last 12 Hours",
         "last-15-minutes": "Last 15 Minutes",
@@ -518,7 +519,6 @@
         "select-granularity": "Select granularity",
         "select-how-often-to-check-for-anomalies": "Select how often to check for anomalies (\"Time Interval\"): more often for fast-changing metrcs, less often for stable ones.",
         "select-subscription-groups": "Select subscription groups",
-        "select-the-detection-type-for-your-data": "Select the Detection Type for your data",
         "select-the-time-increment-that-the-data-is-aggregated-to": "Select the time increment that the data is aggregated to",
         "selected": "Selected",
         "selected-count": "{{count}} selected",
@@ -535,6 +535,7 @@
         "show-log": "Show log",
         "show-previous-period-to-compare": "Show previous period to compare",
         "simple": "Simple",
+        "simple-alert-setup": "Simple Alert Setup",
         "single-metric": "Single Metric",
         "skip": "Skip",
         "slack": "Slack",
@@ -722,7 +723,6 @@
         "create-my-first-entity": "Create my first {{entity}}",
         "create-sample-alert-description": "Quickly preview ThirdEye by using a sample alert",
         "create-success": "{{entity}} created successfully",
-        "create-your-alert-filling-out-the-fields": "Create your alert filling out the fields",
         "create-your-first-alert-documentation": "create your first alert documentation",
         "dataset-datasource-required": "Datasource is required",
         "dataset-name-required": "Dataset name is required",
@@ -898,7 +898,6 @@
         "select-a-dimension-to-generate-the-anomaly-preview": "Select a dimension to generate the anomaly preview",
         "select-a-metric": "Select a metric",
         "select-a-metric-to-detect-anomalies": "Select a metric to detect anomalies",
-        "select-a-template-to-monitor-an-detect-anomalies": "Select a template to monitor an detect anomalies",
         "select-a-template-to-preview": "Select a template to preview the alert",
         "select-aggregation-function": "Select aggregation function",
         "select-aggregation-function-to-combine-multiple-data-value-into-a-single-result": "Select an aggregation function to combine multiple data values into a single statistic",
@@ -972,6 +971,7 @@
         "validation-failed": "Validation failed",
         "values-need-to-be-one-of-the-following-values": "\"{{propertyKey}}\" values need to be one of the following values: {{expectedKeys}}",
         "values-need-to-be-one-of-the-following-values-it-is": "\"{{propertyKey}}\" values need to be one of the following values: {{expectedKeys}}. It is: {{valueForProperty}}",
+        "view-algorithms-documentation": "View algorithms documentation",
         "view-detection-configuration": "View detection configuration",
         "view-documentation": "View documentation",
         "view-documentation-on-all-available-algorithms": "View documentation on all available algorithms",

thirdeye-ui/src/app/pages/alerts-all-page-v2/alerts-all-page.component.tsx

@@ -50,8 +50,8 @@ import { getUiAlerts } from "../../utils/alerts/alerts.util";
 import { notifyIfErrors } from "../../utils/notifications/notifications.util";
 import { getErrorMessages } from "../../utils/rest/rest.util";
 import {
-    getAlertsCreateAdvancePath,
-    getAlertsCreateNewJsonEditorPath,
+    getAlertsCreateAdvanceV2Path,
+    getAlertsCreateNewJsonEditorV2Path,
     getAlertsCreatePath,
     getAlertsEasyCreatePath,
 } from "../../utils/routes/routes.util";
@@ -213,11 +213,11 @@ export const AlertsAllPage: FunctionComponent = () => {
         },
         {
             id: "advancedAlert",
-            text: t("label.advanced-alert"),
+            text: t("label.advanced-setup"),
         },
         {
             id: "jsonAlert",
-            text: t("label.json-alert"),
+            text: t("label.json-setup"),
         },
     ];
 
@@ -226,9 +226,11 @@ export const AlertsAllPage: FunctionComponent = () => {
             navigate(getAlertsEasyCreatePath());
             // navigate(getAlertsCreatePath());
         } else if (alertType === "advancedAlert") {
-            navigate(getAlertsCreateAdvancePath());
+            navigate(getAlertsCreateAdvanceV2Path());
+            // navigate(getAlertsCreateAdvancePath());
         } else if (alertType === "jsonAlert") {
-            navigate(getAlertsCreateNewJsonEditorPath());
+            navigate(getAlertsCreateNewJsonEditorV2Path());
+            // navigate(getAlertsCreateNewJsonEditorPath());
         }
     };
 
@@ -317,7 +319,9 @@ export const AlertsAllPage: FunctionComponent = () => {
                             type={DropdownButtonTypeV1.Regular}
                             onClick={handleAlertRedirect}
                         >
-                            {t("label.create")}
+                            {t("label.create-entity", {
+                                entity: t("label.alert"),
+                            })}
                         </DropdownButtonV1>
                     </PageHeaderActionsV1>
                 }