Added identifier field to Event destinations page & migrated to mds

portal-ui/src/screens/Console/Account/NotificationEndpointTypeSelectorHelpBox.tsx

@@ -14,84 +14,23 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
-import { Box } from "@mui/material";
-import { HelpIconFilled, LambdaNotificationsIcon } from "mds";
 
-const FeatureItem = ({
-  icon,
-  description,
-}: {
-  icon: any;
-  description: string;
-}) => {
-  return (
-    <Box
-      sx={{
-        display: "flex",
-        "& .min-icon": {
-          marginRight: "10px",
-          height: "23px",
-          width: "23px",
-          marginBottom: "10px",
-        },
-      }}
-    >
-      {icon}{" "}
-      <div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
-        {description}
-      </div>
-    </Box>
-  );
-};
+import { HelpBox, LambdaNotificationsIcon, Box } from "mds";
+
 const NotificationEndpointTypeSelectorHelpBox = () => {
   return (
-    <Box
-      sx={{
-        flex: 1,
-        border: "1px solid #eaeaea",
-        borderRadius: "2px",
-        display: "flex",
-        flexFlow: "column",
-        padding: "20px",
-        marginTop: {
-          xs: "0px",
-        },
-      }}
-    >
-      <Box
-        sx={{
-          fontSize: "16px",
-          fontWeight: 600,
-          display: "flex",
-          alignItems: "center",
-          marginBottom: "16px",
-          paddingBottom: "20px",
-
-          "& .min-icon": {
-            height: "21px",
-            width: "21px",
-            marginRight: "15px",
-          },
-        }}
-      >
-        <HelpIconFilled />
-        <div>Learn more about Event Destinations</div>
-      </Box>
-      <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
-        <Box sx={{ paddingBottom: "20px" }}>
-          <FeatureItem
-            icon={<LambdaNotificationsIcon />}
-            description={`What are Event Destinations?`}
-          />
-          <Box sx={{ paddingTop: "20px" }}>
-            MinIO bucket notifications allow administrators to send
-            notifications to supported external services on certain object or
-            bucket events. MinIO supports bucket and object-level S3 events
-            similar to the Amazon S3 Event Notifications.
-          </Box>
+    <HelpBox
+      iconComponent={<LambdaNotificationsIcon />}
+      title={"What are Event Destinations?"}
+      help={
+        <Box sx={{ paddingTop: "20px" }}>
+          MinIO bucket notifications allow administrators to send notifications
+          to supported external services on certain object or bucket events.
+          MinIO supports bucket and object-level S3 events similar to the Amazon
+          S3 Event Notifications.
         </Box>
-      </Box>
-    </Box>
+      }
+    />
   );
 };
 

portal-ui/src/screens/Console/Common/FormComponents/common/styleLibrary.ts

@@ -400,7 +400,7 @@ export const typesSelection = {
     height: "80px",
   },
   lambdaNotif: {
-    background: "#ffffff",
+    background: "#ffffff50",
     border: "#E5E5E5 1px solid",
     borderRadius: 5,
     width: 250,

portal-ui/src/screens/Console/EventDestinations/AddEventDestination.tsx

@@ -17,19 +17,18 @@
 import React, { Fragment, useCallback, useEffect, useState } from "react";
 
 import get from "lodash/get";
-import Grid from "@mui/material/Grid";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
 import withStyles from "@mui/styles/withStyles";
-import { BackLink, Button, PageLayout } from "mds";
+import { BackLink, Button, FormLayout, Grid, InputBox, PageLayout } from "mds";
 
 import api from "../../../common/api";
 import {
+  destinationList,
   notificationEndpointsFields,
   notifyMysql,
   notifyPostgres,
   removeEmptyFields,
-  destinationList,
 } from "./utils";
 import {
   modalBasic,
@@ -49,6 +48,8 @@ import {
 import { useNavigate, useParams } from "react-router-dom";
 import { useAppDispatch } from "../../../store";
 import PageHeaderWrapper from "../Common/PageHeaderWrapper/PageHeaderWrapper";
+import TargetTitle from "./TargetTitle";
+import { setDestinationLoading } from "./destinationsSlice";
 
 const ConfMySql = withSuspense(
   React.lazy(() => import("./CustomForms/ConfMySql"))
@@ -66,43 +67,6 @@ const styles = (theme: Theme) =>
   createStyles({
     ...modalBasic,
     ...settingsCommon,
-    lambdaNotif: {
-      background:
-        "linear-gradient(90deg, rgba(249,249,250,1) 0%, rgba(250,250,251,1) 68%, rgba(254,254,254,1) 100%)",
-      border: "#E5E5E5 1px solid",
-      borderRadius: 5,
-      height: 80,
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "start",
-      marginBottom: 16,
-      cursor: "pointer",
-      padding: 0,
-      overflow: "hidden",
-    },
-    lambdaNotifIcon: {
-      backgroundColor: "#FEFEFE",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      width: 80,
-      height: 80,
-
-      "& img": {
-        maxWidth: 46,
-        maxHeight: 46,
-      },
-    },
-    lambdaNotifTitle: {
-      color: "#07193E",
-      fontSize: 16,
-      fontFamily: "Inter,sans-serif",
-      paddingLeft: 18,
-    },
-    formBox: {
-      border: "1px solid #EAEAEA",
-      padding: 15,
-    },
   });
 
 interface IAddNotificationEndpointProps {
@@ -120,28 +84,38 @@ const AddEventDestination = ({
 
   //Local States
   const [valuesArr, setValueArr] = useState<IElementValue[]>([]);
+  const [identifier, setIdentifier] = useState<string>("");
   const [saving, setSaving] = useState<boolean>(false);
   const service = params.service || "";
-  //Effects
 
+  //Effects
   useEffect(() => {
     if (saving) {
       const payload = {
         key_values: removeEmptyFields(valuesArr),
       };
       api
-        .invoke("PUT", `/api/v1/configs/${service}`, payload)
+        .invoke("PUT", `/api/v1/configs/${service}:${identifier}`, payload)
         .then(() => {
           setSaving(false);
           dispatch(setServerNeedsRestart(true));
+          dispatch(setDestinationLoading(true));
           navigate(IAM_PAGES.EVENT_DESTINATIONS);
         })
         .catch((err: ErrorResponseHandler) => {
           setSaving(false);
           dispatch(setErrorSnackMessage(err));
         });
     }
-  }, [saving, service, valuesArr, saveAndRefresh, dispatch, navigate]);
+  }, [
+    saving,
+    service,
+    valuesArr,
+    saveAndRefresh,
+    dispatch,
+    navigate,
+    identifier,
+  ]);
 
   //Fetch Actions
   const submitForm = (event: React.FormEvent) => {
@@ -199,41 +173,54 @@ const AddEventDestination = ({
             <Fragment>
               <Grid item xs={12}>
                 {targetElement && (
-                  <div
-                    key={`icon-${targetElement.targetTitle}`}
-                    className={classes.lambdaNotif}
-                  >
-                    <div className={classes.lambdaNotifIcon}>
-                      <img
-                        src={targetElement.logo}
-                        className={classes.logoButton}
-                        alt={targetElement.targetTitle}
-                      />
-                    </div>
-
-                    <div className={classes.lambdaNotifTitle}>
-                      <b>
-                        {targetElement ? targetElement.targetTitle : ""} Event
-                        Destination
-                      </b>
-                    </div>
-                  </div>
+                  <TargetTitle
+                    logoSrc={targetElement.logo}
+                    title={`${
+                      targetElement ? targetElement.targetTitle : ""
+                    } Event
+                        Destination`}
+                  />
                 )}
               </Grid>
-              <div className={classes.formBox}>
-                <Grid item xs={12} className={classes.configForm}>
+              <FormLayout>
+                <Grid
+                  item
+                  xs={12}
+                  className={classes.formFieldRow}
+                  sx={{ marginBottom: "12px" }}
+                >
+                  <InputBox
+                    id={"identifier-field"}
+                    name={"identifier-field"}
+                    label={"Identifier"}
+                    value={identifier}
+                    onChange={(e) => setIdentifier(e.target.value)}
+                    tooltip={"Unique descriptive string for this destination"}
+                    placeholder="Enter Destination Identifier"
+                    required
+                  />
+                </Grid>
+                <Grid item xs={12}>
                   {srvComponent}
                 </Grid>
-                <Grid item xs={12} className={classes.settingsButtonContainer}>
+                <Grid
+                  item
+                  xs={12}
+                  sx={{
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    marginTop: 15,
+                  }}
+                >
                   <Button
                     id={"save-notification-target"}
                     type="submit"
                     variant="callAction"
-                    disabled={saving}
+                    disabled={saving || identifier.trim() === ""}
                     label={"Save Event Destination"}
                   />
                 </Grid>
-              </div>
+              </FormLayout>
             </Fragment>
           )}
         </form>

portal-ui/src/screens/Console/EventDestinations/ConfTargetGeneric.tsx

@@ -24,12 +24,10 @@ import {
   formFieldStyles,
   modalBasic,
 } from "../Common/FormComponents/common/styleLibrary";
-import InputBoxWrapper from "../Common/FormComponents/InputBoxWrapper/InputBoxWrapper";
 import CSVMultiSelector from "../Common/FormComponents/CSVMultiSelector/CSVMultiSelector";
 import CommentBoxWrapper from "../Common/FormComponents/CommentBoxWrapper/CommentBoxWrapper";
-import FormSwitchWrapper from "../Common/FormComponents/FormSwitchWrapper/FormSwitchWrapper";
 import PredefinedList from "../Common/FormComponents/PredefinedList/PredefinedList";
-import { ConsoleIcon, Tooltip } from "mds";
+import { ConsoleIcon, InputBox, Switch, Tooltip } from "mds";
 
 interface IConfGenericProps {
   onChange: (newValue: IElementValue[]) => void;
@@ -144,7 +142,7 @@ const ConfTargetGeneric = ({
         const value = holderItem ? holderItem.value : "off";
 
         return (
-          <FormSwitchWrapper
+          <Switch
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
               const value = e.target.checked ? "on" : "off";
               setValueElement(field.name, value, item);
@@ -195,7 +193,7 @@ const ConfTargetGeneric = ({
         );
       default:
         return (
-          <InputBoxWrapper
+          <InputBox
             id={field.name}
             name={field.name}
             label={field.label}
@@ -204,7 +202,6 @@ const ConfTargetGeneric = ({
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               setValueElement(field.name, e.target.value, item)
             }
-            multiline={!!field.multiline}
             placeholder={field.placeholder}
           />
         );

portal-ui/src/screens/Console/EventDestinations/ConfirmDeleteDestinationModal.tsx

@@ -1,7 +1,22 @@
+// This file is part of MinIO Console Server
+// Copyright (c) 2022 MinIO, Inc.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
 import React from "react";
 import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
 import { ConfirmModalIcon } from "mds";
-import { DialogContentText } from "@mui/material";
 
 const ConfirmDeleteDestinationModal = ({
   onConfirm,
@@ -25,11 +40,9 @@ const ConfirmDeleteDestinationModal = ({
       onClose={onClose}
       confirmationContent={
         <React.Fragment>
-          <DialogContentText>
-            Are you sure you want to delete the event destination ?
-            <br />
-            <b>{serviceName}</b> which is <b>{status}</b>
-          </DialogContentText>
+          Are you sure you want to delete the event destination ?
+          <br />
+          <b>{serviceName}</b> which is <b>{status}</b>
         </React.Fragment>
       }
     />