From 7fc9ef2c40f258ce17598d20b67bcfdd84895c03 Mon Sep 17 00:00:00 2001
From: Boaz Poolman <boaz_skater@hotmail.com>
Date: Sun, 2 Jul 2023 21:33:19 +0200
Subject: [PATCH] feat: Modal tabs

---
 .../components/ModalForm/Collection/index.jsx |  2 +-
 admin/src/components/ModalForm/index.jsx      | 51 +++++++++++++++++--
 admin/src/index.js                            |  5 ++
 admin/src/translations/en.json                |  2 +
 server/controllers/core.js                    |  2 +
 tsconfig.json                                 |  1 -
 6 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/admin/src/components/ModalForm/Collection/index.jsx b/admin/src/components/ModalForm/Collection/index.jsx
index 5a5b1a4..a8a3711 100644
--- a/admin/src/components/ModalForm/Collection/index.jsx
+++ b/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}>
diff --git a/admin/src/components/ModalForm/index.jsx b/admin/src/components/ModalForm/index.jsx
index 135e52f..720e540 100644
--- a/admin/src/components/ModalForm/index.jsx
+++ b/admin/src/components/ModalForm/index.jsx
@@ -1,11 +1,30 @@
 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('');
@@ -13,6 +32,8 @@ const ModalForm = (props) => {
   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={(
diff --git a/admin/src/index.js b/admin/src/index.js
index 47e4e66..24da4ad 100644
--- a/admin/src/index.js
+++ b/admin/src/index.js
@@ -16,6 +16,11 @@ export default {
       isReady: true,
       isRequired: pluginPkg.strapi.required || false,
       name,
+      injectionZones: {
+        modal: {
+          advanced: [],
+        },
+      },
     });
 
     app.createSettingSection(
diff --git a/admin/src/translations/en.json b/admin/src/translations/en.json
index 2053a06..24777a1 100644
--- a/admin/src/translations/en.json
+++ b/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",
diff --git a/server/controllers/core.js b/server/controllers/core.js
index f960014..951eb44 100644
--- a/server/controllers/core.js
+++ b/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);
   },
 
diff --git a/tsconfig.json b/tsconfig.json
index 9096609..5eea689 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,6 @@
     "resolveJsonModule": true,
     "strict": false,
     "declaration": true,
-    "baseUrl": "./",
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,