OpenConceptLab/ocl_online#367 | Limit dialogs share one frame: Close first, then the next step

src/components/common/LimitDialog.jsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import OpenInNewIcon from '@mui/icons-material/OpenInNew'
+
+import Dialog from './Dialog'
+import DialogTitle from './DialogTitle'
+import CloseIconButton from './CloseIconButton'
+import useLimitAction from './useLimitAction'
+
+// The frame every limit dialog shares: what was refused, then any next step
+// the connected service sends (OpenConceptLab/ocl_online#367), which opens
+// in a new tab.
+const LimitDialog = ({open, onClose, errorCode, title, children}) => {
+  const { t } = useTranslation()
+  const { action, onActionClick } = useLimitAction(open, errorCode)
+
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
+      <DialogTitle sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+        {title}
+        <CloseIconButton onClick={onClose} aria-label={t('common.close')} />
+      </DialogTitle>
+      <DialogContent sx={{px: 0, pb: 0}}>
+        <Typography variant='body1' sx={{my: 2}}>
+          {children}
+        </Typography>
+        {
+          action?.message &&
+            <Typography variant='body1' sx={{mt: 2}}>{action.message}</Typography>
+        }
+      </DialogContent>
+      <DialogActions disableSpacing sx={{p: 0, pt: 3, gap: 1, justifyContent: 'flex-end', flexDirection: {xs: 'column-reverse', sm: 'row'}, alignItems: {xs: 'stretch', sm: 'center'}}}>
+        <Button onClick={onClose} sx={{textTransform: 'none', mr: {sm: 'auto'}}}>
+          {t('common.close')}
+        </Button>
+        {
+          action &&
+            <Button
+              href={action.url}
+              onClick={onActionClick}
+              target='_blank'
+              rel='noopener noreferrer'
+              variant='contained'
+              endIcon={<OpenInNewIcon />}
+              sx={{textTransform: 'none', borderRadius: '100px', flexShrink: 0, '&, &:hover, &:focus, &:active': {color: 'primary.contrastText', textDecoration: 'none'}, '&:focus:not(:focus-visible)': {outline: 'none'}}}
+            >
+              {action.label}
+            </Button>
+        }
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default LimitDialog

src/components/common/QuotaDialog.jsx

@@ -1,56 +1,16 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import DialogContent from '@mui/material/DialogContent'
-import DialogActions from '@mui/material/DialogActions'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
-import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 
-import Dialog from './Dialog'
-import DialogTitle from './DialogTitle'
-import CloseIconButton from './CloseIconButton'
+import LimitDialog from './LimitDialog'
 import { isCapMeter } from './quotaErrors'
-import useLimitAction from './useLimitAction'
 
 const QuotaDialog = ({open, onClose, errorCode, meter, surface}) => {
   const { t } = useTranslation()
-  const { action, onActionClick } = useLimitAction(open, errorCode)
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth='sm' fullWidth>
-      <DialogTitle sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-        {t(isCapMeter(meter) ? 'quota.title_cap' : 'quota.title_quota')}
-        <CloseIconButton onClick={onClose} aria-label={t('common.close')} />
-      </DialogTitle>
-      <DialogContent sx={{px: 0, pb: 0}}>
-        <Typography variant='body1' sx={{my: 2}}>
-          {t([`quota.consequence.${meter}.${surface}`, `quota.consequence.${meter}.default`, 'quota.consequence.generic'])}
-        </Typography>
-        {
-          action?.message &&
-            <Typography variant='body1' sx={{mt: 2}}>{action.message}</Typography>
-        }
-      </DialogContent>
-      <DialogActions disableSpacing sx={{p: 0, pt: 3, gap: 1, justifyContent: 'flex-end', flexDirection: {xs: 'column-reverse', sm: 'row'}, alignItems: {xs: 'stretch', sm: 'center'}}}>
-        <Button onClick={onClose} sx={{textTransform: 'none', mr: {sm: 'auto'}}}>
-          {t('common.close')}
-        </Button>
-        {
-          action &&
-            <Button
-              href={action.url}
-              onClick={onActionClick}
-              target='_blank'
-              rel='noopener noreferrer'
-              variant='contained'
-              endIcon={<OpenInNewIcon />}
-              sx={{textTransform: 'none', borderRadius: '100px', flexShrink: 0, '&, &:hover, &:focus, &:active': {color: 'primary.contrastText', textDecoration: 'none'}, '&:focus:not(:focus-visible)': {outline: 'none'}}}
-            >
-              {action.label}
-            </Button>
-        }
-      </DialogActions>
-    </Dialog>
+    <LimitDialog open={open} onClose={onClose} errorCode={errorCode} title={t(isCapMeter(meter) ? 'quota.title_cap' : 'quota.title_quota')}>
+      {t([`quota.consequence.${meter}.${surface}`, `quota.consequence.${meter}.default`, 'quota.consequence.generic'])}
+    </LimitDialog>
   )
 }
 

src/components/map-projects/PreviewLimitDialog.jsx

@@ -1,50 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Dialog from '@mui/material/Dialog'
-import DialogTitle from '@mui/material/DialogTitle'
-import DialogContent from '@mui/material/DialogContent'
-import DialogActions from '@mui/material/DialogActions'
-import Typography from '@mui/material/Typography'
-import Button from '@mui/material/Button'
 
-import CloseIconButton from '../common/CloseIconButton'
-import useLimitAction from '../common/useLimitAction'
+import LimitDialog from '../common/LimitDialog'
 import { PREVIEW_LIMIT_COPY_KEY } from './previewLimits'
 
-// Says what the account can't use. Any next step comes from the connected
-// service (OpenConceptLab/ocl_online#367) and opens in a new tab.
+// Says what the account can't use.
 const PreviewLimitDialog = ({open, onClose, errorCode}) => {
   const { t } = useTranslation()
-  const { action, onActionClick } = useLimitAction(open, errorCode)
   const kind = PREVIEW_LIMIT_COPY_KEY[errorCode] || 'generic'
 
   return (
-    <Dialog open={open} onClose={onClose} maxWidth='xs' fullWidth>
-      <DialogTitle sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
-        {t('map_project.limit_unavailable_title')}
-        <CloseIconButton onClick={onClose} />
-      </DialogTitle>
-      <DialogContent>
-        <Typography variant='body1'>
-          {t([`map_project.limit_unavailable_body_${kind}`, 'map_project.limit_unavailable_body_generic'])}
-        </Typography>
-        {
-          action?.message &&
-            <Typography variant='body1' sx={{mt: 2}}>{action.message}</Typography>
-        }
-      </DialogContent>
-      <DialogActions sx={{flexWrap: 'wrap', gap: 1, px: 3, pb: 2}}>
-        {
-          action &&
-            <Button href={action.url} onClick={onActionClick} target='_blank' rel='noopener noreferrer' variant='contained' color='primary' sx={{textTransform: 'none'}}>
-              {action.label}
-            </Button>
-        }
-        <Button onClick={onClose} variant='text' color='inherit' sx={{textTransform: 'none', ml: 'auto'}}>
-          {t('map_project.preview_limit_dismiss')}
-        </Button>
-      </DialogActions>
-    </Dialog>
+    <LimitDialog open={open} onClose={onClose} errorCode={errorCode} title={t('map_project.limit_unavailable_title')}>
+      {t([`map_project.limit_unavailable_body_${kind}`, 'map_project.limit_unavailable_body_generic'])}
+    </LimitDialog>
   )
 }
 

src/i18n/locales/en/translations.json

@@ -327,7 +327,6 @@
     "limit_unavailable_body_match_operations_not_entitled": "Your account can't run AutoMatch.",
     "limit_unavailable_body_projects_not_entitled": "Your account can't create map projects.",
     "limit_unavailable_body_generic": "This isn't available for your account.",
-    "preview_limit_dismiss": "Back to my project",
     "preview_config_unavailable_title": "This project uses preview-restricted settings",
     "preview_config_unavailable_org_projects": "Organization-owned Mapper projects are not part of your preview. Choose your personal namespace as the project owner.",
     "preview_config_unavailable_custom_algorithms": "Externally hosted algorithms are not part of your preview. Remove the custom algorithm before saving.",

src/i18n/locales/es/translations.json

@@ -311,7 +311,6 @@
     "limit_unavailable_body_match_operations_not_entitled": "Tu cuenta no puede ejecutar AutoMatch.",
     "limit_unavailable_body_projects_not_entitled": "Tu cuenta no puede crear proyectos de mapeo.",
     "limit_unavailable_body_generic": "Esto no está disponible para tu cuenta.",
-    "preview_limit_dismiss": "Volver a mi proyecto",
     "preview_config_unavailable_title": "Este proyecto usa configuraciones restringidas de la vista previa",
     "preview_config_unavailable_org_projects": "Los proyectos de Mapper propiedad de una organización no forman parte de tu vista previa. Elige tu espacio de nombres personal como propietario del proyecto.",
     "preview_config_unavailable_custom_algorithms": "Los algoritmos externos no forman parte de tu vista previa. Elimina el algoritmo personalizado antes de guardar.",

src/i18n/locales/pt-BR/translations.json

@@ -327,7 +327,6 @@
     "limit_unavailable_body_match_operations_not_entitled": "Sua conta não pode executar o AutoMatch.",
     "limit_unavailable_body_projects_not_entitled": "Sua conta não pode criar projetos de mapeamento.",
     "limit_unavailable_body_generic": "Isto não está disponível para sua conta.",
-    "preview_limit_dismiss": "Voltar ao meu projeto",
     "preview_config_unavailable_title": "Este projeto usa configurações restritas de prévia",
     "preview_config_unavailable_org_projects": "Projetos de Mapper pertencentes a organizações não fazem parte de sua prévia. Escolha seu namespace pessoal como proprietário do projeto.",
     "preview_config_unavailable_custom_algorithms": "Algoritmos hospedados externamente não fazem parte de sua prévia. Remova o algoritmo personalizado antes de salvar.",

src/i18n/locales/zh/translations.json

@@ -323,7 +323,6 @@
     "limit_unavailable_body_match_operations_not_entitled": "你的账户无法运行 AutoMatch。",
     "limit_unavailable_body_projects_not_entitled": "你的账户无法创建映射项目。",
     "limit_unavailable_body_generic": "你的账户无法使用此功能。",
-    "preview_limit_dismiss": "返回我的项目",
     "preview_config_unavailable_title": "此项目使用了预览版受限设置",
     "preview_config_unavailable_org_projects": "组织拥有的 Mapper 项目不在你的预览范围内。请选择个人命名空间作为项目所有者。",
     "preview_config_unavailable_custom_algorithms": "外部托管算法不在你的预览范围内。请先移除自定义算法再保存。",