Merge branch 'develop' into feat/bulk-trigger-deployment

Author: Elessar1802

.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/assets/img/slack-logo.svg renamed to src/assets/icons/slack-logo.svg

@@ -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/assets/img/ses-empty.png

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

src/assets/img/slack-empty.png

@@ -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/assets/img/smtp-empty.png

@@ -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}
                 />
             )
         }