fix: make the GeneratePathsModal work again

Author: boazpoolman

packages/core/admin/screens/List/components/GeneratePathsModal/index.tsx

@@ -15,25 +15,25 @@ import { EnabledContentType, EnabledContentTypes } from '../../../../types/enabl
 import { GenerationType } from '../../../../../server/types';
 
 type Props = {
-  isOpen: boolean;
-  onClose: () => void;
   onSubmit: (types: EnabledContentType['uid'][], generationType?: GenerationType) => void;
   contentTypes: EnabledContentTypes;
+  children: React.ReactNode;
 };
 
 const GeneratePathsModal = ({
-  isOpen,
-  onClose,
   onSubmit,
   contentTypes,
+  children,
 }: Props) => {
   const { formatMessage } = useIntl();
   const [selectedContentTypes, setSelectedContentTypes] = React.useState<EnabledContentType['uid'][]>([]);
   const [selectedGenerationType, setSelectedGenerationType] = React.useState<GenerationType>();
-  if (!isOpen) return null;
 
   return (
     <Modal.Root>
+      <Modal.Trigger>
+        {children}
+      </Modal.Trigger>
       <Modal.Content>
         <Modal.Header>
           <Typography textColor="neutral800" variant="omega" fontWeight="bold">
@@ -64,7 +64,7 @@ const GeneratePathsModal = ({
                     aria-label={`Select ${contentType.name}`}
                     // @ts-ignore
                     value={selectedContentTypes.includes(contentType.uid)}
-                    onValueChange={() => {
+                    onCheckedChange={() => {
                       if (selectedContentTypes.includes(contentType.uid)) {
                         const newContentTypes = selectedContentTypes
                           .filter((uid) => uid !== contentType.uid);
@@ -96,7 +96,7 @@ const GeneratePathsModal = ({
                 })}
               </Typography>
               <Box marginTop="2">
-                <Radio.Group onChange={(e: ChangeEvent<HTMLInputElement>) => setSelectedGenerationType(e.target.value as GenerationType)} value={selectedGenerationType} name="meal">
+                <Radio.Group onValueChange={(value: GenerationType) => setSelectedGenerationType(value)} value={selectedGenerationType} name="meal">
                   <Flex direction="column" alignItems="start" gap="2">
                     <Radio.Item value="only_without_alias">
                       {formatMessage({
@@ -124,7 +124,7 @@ const GeneratePathsModal = ({
         </Modal.Body>
         <Modal.Footer>
           <Modal.Close>
-            <Button onClick={onClose} variant="tertiary">
+            <Button variant="tertiary">
               {formatMessage({
                 id: 'webtools.settings.button.cancel',
                 defaultMessage: 'Cancel',
@@ -134,7 +134,6 @@ const GeneratePathsModal = ({
           <Button
             onClick={() => {
               onSubmit(selectedContentTypes, selectedGenerationType);
-              onClose();
             }}
           >
             {formatMessage({

packages/core/admin/screens/List/index.tsx

@@ -31,7 +31,6 @@ const List = () => {
   const [paths, setPaths] = useState<any[] | null>(null);
   const [config, setConfig] = useState<Config | null>(null);
   const [pagination, setPagination] = useState<Pagination | null>(null);
-  const [openModal, setOpenModal] = useState<boolean>(false);
   const { post } = getFetchClient();
 
   const { formatMessage } = useIntl();
@@ -99,12 +98,18 @@ const List = () => {
         subtitle={formatMessage({ id: 'webtools.settings.page.list.description', defaultMessage: 'A list of all the known URL aliases.' })}
         // TODO: Generate all button.
         primaryAction={(
-          <Button onClick={() => setOpenModal(true)} size="L">
-            {formatMessage({
-              id: 'webtools.settings.button.generate_paths',
-              // defaultMessage: 'Generate paths',
-            })}
-          </Button>
+          <GeneratePathsModal
+            // @ts-ignore
+            onSubmit={handleGeneratePaths}
+            contentTypes={contentTypes}
+          >
+            <Button size="L">
+              {formatMessage({
+                id: 'webtools.settings.button.generate_paths',
+                // defaultMessage: 'Generate paths',
+              })}
+            </Button>
+          </GeneratePathsModal>
         )}
       />
       <Layouts.Content>
@@ -116,13 +121,6 @@ const List = () => {
           contentTypes={contentTypes}
         />
       </Layouts.Content>
-      <GeneratePathsModal
-        isOpen={openModal}
-        // @ts-ignore
-        onSubmit={handleGeneratePaths}
-        onClose={() => setOpenModal(false)}
-        contentTypes={contentTypes}
-      />
     </Page.Protect>
   );
 };