feat: Revamp UI of Global Notifictaion Configuration

.eslintignore

@@ -314,15 +314,9 @@ src/components/material/MaterialList.tsx
 src/components/material/MaterialView.tsx
 src/components/material/UpdateMaterial.tsx
 src/components/notifications/AddNotification.tsx
-src/components/notifications/ConfigurationTab.tsx
-src/components/notifications/CreateHeaderDetails.tsx
 src/components/notifications/ModifyRecipientsModal.tsx
 src/components/notifications/NotificationTab.tsx
 src/components/notifications/Notifications.tsx
-src/components/notifications/SESConfigModal.tsx
-src/components/notifications/SMTPConfigModal.tsx
-src/components/notifications/SlackConfigModal.tsx
-src/components/notifications/WebhookConfigModal.tsx
 src/components/notifications/notifications.service.ts
 src/components/notifications/notifications.util.tsx
 src/components/onboardingGuide/GuideCommonHeader.tsx

src/components/globalConfigurations/GlobalConfiguration.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { lazy, useState, useEffect, Suspense, isValidElement } from 'react'
+import { lazy, useState, useEffect, Suspense, isValidElement, useRef } from 'react'
 import { Route, NavLink, Router, Switch, Redirect, useHistory, useLocation } from 'react-router-dom'
 import {
     showError,
@@ -852,7 +852,19 @@ export const ProtectedInput = ({
     dataTestid = '',
     onBlur = (e) => { },
     isRequiredField = false,
+    autoFocus = false,
 }: ProtectedInputType) => {
+    const inputRef = useRef<HTMLInputElement>()
+
+    useEffect(() => {
+        setTimeout(() => {
+            // Added timeout to ensure the autofocus code is executed post the re-renders
+            if (inputRef.current && autoFocus) {
+                inputRef.current.focus()
+            }
+        }, 100)
+    }, [autoFocus])
+
     const [shown, toggleShown] = useState(false)
     useEffect(() => {
         toggleShown(!hidden)
@@ -871,7 +883,7 @@ export const ProtectedInput = ({
                     data-testid={dataTestid}
                     type={shown ? 'text' : 'password'}
                     tabIndex={tabIndex}
-                    className={error ? 'form__input form__input--error pl-42' : 'form__input pl-42'}
+                    className={error ? 'form__input form__input--error pl-42' : 'form__input pl-42 fs-13'}
                     name={name}
                     placeholder={placeholder}
                     onChange={(e) => {
@@ -881,6 +893,8 @@ export const ProtectedInput = ({
                     value={value}
                     disabled={disabled}
                     onBlur={onBlur}
+                    autoFocus={autoFocus}
+                    ref={inputRef}
                 />
                 <ShowHide
                     className="protected-input__toggle"

src/components/globalConfigurations/globalConfiguration.type.ts

@@ -47,4 +47,5 @@ export interface ProtectedInputType {
     dataTestid: string
     onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
     isRequiredField?: boolean
+    autoFocus?: boolean
 }

src/components/notifications/AddConfigurationButton.tsx

@@ -0,0 +1,32 @@
+import { Button, ButtonVariantType, ComponentSizeType, useSearchString } from '@devtron-labs/devtron-fe-common-lib'
+import { useHistory } from 'react-router-dom'
+import { ReactComponent as Add } from '@Icons/ic-add.svg'
+import { getTabText } from './notifications.util'
+import { AddConfigurationButtonProps } from './types'
+
+export const AddConfigurationButton = ({ activeTab }: AddConfigurationButtonProps) => {
+    const { searchParams } = useSearchString()
+    const history = useHistory()
+
+    const handleAddClick = () => {
+        const newParams = {
+            ...searchParams,
+            modal: activeTab,
+            configId: '0',
+        }
+        history.push({
+            search: new URLSearchParams(newParams).toString(),
+        })
+    }
+
+    return (
+        <Button
+            onClick={handleAddClick}
+            variant={ButtonVariantType.primary}
+            size={ComponentSizeType.small}
+            dataTestId={`${activeTab}-add-button`}
+            startIcon={<Add />}
+            text={`Add ${getTabText(activeTab)}`}
+        />
+    )
+}

src/components/notifications/AddNotification.tsx

@@ -35,10 +35,10 @@ import { RouteComponentProps, Link } from 'react-router-dom'
 import { components } from 'react-select'
 import Tippy from '@tippyjs/react'
 import CreatableSelect from 'react-select/creatable'
-import { SESConfigModal } from './SESConfigModal'
+import SESConfigModal from './SESConfigModal'
 import { SlackConfigModal } from './SlackConfigModal'
 import { Select, validateEmail, ErrorBoundary } from '../common'
-import { ReactComponent as Slack } from '../../assets/img/slack-logo.svg'
+import { ReactComponent as Slack } from '../../assets/icons/slack-logo.svg'
 import { ReactComponent as Add } from '../../assets/icons/ic-add.svg'
 import { ReactComponent as Filter } from '../../assets/icons/ic-filter.svg'
 import { ReactComponent as Folder } from '../../assets/icons/img-folder-empty.svg'
@@ -967,6 +967,14 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
         )
     }
 
+    onClickCloseSESModal = () => {
+        this.setState({ showSESConfigModal: false })
+    }
+
+    onClickCloseSMTPModal = () => {
+        this.setState({ showSMTPConfigModal: false })
+    }
+
     renderSESConfigModal() {
         if (this.state.showSESConfigModal) {
             return (
@@ -985,9 +993,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                 showError(error)
                             })
                     }}
-                    closeSESConfigModal={(event) => {
-                        this.setState({ showSESConfigModal: false })
-                    }}
+                    closeSESConfigModal={this.onClickCloseSESModal}
                 />
             )
         }
@@ -1011,9 +1017,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                 showError(error)
                             })
                     }}
-                    closeSMTPConfigModal={(event) => {
-                        this.setState({ showSMTPConfigModal: false })
-                    }}
+                    closeSMTPConfigModal={this.onClickCloseSMTPModal}
                 />
             )
         }

src/components/notifications/ConfigTableRowActionButton.tsx

@@ -0,0 +1,33 @@
+import { Trash } from '@Components/common'
+import { ReactComponent as Edit } from '@Icons/ic-pencil.svg'
+import { Button, ButtonStyleType, ButtonVariantType, ComponentSizeType } from '@devtron-labs/devtron-fe-common-lib'
+import { ConfigTableRowActionButtonProps } from './types'
+
+export const ConfigTableRowActionButton = ({
+    onClickEditRow,
+    onClickDeleteRow,
+    modal,
+}: ConfigTableRowActionButtonProps) => (
+    <div className="dc__visible-hover--child">
+        <div className="flex right dc__gap-8 dc__no-shrink">
+            <Button
+                onClick={onClickEditRow}
+                variant={ButtonVariantType.borderLess}
+                size={ComponentSizeType.xs}
+                dataTestId={`${modal}-config-edit-button`}
+                icon={<Edit />}
+                ariaLabel="Edit"
+                style={ButtonStyleType.neutral}
+            />
+            <Button
+                onClick={onClickDeleteRow}
+                variant={ButtonVariantType.borderLess}
+                size={ComponentSizeType.xs}
+                dataTestId={`${modal}-config-delete-button`}
+                icon={<Trash />}
+                ariaLabel="Delete"
+                style={ButtonStyleType.negativeGrey}
+            />
+        </div>
+    </div>
+)

src/components/notifications/ConfigurationDrawerModal.tsx

@@ -0,0 +1,78 @@
+import {
+    Button,
+    ButtonStyleType,
+    ButtonVariantType,
+    ComponentSizeType,
+    Drawer,
+    Progressing,
+} from '@devtron-labs/devtron-fe-common-lib'
+import { ReactComponent as Close } from '@Icons/ic-close.svg'
+import { ConfigurationsTabTypes } from './constants'
+import { ConfigurationTabDrawerModalProps } from './types'
+import { getTabText } from './notifications.util'
+
+export const ConfigurationTabDrawerModal = ({
+    renderContent,
+    closeModal,
+    modal,
+    isLoading,
+    saveConfigModal,
+    disableSave,
+}: ConfigurationTabDrawerModalProps) => {
+    const renderFooter = () => (
+        <div className="px-20 py-16 flex right dc__gap-12 dc__zi-1 dc__border-top bcn-0">
+            <Button
+                dataTestId={`${modal}-config-modal-close-button`}
+                size={ComponentSizeType.large}
+                onClick={closeModal}
+                text="Cancel"
+                disabled={isLoading}
+                variant={ButtonVariantType.secondary}
+                style={ButtonStyleType.neutral}
+            />
+            <Button
+                dataTestId={`add-${modal}-save-button`}
+                size={ComponentSizeType.large}
+                onClick={saveConfigModal}
+                text="Save"
+                isLoading={isLoading}
+                disabled={disableSave}
+            />
+        </div>
+    )
+
+    const renderModalContent = () => {
+        if (isLoading) {
+            return <Progressing pageLoader />
+        }
+        return (
+            <div className="flexbox-col flex-grow-1 mh-0">
+                {renderContent()}
+                {renderFooter()}
+            </div>
+        )
+    }
+
+    return (
+        <Drawer position="right" onEscape={closeModal}>
+            <div
+                className={`configuration-drawer h-100 modal__body w-${modal === ConfigurationsTabTypes.WEBHOOK ? '1024' : '600'} modal__body--p-0 dc__no-border-radius mt-0 flex-grow-1 flexbox-col`}
+            >
+                <div className="flex flex-align-center dc__border-bottom flex-justify bcn-0 pb-12 pt-12 pl-20 pr-20">
+                    <h1 className="fs-16 fw-6 lh-1-43 m-0 title-padding">Configure {getTabText(modal)}</h1>
+                    <Button
+                        ariaLabel="close-button"
+                        icon={<Close />}
+                        style={ButtonStyleType.negativeGrey}
+                        size={ComponentSizeType.xs}
+                        onClick={closeModal}
+                        dataTestId="add-ses-close-button"
+                        showAriaLabelInTippy={false}
+                        variant={ButtonVariantType.borderLess}
+                    />
+                </div>
+                {renderModalContent()}
+            </div>
+        </Drawer>
+    )
+}