Merge pull request #2345 from devtron-labs/feat/css-fixes

feat: css fixes

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)
@@ -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/ConfigurationDrawerModal.tsx

@@ -19,14 +19,8 @@ export const ConfigurationTabDrawerModal = ({
     saveConfigModal,
     disableSave,
 }: ConfigurationTabDrawerModalProps) => {
-    const renderLoadingState = () => (
-        <div className="h-100">
-            <Progressing pageLoader />
-        </div>
-    )
-
     const renderFooter = () => (
-        <div className="px-20 py-16 flex right dc__gap-12 dc__zi-1 dc__border-top">
+        <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}
@@ -47,16 +41,22 @@ export const ConfigurationTabDrawerModal = ({
         </div>
     )
 
-    const renderModalContent = () => (
-        <div className="flexbox-col flex-grow-1 mh-0">
-            {renderContent()}
-            {renderFooter()}
-        </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">
+        <Drawer position="right" onEscape={closeModal}>
             <div
-                className={`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`}
+                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>
@@ -71,7 +71,7 @@ export const ConfigurationTabDrawerModal = ({
                         variant={ButtonVariantType.borderLess}
                     />
                 </div>
-                {isLoading ? renderLoadingState() : renderModalContent()}
+                {renderModalContent()}
             </div>
         </Drawer>
     )

src/components/notifications/ConfigurationTab.tsx

@@ -18,9 +18,10 @@ import { useEffect, useState } from 'react'
 import {
     showError,
     Progressing,
-    ErrorScreenNotAuthorized,
-    DeleteComponent,
     useSearchString,
+    ConfirmationModal,
+    ConfirmationModalVariantType,
+    ServerErrors,
 } from '@devtron-labs/devtron-fe-common-lib'
 import { Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-router-dom'
 import { SlackConfigModal } from './SlackConfigModal'
@@ -33,7 +34,6 @@ import {
     getSMTPConfiguration,
     getWebhookConfiguration,
 } from './notifications.service'
-import { ViewType } from '../../config/constants'
 import { DC_CONFIGURATION_CONFIRMATION_MESSAGE, DeleteComponentsName } from '../../config/constantMessaging'
 import { SMTPConfigModal } from './SMTPConfigModal'
 import { WebhookConfigModal } from './WebhookConfigModal'
@@ -43,8 +43,7 @@ import { WebhookConfigurationTable } from './WebhookConfigurationTable'
 import SESConfigurationTable from './SESConfigurationTable'
 import { SMTPConfigurationTable } from './SMTPConfigurationTable'
 import { ConfigurationTabSwitcher } from './ConfigurationTabsSwitcher'
-import { ConfigurationFieldKeys, ConfigurationsTabTypes } from './constants'
-import { getDeleteConfigComponent } from './notifications.util'
+import { ConfigurationFieldKeys, ConfigurationsTabTypes, ConfigurationTabText } from './constants'
 
 export const ConfigurationTab = () => {
     const { path } = useRouteMatch()
@@ -55,27 +54,23 @@ export const ConfigurationTab = () => {
     const modal = queryString.get('modal')
 
     const [state, setState] = useState<ConfigurationTabState>({
-        view: ViewType.LOADING,
-        slackConfigId: 0,
-        sesConfigId: 0,
-        smtpConfigId: 0,
-        webhookConfigId: 0,
         sesConfigurationList: [],
         smtpConfigurationList: [],
         slackConfigurationList: [],
         webhookConfigurationList: [],
         abortAPI: false,
-        deleting: false,
         confirmation: false,
         sesConfig: {},
         smtpConfig: {},
         slackConfig: {},
         webhookConfig: {},
-        showDeleteConfigModalType: ConfigurationsTabTypes.SES,
         activeTab: ConfigurationsTabTypes.SES,
+        isLoading: false,
+        showCannotDeleteDialogModal: false,
     })
 
     const getAllChannelConfigs = async () => {
+        setState({ ...state, isLoading: true })
         try {
             const { result } = await getConfigs()
             setState({
@@ -84,11 +79,12 @@ export const ConfigurationTab = () => {
                 sesConfigurationList: result.sesConfigurationList,
                 smtpConfigurationList: result.smtpConfigurationList,
                 webhookConfigurationList: result.webhookConfigurationList,
-                view: ViewType.FORM,
+                isLoading: false,
+                confirmation: false,
             })
         } catch (error) {
             showError(error, true, true)
-            setState({ ...state, view: ViewType.ERROR })
+            setState({ ...state, isLoading: false })
         }
     }
 
@@ -112,94 +108,82 @@ export const ConfigurationTab = () => {
                 const { result } = await getSlackConfiguration(configId, true)
                 setState({
                     ...state,
-                    slackConfigId: configId,
                     slackConfig: {
                         ...result,
                         channel: ConfigurationsTabTypes.SLACK,
                     },
                     confirmation: true,
-                    showDeleteConfigModalType: ConfigurationsTabTypes.SLACK,
+                    activeTab: ConfigurationsTabTypes.SLACK,
                 })
             } else if (type === ConfigurationsTabTypes.SES) {
                 const { result } = await getSESConfiguration(configId)
                 setState({
                     ...state,
-                    sesConfigId: configId,
                     sesConfig: {
                         ...result,
                         channel: ConfigurationsTabTypes.SES,
                     },
                     confirmation: true,
-                    showDeleteConfigModalType: ConfigurationsTabTypes.SES,
+                    activeTab: ConfigurationsTabTypes.SES,
                 })
             } else if (type === ConfigurationsTabTypes.SMTP) {
                 const { result } = await getSMTPConfiguration(configId)
                 setState({
                     ...state,
-                    smtpConfigId: configId,
                     smtpConfig: {
                         ...result,
                         channel: ConfigurationsTabTypes.SMTP,
                     },
                     confirmation: true,
-                    showDeleteConfigModalType: ConfigurationsTabTypes.SMTP,
+                    activeTab: ConfigurationsTabTypes.SMTP,
                 })
             } else if (type === ConfigurationsTabTypes.WEBHOOK) {
                 const { result } = await getWebhookConfiguration(configId)
                 setState({
                     ...state,
-                    webhookConfigId: configId,
                     webhookConfig: {
                         ...result,
                         channel: DeleteComponentsName.WebhookConfigurationTab,
                     },
                     confirmation: true,
-                    showDeleteConfigModalType: ConfigurationsTabTypes.WEBHOOK,
+                    activeTab: ConfigurationsTabTypes.WEBHOOK,
                 })
             }
         } catch (e) {
             showError(e)
         }
     }
 
-    const toggleConfirmation = (confirmation) => {
+    const hideDeleteModal = () => {
         setState({
             ...state,
-            confirmation,
-            ...(!confirmation && { showDeleteConfigModalType: ConfigurationsTabTypes.SES }),
+            confirmation: false,
         })
     }
 
     const deleteConfigPayload = (): any => {
-        const { showDeleteConfigModalType, slackConfig, sesConfig, webhookConfig, smtpConfig } = state
-        if (showDeleteConfigModalType === ConfigurationsTabTypes.SLACK) {
+        const { activeTab, slackConfig, sesConfig, webhookConfig, smtpConfig } = state
+        if (activeTab === ConfigurationsTabTypes.SLACK) {
             return slackConfig
         }
-        if (showDeleteConfigModalType === ConfigurationsTabTypes.SES) {
+        if (activeTab === ConfigurationsTabTypes.SES) {
             return sesConfig
         }
-        if (showDeleteConfigModalType === ConfigurationsTabTypes.WEBHOOK) {
+        if (activeTab === ConfigurationsTabTypes.WEBHOOK) {
             return webhookConfig
         }
         return smtpConfig
     }
 
     const payload = deleteConfigPayload()
 
-    if (state.view === ViewType.LOADING) {
+    if (state.isLoading) {
         return (
             <div className="h-100">
                 <Progressing pageLoader />
             </div>
         )
     }
-    if (state.view === ViewType.ERROR) {
-        return (
-            <div className="dc__height-reduce-172">
-                <ErrorScreenNotAuthorized />
-            </div>
-        )
-    }
 
     const renderModal = () => {
         if (queryString.get(ConfigurationFieldKeys.CONFIG_ID) === null) return null
@@ -234,7 +218,6 @@ export const ConfigurationTab = () => {
     const reloadDeleteConfig = () => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         getAllChannelConfigs()
-        setState({ ...state, deleting: false, confirmation: false })
     }
 
     const renderTableComponent = () => {
@@ -252,26 +235,74 @@ export const ConfigurationTab = () => {
         }
     }
 
+    const onClickDelete = async () => {
+        try {
+            await deleteNotification(payload)
+            reloadDeleteConfig()
+            setState({ ...state, confirmation: false })
+        } catch (serverError) {
+            if (serverError instanceof ServerErrors && serverError.code === 500) {
+                setState({ ...state, showCannotDeleteDialogModal: true })
+            } else {
+                showError(serverError)
+            }
+            setState({ ...state, confirmation: false, showCannotDeleteDialogModal: true })
+        }
+    }
+
+    const handleConfirmation = () => {
+        setState({ ...state, showCannotDeleteDialogModal: false })
+    }
+
+    const renderCannotDeleteDialogModal = () => (
+        <ConfirmationModal
+            variant={ConfirmationModalVariantType.info}
+            title={`Cannot delete ${ConfigurationTabText[state.activeTab.toUpperCase()]} '${payload.configName}'`}
+            subtitle={DC_CONFIGURATION_CONFIRMATION_MESSAGE}
+            buttonConfig={{
+                primaryButtonConfig: {
+                    text: 'Okay',
+                    onClick: handleConfirmation,
+                },
+            }}
+            showConfirmationModal={state.showCannotDeleteDialogModal}
+            handleClose={handleConfirmation}
+        />
+    )
+
+    if (state.isLoading) {
+        return <Progressing pageLoader />
+    }
+
     return (
-        <div className="configuration-tab__container bcn-0 h-100 flexbox-col dc__gap-16 pt-16">
+        <div className="configuration-tab__container bcn-0 h-100 flexbox-col dc__gap-16 dc__overflow-auto">
             <ConfigurationTabSwitcher />
             <Switch>
                 <Route path={path} render={renderTableComponent} />
             </Switch>
             {renderModal()}
 
-            {state.confirmation && (
-                <DeleteComponent
-                    deleteComponent={deleteNotification}
-                    payload={payload}
-                    title={payload.configName}
-                    toggleConfirmation={toggleConfirmation}
-                    component={getDeleteConfigComponent(state.showDeleteConfigModalType)}
-                    confirmationDialogDescription={DC_CONFIGURATION_CONFIRMATION_MESSAGE}
-                    reload={reloadDeleteConfig}
-                    configuration="configuration"
-                />
-            )}
+            <ConfirmationModal
+                variant={ConfirmationModalVariantType.delete}
+                title={`Delete ${ConfigurationTabText[state.activeTab.toUpperCase()]} '${payload.configName}'`}
+                subtitle="Are you sure you want to delete this configuration?"
+                buttonConfig={{
+                    secondaryButtonConfig: {
+                        text: 'Cancel',
+                        onClick: hideDeleteModal,
+                        disabled: state.isLoading,
+                    },
+                    primaryButtonConfig: {
+                        text: 'Delete',
+                        onClick: onClickDelete,
+                        isLoading: state.isLoading,
+                    },
+                }}
+                showConfirmationModal={state.confirmation}
+                handleClose={hideDeleteModal}
+            />
+
+            {state.showCannotDeleteDialogModal && renderCannotDeleteDialogModal()}
         </div>
     )
 }