Merge pull request #2336 from devtron-labs/feat/notification-configur…

…ation-code-refactoring

feat: notification configuration code refactoring

.eslintignore

@@ -314,15 +314,10 @@ src/components/material/MaterialList.tsx
 src/components/material/MaterialView.tsx
 src/components/material/UpdateMaterial.tsx
 src/components/notifications/AddNotification.tsx
-src/components/notifications/ConfigurationTab.component.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/Pages/GlobalConfigurations/ClustersAndEnvironments/ClusterEnvironmentDrawer/ClusterEnvironmentDrawer.tsx

@@ -238,10 +238,10 @@ export const ClusterEnvironmentDrawer = ({
                     </button>
                 </div>
                 <form
-                    className="flex-grow-1 flexbox-col"
+                    className="flex-grow-1 flexbox-col mh-0"
                     onSubmit={handleSubmit(namespaceLabels.labels ? withLabelEditValidation : onValidation())}
                 >
-                    <div className="dc__overflow-scroll p-20 flex-grow-1">
+                    <div className="dc__overflow-auto p-20 flex-grow-1">
                         <div className="mb-16">
                             <CustomInput
                                 dataTestid="environment-name"

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/AddNotification.tsx

@@ -35,7 +35,7 @@ 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/icons/slack-logo.svg'
@@ -985,7 +985,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                 showError(error)
                             })
                     }}
-                    closeSESConfigModal={(event) => {
+                    closeSESConfigModal={() => {
                         this.setState({ showSESConfigModal: false })
                     }}
                 />
@@ -1011,7 +1011,7 @@ export class AddNotification extends Component<AddNotificationsProps, AddNotific
                                 showError(error)
                             })
                     }}
-                    closeSMTPConfigModal={(event) => {
+                    closeSMTPConfigModal={() => {
                         this.setState({ showSMTPConfigModal: false })
                     }}
                 />

src/components/notifications/ConfigTableRowActionButton.tsx

@@ -0,0 +1,32 @@
+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 = ({
+    rootClassName,
+    onClickEditRow,
+    onClickDeleteRow,
+    modal,
+}: ConfigTableRowActionButtonProps) => (
+    <div className={`${rootClassName} flexbox dc__gap-4 m-0`}>
+        <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>
+)

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="ses-config-modal-close-button"
+                size={ComponentSizeType.large}
+                onClick={closeModal}
+                text="Cancel"
+                disabled={isLoading}
+                variant={ButtonVariantType.secondary}
+                style={ButtonStyleType.neutral}
+            />
+            <Button
+                dataTestId="add-ses-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>
+    )
+}