Add editing filter to view for embedded pages.

bcgov · Jul 4, 2024 · 4cd070d · 4cd070d
1 parent 5a127a8
commit 4cd070d
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 6 deletions.
diff --git a/app/components/ScenarioGenerator/ScenarioGenerator.tsx b/app/components/ScenarioGenerator/ScenarioGenerator.tsx
@@ -17,6 +17,7 @@ interface ScenarioGeneratorProps {
   ruleId: string;
   jsonFile: string;
   rulemap: RuleMap;
+  editing?: boolean;
 }
 
 export default function ScenarioGenerator({
@@ -29,6 +30,7 @@ export default function ScenarioGenerator({
   ruleId,
   jsonFile,
   rulemap,
+  editing = true,
 }: ScenarioGeneratorProps) {
   const [simulationRun, setSimulationRun] = useState(false);
   const [newScenarioName, setNewScenarioName] = useState("");
@@ -101,7 +103,7 @@ export default function ScenarioGenerator({
                 Simulate ▶
               </Button>
               <Flex gap={"small"} align="end">
-                {simulationRun && (
+                {simulationRun && editing && (
                   <>
                     <Input
                       value={newScenarioName}
@@ -121,7 +123,7 @@ export default function ScenarioGenerator({
           {resultsOfSimulation && <InputOutputTable title="Results" rawData={resultsOfSimulation} rulemap={rulemap} />}
         </Flex>
         <Flex gap={"small"} vertical>
-          {scenarioExpectedOutput && (
+          {scenarioExpectedOutput && editing && (
             <InputOutputTable
               setRawData={(data) => {
                 setScenarioExpectedOutput(data);

diff --git a/app/components/ScenarioViewer/ScenarioViewer.tsx b/app/components/ScenarioViewer/ScenarioViewer.tsx
@@ -15,6 +15,7 @@ interface ScenarioViewerProps {
   setSelectedSubmissionInputs: (data: any) => void;
   runSimulation: () => void;
   rulemap: RuleMap;
+  editing?: boolean;
 }
 
 export default function ScenarioViewer({
@@ -23,6 +24,7 @@ export default function ScenarioViewer({
   setSelectedSubmissionInputs,
   runSimulation,
   rulemap,
+  editing = true,
 }: ScenarioViewerProps) {
   const [scenariosDisplay, setScenariosDisplay] = useState<Scenario[] | null>(scenarios);
   const [selectedScenario, setSelectedScenario] = useState<Scenario | null>(null);
@@ -96,7 +98,7 @@ export default function ScenarioViewer({
                 </li>
               ))}
             </ol>
-            <Button onClick={() => setManageScenarios(!manageScenarios)}>Manage Scenarios</Button>
+            {editing && <Button onClick={() => setManageScenarios(!manageScenarios)}>Manage Scenarios</Button>}
           </>
         ) : (
           <div>No scenarios available</div>

diff --git a/app/components/SimulationViewer/SimulationViewer.tsx b/app/components/SimulationViewer/SimulationViewer.tsx
@@ -19,9 +19,16 @@ interface SimulationViewerProps {
   jsonFile: string;
   rulemap: RuleMap;
   scenarios: Scenario[];
+  editing?: boolean;
 }
 
-export default function SimulationViewer({ ruleId, jsonFile, rulemap, scenarios }: SimulationViewerProps) {
+export default function SimulationViewer({
+  ruleId,
+  jsonFile,
+  rulemap,
+  scenarios,
+  editing = true,
+}: SimulationViewerProps) {
   const createRuleMap = (array: any[]) => {
     return array.reduce(
       (acc, obj) => {
@@ -83,6 +90,7 @@ export default function SimulationViewer({ ruleId, jsonFile, rulemap, scenarios
         resultsOfSimulation={resultsOfSimulation}
         runSimulation={runSimulation}
         rulemap={rulemap}
+        editing={editing}
       />
     </Flex>
   );
@@ -99,6 +107,7 @@ export default function SimulationViewer({ ruleId, jsonFile, rulemap, scenarios
         ruleId={ruleId}
         jsonFile={jsonFile}
         rulemap={rulemap}
+        editing={editing}
       />
       <Button onClick={handleReset} size="large" type="primary">
         Reset ↻
@@ -123,24 +132,30 @@ export default function SimulationViewer({ ruleId, jsonFile, rulemap, scenarios
       key: "1",
       label: "Simulate pre-defined test scenarios",
       children: scenarioTab,
+      disabled: false,
     },
     {
       key: "2",
       label: "Simulate inputs manually and create new scenarios",
       children: scenarioGeneratorTab,
+      disabled: false,
     },
     {
       key: "3",
       label: "Scenario Results",
       children: scenarioTestsTab,
+      disabled: editing ? false : true,
     },
     {
       key: "4",
       label: "CSV Tests",
       children: csvScenarioTestsTab,
+      disabled: editing ? false : true,
     },
   ];
 
+  const filteredItems = editing ? items : items?.filter((item) => item.disabled !== true) || [];
+
   return (
     <Flex gap="large" vertical>
       <div className={styles.rulesWrapper}>
@@ -153,7 +168,12 @@ export default function SimulationViewer({ ruleId, jsonFile, rulemap, scenarios
       </div>
       <Flex justify="space-between" align="center" className={styles.contentSection}>
         <Flex gap="middle" justify="space-between">
-          <Tabs defaultActiveKey="3" tabBarStyle={{ gap: "10rem" }} items={items} onChange={handleTabChange}></Tabs>
+          <Tabs
+            defaultActiveKey={editing ? "3" : "1"}
+            tabBarStyle={{ gap: "10rem" }}
+            items={filteredItems}
+            onChange={handleTabChange}
+          ></Tabs>
         </Flex>
       </Flex>
     </Flex>

diff --git a/app/rule/[ruleId]/embedded/page.tsx b/app/rule/[ruleId]/embedded/page.tsx
@@ -12,5 +12,5 @@ export default async function Rule({ params: { ruleId } }: { params: { ruleId: s
     return <h1>Rule not found</h1>;
   }
 
-  return <SimulationViewer ruleId={ruleId} rulemap={rulemap} jsonFile={goRulesJSONFilename} scenarios={scenarios} />;
+  return <SimulationViewer ruleId={ruleId} rulemap={rulemap} jsonFile={goRulesJSONFilename} scenarios={scenarios} editing={false} />;
 }