Merge pull request #746 from CodeForAfrica/feature/roboform

@/Roboshield Move Form to payloadcms
CodeForAfrica · Jul 2, 2024 · b4d38ef · b4d38ef
2 parents 79d510d + b868212
commit b4d38ef
Show file tree

Hide file tree

Showing 21 changed files with 961 additions and 55 deletions.
diff --git a/apps/roboshield/payload-types.ts b/apps/roboshield/payload-types.ts
@@ -47,13 +47,137 @@ export interface Page {
   fullTitle?: string | null;
   slug?: string | null;
   blocks?:
-    | {
-        title: string;
-        subtitle: string;
-        id?: string | null;
-        blockName?: string | null;
-        blockType: "page-header";
-      }[]
+    | (
+        | {
+            title: string;
+            subtitle: string;
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "page-header";
+          }
+        | {
+            toolTipText: string;
+            steps?:
+              | (
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      defaultFetchExistingRobots?: boolean | null;
+                      existingRobotsTxt: string;
+                      placeholder: string;
+                      urlValidationError: string;
+                      fetch: string;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "existing-robots";
+                    }
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      crawlDelay: {
+                        label: string;
+                        title: string;
+                      };
+                      cacheDelay: {
+                        label: string;
+                        title: string;
+                      };
+                      visitTime: {
+                        label: string;
+                        title: string;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "delays";
+                    }
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      selectPlatform: {
+                        label: string;
+                        title: string;
+                      };
+                      disallowedPaths: {
+                        label: string;
+                        title: string;
+                      };
+                      allowedPaths: {
+                        label: string;
+                        title: string;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "paths";
+                    }
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      aiWebCrawlers: {
+                        label: string;
+                        title: string;
+                      };
+                      searchEngineCrawlers: {
+                        label: string;
+                        title: string;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "block-bots";
+                    }
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      placeholder: string;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "site-maps";
+                    }
+                  | {
+                      title: string;
+                      hint?:
+                        | {
+                            [k: string]: unknown;
+                          }[]
+                        | null;
+                      placeholder: string;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "finish";
+                    }
+                )[]
+              | null;
+            labels: {
+              continue: string;
+              back: string;
+              reset: string;
+              download: string;
+              copyToClipboard: string;
+            };
+            id?: string | null;
+            blockName?: string | null;
+            blockType: "robo-form";
+          }
+      )[]
     | null;
   meta?: {
     title?: string | null;

diff --git a/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx b/apps/roboshield/src/components/BlockRenderer/BlockRenderer.tsx
@@ -1,17 +1,20 @@
 import PageHeader from "@/roboshield/components/PageHeader/PageHeader";
 import { Page } from "@/root/payload-types";
+import RoboForm from "@/roboshield/components/RoboForm";
+import { FC } from "react";
 
 interface BlockRendererProps extends Pick<Page, "blocks"> {}
 
 const components = {
   "page-header": PageHeader,
+  "robo-form": RoboForm,
 };
 
 export default function BlockRenderer({ blocks }: BlockRendererProps) {
   return (
     <>
       {blocks?.map((block, index) => {
-        const Component = components[block.blockType];
+        const Component: FC<any> = components[block.blockType];
 
         if (Component) {
           return <Component key={index} {...block} />;

diff --git a/apps/roboshield/src/components/Code/Code.tsx b/apps/roboshield/src/components/Code/Code.tsx
@@ -10,6 +10,7 @@ interface CodeProps {
   onReset: () => void;
   onBack: () => void;
   showButtons?: boolean;
+  labels?: { [key: string]: any };
 }
 
 export default function Code(props: CodeProps) {
@@ -21,6 +22,7 @@ export default function Code(props: CodeProps) {
     onCodeChange,
     onBack,
     showButtons = false,
+    labels,
   } = props;
 
   const handleCodeChange = (newCode: string) => {
@@ -49,7 +51,7 @@ export default function Code(props: CodeProps) {
               onClick={onCopy}
               disabled={!showButtons}
             >
-              Copy to Clipboard
+              {labels?.copyToClipboard}
             </Button>
             <Button
               variant="contained"
@@ -65,7 +67,7 @@ export default function Code(props: CodeProps) {
               onClick={onDownload}
               disabled={!showButtons}
             >
-              Download
+              {labels?.download}
             </Button>
             <Button
               variant="outlined"
@@ -76,7 +78,7 @@ export default function Code(props: CodeProps) {
               onClick={onBack}
               disabled={!showButtons}
             >
-              Back
+              {labels?.back}
             </Button>
           </Stack>
         </Grid>
@@ -104,7 +106,7 @@ export default function Code(props: CodeProps) {
               onClick={onReset}
               disabled={!showButtons}
             >
-              Reset
+              {labels?.reset}
             </Button>
           </Stack>
         </Grid>

diff --git a/apps/roboshield/src/components/CommonBots/CommonBots.tsx b/apps/roboshield/src/components/CommonBots/CommonBots.tsx
@@ -36,6 +36,8 @@ export default function CommonBots({
   handleSkipToLast,
   hint,
   lastStep,
+  globalLabels,
+  toolTipText,
 }: StepComponent) {
   const { state } = useGlobalState();
 
@@ -83,7 +85,11 @@ export default function CommonBots({
 
   return (
     <>
-      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <SkipToLastStep
+        handleSkipToLast={skipToLast}
+        lastStep={lastStep}
+        toolTipText={toolTipText}
+      />
       <StepHint hint={hint} />
       <Box sx={{ py: 2 }}>
         {
@@ -217,6 +223,7 @@ export default function CommonBots({
         isValid={true}
         lastStep={lastStep}
         back={false}
+        labels={globalLabels}
       />
     </>
   );

diff --git a/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx b/apps/roboshield/src/components/CommonSettings/CommonSettings.tsx
@@ -19,13 +19,29 @@ import { StepComponent } from "@/roboshield/types/stepComponent";
 import SkipToLastStep from "@/roboshield/components/SkipToLastStep";
 import StepHint from "@/roboshield/components/StepHint";
 
+interface LabelNode {
+  title: string;
+  label: string;
+}
+
+interface Props extends StepComponent {
+  selectPlatform?: LabelNode;
+  allowedPaths?: LabelNode;
+  disallowedPaths?: LabelNode;
+}
+
 export default function CommonSettings({
   handleNext,
   handleBack,
   handleSkipToLast,
   hint,
   lastStep,
-}: StepComponent) {
+  globalLabels,
+  selectPlatform,
+  allowedPaths: allowedPathsLabel,
+  disallowedPaths: disallowedPathsLabel,
+  toolTipText,
+}: Props) {
   const { state } = useGlobalState();
 
   const [disallowedPaths, setDisallowedPaths] = useState<string[]>(
@@ -78,7 +94,11 @@ export default function CommonSettings({
 
   return (
     <>
-      <SkipToLastStep handleSkipToLast={skipToLast} lastStep={lastStep} />
+      <SkipToLastStep
+        handleSkipToLast={skipToLast}
+        lastStep={lastStep}
+        toolTipText={toolTipText}
+      />
       <StepHint hint={hint} />
       <Box
         sx={{
@@ -95,8 +115,8 @@ export default function CommonSettings({
               width: "100%",
             }}
           >
-            Select platform
-            <Tooltip title="Select the platform your website is built on to generate the correct robots.txt file.">
+            {selectPlatform?.label}
+            <Tooltip title={selectPlatform?.title}>
               <IconButton size="small" color="info">
                 <InfoIcon />
               </IconButton>
@@ -132,8 +152,8 @@ export default function CommonSettings({
               width: "100%",
             }}
           >
-            Disallowed paths
-            <Tooltip title="The disallowed paths directive specifies the paths that a bot should not visit.">
+            {disallowedPathsLabel?.label}
+            <Tooltip title={disallowedPathsLabel?.title}>
               <IconButton color="info">
                 <InfoIcon />
               </IconButton>
@@ -167,8 +187,8 @@ export default function CommonSettings({
               width: "100%",
             }}
           >
-            Allowed paths
-            <Tooltip title="The allowed paths directive specifies the paths that a bot should visit.">
+            {allowedPathsLabel?.label}
+            <Tooltip title={allowedPathsLabel?.title}>
               <IconButton color="info">
                 <InfoIcon />
               </IconButton>
@@ -201,6 +221,7 @@ export default function CommonSettings({
         isValid={true}
         lastStep={lastStep}
         back={false}
+        labels={globalLabels}
       />
     </>
   );