Support opening the settings directly from dangerous modals

src/app/components/Modal/index.tsx

@@ -1,11 +1,12 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react'
 import { Box, Button, Layer, Heading, Paragraph } from 'grommet'
 import { useTranslation } from 'react-i18next'
-import { Alert, Checkmark, Close } from 'grommet-icons'
+import { Alert, Checkmark, Close, Configure } from 'grommet-icons'
 import { ModalHeader } from 'app/components/Header'
 import { AlertBox } from '../AlertBox'
 import { selectAllowDangerousSetting } from '../SettingsDialog/slice/selectors'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
+import { settingsActions } from '../SettingsDialog/slice'
 
 interface Modal {
   title: string
@@ -44,6 +45,7 @@ interface ModalProviderProps {
 const ModalContext = createContext<ModalContextProps>({} as ModalContextProps)
 
 const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
+  const dispatch = useDispatch()
   const { t } = useTranslation()
   const confirm = useCallback(() => {
     modal.handleConfirm()
@@ -59,6 +61,10 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
     : mustWaitSecs ?? 0 // For normal, non-dangerous operations, just use what was specified
 
   const [secsLeft, setSecsLeft] = useState(0)
+  const configure = () => {
+    closeModal()
+    setTimeout(() => dispatch(settingsActions.setOpen(true)), 100)
+  }
 
   useEffect(() => {
     if (waitingTime) {
@@ -99,9 +105,6 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
           </AlertBox>
         )}
         <Box direction="row" gap="small" justify="between" pad={{ top: 'large' }}>
-          {/* This is a placeholder, so that if we have only one valid button,
-           the Cancel, it should be on the right side, not the left side.*/}
-          {!!forbidden && <span />}
           <Button
             label={t('common.cancel', 'Cancel')}
             onClick={closeModal}
@@ -118,6 +121,9 @@ const ModalContainer = ({ modal, closeModal }: ModalContainerProps) => {
               icon={modal.isDangerous ? <Alert size="18px" /> : <Checkmark size="18px" />}
             />
           )}
+          {!!forbidden && (
+            <Button label={t('menu.settings', 'Settings')} onClick={configure} icon={<Configure />} />
+          )}
         </Box>
       </Box>
     </Layer>

src/app/components/SettingsButton/index.tsx

@@ -3,18 +3,21 @@ import { SidebarButton } from '../Sidebar'
 import { Configure } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import { SettingsDialog } from '../SettingsDialog'
+import { selectIsSettingsDialogOpen } from '../SettingsDialog/slice/selectors'
+import { useDispatch, useSelector } from 'react-redux'
+import { settingsActions } from '../SettingsDialog/slice'
 
 export const SettingsButton = () => {
-  const [layerVisibility, setLayerVisibility] = useState(false)
+  const dispatch = useDispatch()
+  const layerVisibility = useSelector(selectIsSettingsDialogOpen)
   const { t } = useTranslation()
+  const setLayerVisibility = (value: boolean) => dispatch(settingsActions.setOpen(value))
   return (
     <>
       <SidebarButton
         icon={<Configure />}
         label={t('menu.settings', 'Settings')}
-        onClick={() => {
-          setLayerVisibility(true)
-        }}
+        onClick={() => setLayerVisibility(true)}
       />
       {layerVisibility && <SettingsDialog closeHandler={() => setLayerVisibility(false)} />}
     </>

src/app/components/SettingsDialog/slice/index.ts

@@ -4,13 +4,17 @@ import { createSlice } from 'utils/@reduxjs/toolkit'
 import { SettingsState } from './types'
 
 export const initialState: SettingsState = {
+  dialogOpen: false,
   allowDangerous: false,
 }
 
 const slice = createSlice({
   name: 'settings',
   initialState,
   reducers: {
+    setOpen(state, action: PayloadAction<boolean>) {
+      state.dialogOpen = action.payload
+    },
     setAllowDangerous(state, action: PayloadAction<boolean>) {
       state.allowDangerous = action.payload
     },

src/app/components/SettingsDialog/slice/selectors.ts

@@ -6,3 +6,4 @@ import { initialState } from '.'
 const selectSlice = (state: RootState) => state.settings || initialState
 
 export const selectAllowDangerousSetting = createSelector([selectSlice], settings => settings.allowDangerous)
+export const selectIsSettingsDialogOpen = createSelector([selectSlice], settings => settings.dialogOpen)

src/app/components/SettingsDialog/slice/types.ts

@@ -1,3 +1,4 @@
 export interface SettingsState {
+  dialogOpen: boolean
   allowDangerous: boolean
 }