feat: Modal tabs

admin/src/components/ModalForm/Collection/index.jsx

@@ -69,7 +69,7 @@ const CollectionForm = (props) => {
   });
 
   return (
-    <form style={{ borderTop: '1px solid #f5f5f6', paddingTop: 30 }}>
+    <form>
       <Grid gap={6}>
         <GridItem col={6} s={12}>
           <Grid gap={4}>

admin/src/components/ModalForm/index.jsx

@@ -1,18 +1,39 @@
 import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 
-import { request } from '@strapi/helper-plugin';
-import { ModalLayout, ModalFooter, ModalBody, ModalHeader, Button, Typography } from '@strapi/design-system';
+import { request, InjectionZone } from '@strapi/helper-plugin';
+
+import { useSelector } from 'react-redux';
+
+import {
+  ModalLayout,
+  ModalFooter,
+  ModalBody,
+  ModalHeader,
+  Button,
+  Typography,
+  TabGroup,
+  Tabs,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Box,
+  Flex,
+  Divider,
+} from '@strapi/design-system';
 
 import CustomForm from './Custom';
 import CollectionForm from './Collection';
+import pluginId from '../../helpers/pluginId';
 
 const ModalForm = (props) => {
   const [uid, setUid] = useState('');
   const [langcode, setLangcode] = useState('und');
   const [patternInvalid, setPatternInvalid] = useState({ invalid: false });
   const { formatMessage } = useIntl();
 
+  const hasPro = useSelector((state) => state.getIn(['sitemap', 'info', 'hasPro'], false));
+
   const {
     onSubmit,
     onCancel,
@@ -82,7 +103,31 @@ const ModalForm = (props) => {
         </Typography>
       </ModalHeader>
       <ModalBody>
-        {form()}
+        <TabGroup label="Settings" id="tabs" variant="simple">
+          {hasPro && (
+            <Box marginBottom="4">
+              <Flex>
+                <Tabs style={{ marginLeft: 'auto' }}>
+                  <Tab>{formatMessage({ id: 'sitemap.Modal.Tabs.Basic.Title', defaultMessage: 'Basic settings' })}</Tab>
+                  <Tab>{formatMessage({ id: 'sitemap.Modal.Tabs.Advanced.Title', defaultMessage: 'Advanced settings' })}</Tab>
+                </Tabs>
+              </Flex>
+
+              <Divider />
+            </Box>
+          )}
+
+          <TabPanels>
+            <TabPanel>
+              {form()}
+            </TabPanel>
+            <TabPanel>
+              <InjectionZone
+                area={`${pluginId}.modal.advanced`}
+              />
+            </TabPanel>
+          </TabPanels>
+        </TabGroup>
       </ModalBody>
       <ModalFooter
         startActions={(

admin/src/index.js

@@ -16,6 +16,11 @@ export default {
       isReady: true,
       isRequired: pluginPkg.strapi.required || false,
       name,
+      injectionZones: {
+        modal: {
+          advanced: [],
+        },
+      },
     });
 
     app.createSettingSection(

admin/src/translations/en.json

@@ -46,6 +46,8 @@
   "Settings.Field.SelectLanguage.SameForAll": "Same for all languages",
 
   "Modal.HeaderTitle": "Sitemap entries",
+  "Modal.Tabs.Basic.Title": "Basic settings",
+  "Modal.Tabs.Advanced.Title": "Advanced settings",
 
   "HostnameOverrides.Label": "Hostname overrides",
   "HostnameOverrides.Description": "Set a hostname for URLs of the {langcode} locale",

server/controllers/core.js

@@ -75,6 +75,8 @@ module.exports = {
       sitemapInfo.location = '/api/sitemap/index.xml';
     }
 
+    sitemapInfo.hasPro = !!strapi.plugin('sitemap-pro');
+
     ctx.send(sitemapInfo);
   },
 

tsconfig.json

@@ -11,7 +11,6 @@
     "resolveJsonModule": true,
     "strict": false,
     "declaration": true,
-    "baseUrl": "./",
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,