Skip to content

Commit

Permalink
Updated "editing" to "version", Updated local documentation to be in …
Browse files Browse the repository at this point in the history 
…line with new changes to CSV tests
  • Loading branch information
Tim Wekken authored and Tim Wekken committed Jan 13, 2025
1 parent d540cc8 commit d509833
Show file tree
Hide file tree
Showing 10 changed files with 106 additions and 57 deletions.
23 changes: 11 additions & 12 deletions app/components/RuleManager/RuleManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,14 @@ const RuleViewerEditor = dynamic(() => import("../RuleViewerEditor"), { ssr: fal
interface RuleManagerProps {
ruleInfo: RuleInfo;
initialRuleContent?: DecisionGraphType;
editing?: string | boolean;
version: RULE_VERSION | boolean;
showAllScenarioTabs?: boolean;
}

export default function RuleManager({
ruleInfo,
initialRuleContent = DEFAULT_RULE_CONTENT,
editing = false,
version,
showAllScenarioTabs = true,
}: RuleManagerProps) {
const { _id: ruleId, filepath: jsonFile } = ruleInfo;
Expand All @@ -56,8 +56,8 @@ export default function RuleManager({
const [simulationContext, setSimulationContext] = useState<Record<string, any>>();
const [resultsOfSimulation, setResultsOfSimulation] = useState<Record<string, any> | null>();
const { setHasUnsavedChanges } = useLeaveScreenPopup();
const canEditGraph = editing === RULE_VERSION.draft || editing === true;
const canEditScenarios = editing === RULE_VERSION.draft || editing === RULE_VERSION.inReview || editing === true;
const canEditGraph = version === RULE_VERSION.draft || version === true;
const canEditScenarios = version === RULE_VERSION.draft || version === RULE_VERSION.inReview || version === true;

const updateRuleContent = (updatedRuleContent: DecisionGraphType) => {
if (ruleContent !== updatedRuleContent) {
Expand Down Expand Up @@ -146,21 +146,21 @@ export default function RuleManager({
);
}

const versionColour = getVersionColor(editing.toString());
const versionColour = getVersionColor(version.toString());

return (
<Flex gap="middle" vertical className={styles.rootLayout}>
<div
className={styles.rulesWrapper}
style={editing !== false ? ({ "--version-color": versionColour } as React.CSSProperties) : undefined}
style={version !== false ? ({ "--version-color": versionColour } as React.CSSProperties) : undefined}
>
{editing !== false && (
{version !== false && (
<Flex gap="small" justify="space-between" wrap className={styles.actionBar}>
<VersionBar ruleInfo={ruleInfo} version={editing.toString()} />
<VersionBar ruleInfo={ruleInfo} version={version.toString()} />
<SavePublish
ruleInfo={ruleInfo}
ruleContent={ruleContent}
version={editing}
version={version}
setHasSaved={() => setHasUnsavedChanges(false)}
/>
</Flex>
Expand Down Expand Up @@ -188,6 +188,7 @@ export default function RuleManager({
{scenarios && rulemap && (
<ScenariosManager
ruleId={ruleId}
ruleInfo={ruleInfo}
jsonFile={jsonFile}
ruleContent={ruleContent}
rulemap={rulemap}
Expand All @@ -200,9 +201,7 @@ export default function RuleManager({
simulationContext={simulationContext}
runSimulation={runSimulation}
resultsOfSimulation={resultsOfSimulation}
branchName={ruleInfo.reviewBranch}
pathName={ruleInfo.filepath}
isInReviewMode={editing === RULE_VERSION.inReview}
version={version}
/>
)}
</Flex>
Expand Down
2 changes: 1 addition & 1 deletion app/components/RuleViewerEditor/subcomponents/LinkRuleComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export default function LinkRuleComponent({ specification, id, isSelected, name,
<RuleManager
ruleInfo={{ _id: id, filepath }}
initialRuleContent={selectedRuleContent}
editing={false}
version={false}
showAllScenarioTabs={false}
/>
)}
Expand Down
20 changes: 18 additions & 2 deletions app/components/ScenariosManager/ScenarioCSV/NewScenarioCSV.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ export default function NewScenarioCSV({
setUploadedFile(false);
};

const handleOk = () => {
file && confirmAddingNewCSVFile(file);
};

const handleCancel = () => {
cancelAddingCSVFile();
};

useEffect(() => {
if (openNewCSVModal) {
deleteCurrentCSV();
Expand All @@ -53,8 +61,16 @@ export default function NewScenarioCSV({
<Modal
title="Create new CSV test file"
open={openNewCSVModal}
onOk={() => file && confirmAddingNewCSVFile(file)}
onCancel={() => cancelAddingCSVFile()}
onOk={handleOk}
onCancel={handleCancel}
footer={[
<Button key="back" onClick={handleCancel}>
Return
</Button>,
<Button key="ok" type="primary" onClick={handleOk}>
Add to table list
</Button>,
]}
>
<Flex gap="small">
<ol className={styles.instructionsList}>
Expand Down
30 changes: 20 additions & 10 deletions app/components/ScenariosManager/ScenarioCSV/ScenarioCSV.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@ import { App, Button, Flex, Spin, Table, TableProps } from "antd";
import { CheckCircleFilled, CloseCircleFilled } from "@ant-design/icons";
import { DecisionGraphType } from "@gorules/jdm-editor";
import { logError } from "@/app/utils/logger";
import { RuleInfo } from "@/app/types/ruleInfo";
import { CSVRow, CSVRowData } from "@/app/types/csv";
import { RULE_VERSION } from "@/app/constants/ruleVersion";
import { uploadCSVAndProcess } from "@/app/utils/api";
import { getCSVTestFilesFromBranch, addCSVTestFileToReview, removeCSVTestFileFromReview } from "@/app/utils/githubApi";
import NewScenarioCSV from "./NewScenarioCSV";
import styles from "./ScenarioCSV.module.css";

interface ScenarioCSVProps {
ruleInfo: RuleInfo;
jsonFile: string;
ruleContent?: DecisionGraphType;
branchName?: string;
pathName: string;
isInReviewMode: boolean;
version: RULE_VERSION | boolean;
}

export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathName, isInReviewMode }: ScenarioCSVProps) {
export default function ScenarioCSV({ ruleInfo, jsonFile, ruleContent, version }: ScenarioCSVProps) {
const { message } = App.useApp();
const [openNewCSVModal, setOpenNewCSVModal] = useState(false);
const [isLoadingInTestFiles, setIsLoadingInTestFiles] = useState(true);
Expand All @@ -29,6 +30,9 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
const [scenarioRunResults, setScenarioRunResults] = useState<Record<string, boolean>>({});
const [currentlySelectedRows, setCurrentlySelectedRows] = useState<CSVRow[]>([]);

const { filepath, reviewBranch } = ruleInfo;
const branchName = version === RULE_VERSION.inReview ? reviewBranch : version === RULE_VERSION.inDev ? "dev" : "main";

/**
* Create a new row for the table
*/
Expand All @@ -43,7 +47,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
actions: (
<Flex gap={8}>
<Button onClick={() => runCSVScenarios(downloadFile, filename)}>Run Scenarios</Button>
{isInReviewMode &&
{version === RULE_VERSION.inReview &&
(isLocal ? (
<Button onClick={() => addCSVToReview(fileRowData)}>Add to Review</Button>
) : (
Expand Down Expand Up @@ -126,7 +130,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
if (!(downloadFile instanceof File)) {
throw new Error("No local file to add to review");
}
const csvPathName = pathName.replace(/[^/]+$/, filename || ""); // Get csv path name from json file name
const csvPathName = filepath.replace(/[^/]+$/, filename || ""); // Get csv path name from json file name
const reader = new FileReader(); // Use FileReader to encode file to base64
reader.onload = async () => {
const base64Content = reader.result?.toString().split(",")[1];
Expand Down Expand Up @@ -158,7 +162,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
if (!branchName) {
throw new Error("No branch name exists");
}
const csvPathName = pathName.replace(/[^/]+$/, filenameToRemove);
const csvPathName = filepath.replace(/[^/]+$/, filenameToRemove);
await removeCSVTestFileFromReview(branchName, csvPathName);
const githubFilesWithoutRemovedOne = githubCSVTestsData.filter(({ filename }) => filenameToRemove != filename);
setGithubCSVTestsData(githubFilesWithoutRemovedOne);
Expand Down Expand Up @@ -191,7 +195,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
useEffect(() => {
const getGithubCSVTestFiles = async () => {
try {
const testFiles: CSVRowData[] = await getCSVTestFilesFromBranch(branchName || "main", "/tests/util");
const testFiles: CSVRowData[] = await getCSVTestFilesFromBranch(branchName || "main", "tests/util");
setGithubCSVTestsData(testFiles);
setIsLoadingInTestFiles(false);
} catch (error: any) {
Expand All @@ -200,6 +204,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
}
};
getGithubCSVTestFiles();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

/**
Expand Down Expand Up @@ -235,7 +240,7 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
}));
// Sets the updated data
setCSVTableData(updatedCSVTableDataWithRunResults);
}, [localTestFiles, githubCSVTestsData, scenarioRunResults]);
}, [createRow, localTestFiles, githubCSVTestsData, scenarioRunResults]);

const handleCancelAddingCSVFile = () => {
setOpenNewCSVModal(false);
Expand All @@ -252,7 +257,12 @@ export default function ScenarioCSV({ jsonFile, ruleContent, branchName, pathNam
return (
<div>
<Flex vertical gap="large">
<Table dataSource={csvTableData} rowSelection={rowSelection} pagination={false}>
<Table
dataSource={csvTableData}
rowSelection={rowSelection}
pagination={false}
locale={{ emptyText: "No CSV Testfiles" }}
>
<Table.Column
title="CSV Test Filename"
dataIndex="filename"
Expand Down
52 changes: 38 additions & 14 deletions app/components/ScenariosManager/ScenarioHelper/ScenarioHelper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
button.
</p>
<p>
The scenario&apos;s saved inputs for the rule are shown in the &apos;Inputs&apos; window, and the final results
will be processed in real time through the current visible version of the rule, and returned in the
&apos;Decision&apos; window.
The scenario&apos;s saved inputs for the rule are shown in the &apos;Inputs&apos; window, and the
final results will be processed in real time through the current visible version of the rule, and
returned in the &apos;Decision&apos; window.
</p>
<p>
By running rules individually, you can track their progress as the scenario is processed by the
Expand All @@ -102,8 +102,8 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
scenario inputs, or delete a scenario.
</p>
<p>
Clicking on the edit button will redirect you to the &apos;Simulate manual inputs&apos; tab to update the
inputs and expected results for a scenario.
Clicking on the edit button will redirect you to the &apos;Simulate manual inputs&apos; tab to
update the inputs and expected results for a scenario.
</p>
</div>
</section>
Expand Down Expand Up @@ -212,8 +212,8 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
<div className={styles.sectionContent}>
<p>The simulate button runs your current inputs through the rule to generate results.</p>
<p>
After a successful simulation, you&apos;ll have the option to save these inputs as a new scenario. This
includes a field to name your scenario and a save button to store it for future use.
After a successful simulation, you&apos;ll have the option to save these inputs as a new scenario.
This includes a field to name your scenario and a save button to store it for future use.
</p>
</div>
</section>
Expand Down Expand Up @@ -296,8 +296,8 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
<h2 className={styles.sectionHeading}>1. Re-Run Scenarios</h2>
<div className={styles.sectionContent}>
<p>
The &apos;Re-Run Scenarios&apos; button allows you to run all saved scenarios against the current version of
the rule in view.
The &apos;Re-Run Scenarios&apos; button allows you to run all saved scenarios against the current
version of the rule in view.
</p>
<p>
This is particularly useful when making changes to a rule, as it allows you to verify that all
Expand All @@ -318,7 +318,9 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
<li>No expected results were specified (default pass state)</li>
</ul>
</li>
<li>A red X (✗) indicates the scenario&apos;s actual results don&apos;t match the expected results</li>
<li>
A red X (✗) indicates the scenario&apos;s actual results don&apos;t match the expected results
</li>
</ul>
</div>
</section>
Expand All @@ -340,15 +342,22 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
<div className={styles.sectionContent}>
<p>The table provides several controls for managing the view of your scenarios:</p>
<ul>
<li>&apos;Show Error Scenarios&apos; - Instantly filters the list to display only scenarios with errors</li>
<li>&apos;Clear Filters and Sorters&apos; - Resets all active filters and sorting to their default state</li>
<li>
&apos;Show Error Scenarios&apos; - Instantly filters the list to display only scenarios with
errors
</li>
<li>
&apos;Clear Filters and Sorters&apos; - Resets all active filters and sorting to their default
state
</li>
</ul>
<p>Additional filtering and sorting options:</p>
<ul>
<li>Each column can be filtered based on its content</li>
<li>Columns can be sorted in ascending or descending order</li>
<li>
All filtering and sorting is visual only and doesn&apos;t affect the underlying scenarios or results
All filtering and sorting is visual only and doesn&apos;t affect the underlying scenarios or
results
</li>
</ul>
</div>
Expand All @@ -359,7 +368,22 @@ export default function ScenariosHelper({ section }: ScenariosHelperProps) {
case ScenariosManagerTabs.CSVTab:
return (
<div>
<p>Follow the instructions within this tab to utilize CSV tests.</p>
<p>
Scenario CSV test files will show up in the table below. It will list both test files that are stored on
GitHub as well as locally uploaded ones.
</p>
<p>
You can run the scenarios for those test files by clicking the &apos;Run Scenarios&apos; button in the
table.
</p>
<p>
To add a new CSV test file, click the &apos;+ Create new CSV test file&apos; button and follow the
instructions there.
</p>
<p>
When you are doing a review, the &apos;Add to Review&apos; button will appear in the table and you can use
that to add your local test files to the review and have them stored in GitHub.
</p>
<p>
Specific details about the CSV Tests tab are available on The Hive:{" "}
<a
Expand Down
Loading

0 comments on commit d509833

Please sign in to comment.