added close button to alert modal

startreedata · Oct 25, 2024 · 68fda2c · 68fda2c
1 parent 551b63b
commit 68fda2c
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/...c/app/components/alert-add-configuration-modal/alert-add-configration-modal.component.tsx b/...c/app/components/alert-add-configuration-modal/alert-add-configration-modal.component.tsx
@@ -12,7 +12,8 @@
  * See the License for the specific language governing permissions and limitations under
  * the License.
  */
-import { Box, Button, Grid, Typography } from "@material-ui/core";
+import { Box, Button, Grid, IconButton, Typography } from "@material-ui/core";
+import { Cancel } from "@material-ui/icons";
 import ControlPointOutlinedIcon from "@material-ui/icons/ControlPointOutlined";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
@@ -28,17 +29,27 @@ import { AlertAddConfigrationModalProps } from "./alert-add-configration-modal.i
 import { boxCardStyles } from "./alert-add-configration-modal.styles";
 
 export const AlertAddConfigurationModal: FunctionComponent<AlertAddConfigrationModalProps> =
-    ({ alertId }) => {
+    ({ alertId, open, onClose }) => {
         const { t } = useTranslation();
         const classes = boxCardStyles();
         const [searchParams] = useSearchParams();
 
         return (
             <Modal
-                initiallyOpen
+                customTitle={
+                    <Box className={classes.dialogTitle}>
+                        <Typography variant="h6">
+                            {t("label.alert-completed")}
+                        </Typography>
+                        <IconButton onClick={onClose}>
+                            <Cancel color="secondary" />
+                        </IconButton>
+                    </Box>
+                }
+                isOpen={open}
                 showFooter={false}
                 submitButtonLabel={t("label.got-it")}
-                title={t("label.alert-completed")}
+                onClose={onClose}
             >
                 <Box className={classes.card}>
                     <Grid container>

diff --git a/...c/app/components/alert-add-configuration-modal/alert-add-configration-modal.interfaces.ts b/...c/app/components/alert-add-configuration-modal/alert-add-configration-modal.interfaces.ts
@@ -15,4 +15,6 @@
 
 export interface AlertAddConfigrationModalProps {
     alertId: string;
+    open: boolean;
+    onClose: () => void;
 }
diff --git a/...i/src/app/components/alert-add-configuration-modal/alert-add-configration-modal.styles.ts b/...i/src/app/components/alert-add-configuration-modal/alert-add-configration-modal.styles.ts
@@ -14,11 +14,20 @@
  */
 import { makeStyles } from "@material-ui/core";
 
-export const boxCardStyles = makeStyles(() => ({
+export const boxCardStyles = makeStyles((theme) => ({
     card: {
         width: "552px",
         borderRadius: "8px",
         border: "1px solid #B4CDE0",
-        padding: "24px",
+        padding: "23px",
+    },
+    dialogTitle: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3),
     },
 }));
diff --git a/thirdeye-ui/src/app/components/easy-alert-modal/easy-alert-modal.component.tsx b/thirdeye-ui/src/app/components/easy-alert-modal/easy-alert-modal.component.tsx
@@ -15,10 +15,10 @@
 import { Grid, Typography } from "@material-ui/core";
 import React, { FunctionComponent } from "react";
 import { useTranslation } from "react-i18next";
+import Image2 from "../../../assets/images/alert-type-examples/easy_alert_statistical.png";
+import Image from "../../../assets/images/alert-type-examples/easy_alert_threshold.png";
 import { Modal } from "../modal/modal.component";
 import { EasyAlertModalProps } from "./easy-alert-modal.interfaces";
-import Image from "../../../assets/images/alert-type-examples/easy_alert_threshold.png";
-import Image2 from "../../../assets/images/alert-type-examples/easy_alert_statistical.png";
 
 export const EasyAlertModal: FunctionComponent<EasyAlertModalProps> = ({
     onGotItClick,

diff --git a/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx b/thirdeye-ui/src/app/pages/alerts-view-page/alerts-view-page.component.tsx
@@ -33,10 +33,12 @@ import React, {
 import { useTranslation } from "react-i18next";
 import { useParams, useSearchParams } from "react-router-dom";
 import { AlertAccuracyColored } from "../../components/alert-accuracy-colored/alert-accuracy-colored.component";
+import { AlertAddConfigurationModal } from "../../components/alert-add-configuration-modal/alert-add-configration-modal.component";
 import { AlertChart } from "../../components/alert-view/alert-chart/alert-chart.component";
 import { AlertOptionsButton } from "../../components/alert-view/alert-options-button/alert-options-button.component";
 import { EnumerationItemsTable } from "../../components/alert-view/enumeration-items-table/enumeration-items-table.component";
 import { AlertViewSubHeader } from "../../components/alert-view/sub-header/alert-sub-header.component";
+import { useAppBarConfigProvider } from "../../components/app-bar/app-bar-config-provider/app-bar-config-provider.component";
 import { NoDataIndicator } from "../../components/no-data-indicator/no-data-indicator.component";
 import { PageHeader } from "../../components/page-header/page-header.component";
 import { LoadingErrorStateSwitch } from "../../components/page-states/loading-error-state-switch/loading-error-state-switch.component";
@@ -63,6 +65,7 @@ import {
 import { getAnomalies } from "../../rest/anomalies/anomalies.rest";
 import { Alert } from "../../rest/dto/alert.interfaces";
 import { getEnumerationItems } from "../../rest/enumeration-items/enumeration-items.rest";
+import { useFetchQuery } from "../../rest/hooks/useFetchQuery";
 import { notifyIfErrors } from "../../utils/notifications/notifications.util";
 import { QUERY_PARAM_KEY_FOR_EXPANDED } from "../../utils/params/params.util";
 import { getErrorMessages } from "../../utils/rest/rest.util";
@@ -76,9 +79,6 @@ import {
     QUERY_PARAM_KEY_FOR_SORT,
     QUERY_PARAM_KEY_FOR_SORT_KEY,
 } from "./alerts-view-page.utils";
-import { useFetchQuery } from "../../rest/hooks/useFetchQuery";
-import { AlertAddConfigurationModal } from "../../components/alert-add-configuration-modal/alert-add-configration-modal.component";
-import { useAppBarConfigProvider } from "../../components/app-bar/app-bar-config-provider/app-bar-config-provider.component";
 
 export const AlertsViewPage: FunctionComponent = () => {
     const { t } = useTranslation();
@@ -100,6 +100,9 @@ export const AlertsViewPage: FunctionComponent = () => {
 
     const [searchParams, setSearchParams] = useSearchParams();
 
+    const [openAlertAddConfigurationModal, setOpenAlertAddConfigurationModal] =
+        useState(!!searchParams.get(QUERY_PARAM_KEY_FOR_NOTIFICATION));
+
     const [expanded, setExpanded] = useState<string[]>(
         searchParams.has(QUERY_PARAM_KEY_FOR_EXPANDED)
             ? (searchParams.get(QUERY_PARAM_KEY_FOR_EXPANDED) as string).split(
@@ -575,9 +578,13 @@ export const AlertsViewPage: FunctionComponent = () => {
                         )}
                     </LoadingErrorStateSwitch>
                 </Grid>
-                {searchParams.get(QUERY_PARAM_KEY_FOR_NOTIFICATION) && (
-                    <AlertAddConfigurationModal alertId={alertId || ""} />
-                )}
+                <AlertAddConfigurationModal
+                    alertId={alertId || ""}
+                    open={openAlertAddConfigurationModal}
+                    onClose={() => {
+                        setOpenAlertAddConfigurationModal(false);
+                    }}
+                />
                 {/* {alertId && searchParams.has(QUERY_PARAM_KEY_ALERT_TYPE) && (
                     <AlertAddConfigrationModal alertId={alertId} />
                 )} */}