Add version validation when the user converts a Tm to Td (#162)

* fix access to key title when covertion to Td

Signed-off-by: Ricardo M G da Silva <[email protected]>

* feat add validation logic and input field for instance

Signed-off-by: Ricardo M G da Silva <[email protected]>

* fix conversationTMtoTD unit tests

Signed-off-by: Ricardo M G da Silva <[email protected]>

* feat add version feature unit tests

Signed-off-by: Ricardo M G da Silva <[email protected]>

* up the version (#161)

* fix cursor jump to the eof (#164)

Signed-off-by: Ricardo M G da Silva <[email protected]>

* fix change label and a field for helper text int he base component

Signed-off-by: Ricardo M G da Silva <[email protected]>

---------

Signed-off-by: Ricardo M G da Silva <[email protected]>
Co-authored-by: Ege Korkan <[email protected]>

Author: TejInaco

src/components/Dialogs/ConvertTmDialog.tsx

@@ -23,29 +23,38 @@ import DialogTemplate from "./DialogTemplate";
 import {
   processConversionTMtoTD,
   extractPlaceholders,
+  isVersionValid,
 } from "../../services/operations";
 import TmInputForm from "../App/TmInputForm";
+import DialogTextField from "./base/DialogTextField";
+import type { IEdiTDorContext } from "../../types/context";
 
 export interface ConvertTmDialogRef {
   openModal: () => void;
   close: () => void;
 }
 
 const ConvertTmDialog = forwardRef<ConvertTmDialogRef>((props, ref) => {
-  const context = useContext(ediTDorContext);
-  const td = context.offlineTD;
-  const [htmlInputs, setHtmlInputs] = React.useState<JSX.Element[]>([]);
-  const [display, setDisplay] = React.useState<boolean>(() => {
+  const context: IEdiTDorContext = useContext(ediTDorContext);
+  const td: string = context.offlineTD;
+  const [htmlInputs, setHtmlInputs] = useState<JSX.Element[]>([]);
+  const [display, setDisplay] = useState<boolean>(() => {
     return false;
   });
-
   const [affordanceElements, setAffordanceElements] = useState<JSX.Element[]>(
     []
   );
   const [placeholderValues, setPlaceholderValues] = useState<
     Record<string, string>
   >({});
 
+  const [validVersion, setValidVersion] = useState<boolean>(false);
+  const [versionInput, setVersionInput] = useState<string>("");
+
+  useEffect(() => {
+    setValidVersion(isVersionValid(context.parsedTD));
+  }, [context.parsedTD]);
+
   useEffect(() => {
     setHtmlInputs(createHtmlInputs(context.offlineTD));
     setAffordanceElements(createAffordanceElements(context.offlineTD));
@@ -54,10 +63,13 @@ const ConvertTmDialog = forwardRef<ConvertTmDialogRef>((props, ref) => {
   useEffect(() => {
     if (td) {
       const placeholders = extractPlaceholders(td);
-      const initialValues = placeholders.reduce((acc, key) => {
-        acc[key] = "";
-        return acc;
-      }, {});
+      const initialValues = placeholders.reduce<Record<string, string>>(
+        (acc, key) => {
+          acc[key] = "";
+          return acc;
+        },
+        {}
+      );
       setPlaceholderValues(initialValues);
     }
   }, [td]);
@@ -81,7 +93,8 @@ const ConvertTmDialog = forwardRef<ConvertTmDialogRef>((props, ref) => {
       placeholderValues,
       selections.properties,
       selections.actions,
-      selections.events
+      selections.events,
+      versionInput
     );
     const resultJson = JSON.stringify(newTD, null, 2);
     localStorage.setItem("td", resultJson);
@@ -91,6 +104,14 @@ const ConvertTmDialog = forwardRef<ConvertTmDialogRef>((props, ref) => {
     );
   };
 
+  const handleVersionInputChange = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ): void => {
+    const value = e.target.value;
+    const trimmedValue = value.trim();
+    setVersionInput(trimmedValue);
+  };
+
   if (!display) return null;
 
   if (display) {
@@ -108,6 +129,17 @@ const ConvertTmDialog = forwardRef<ConvertTmDialogRef>((props, ref) => {
             onValueChange={handleFieldChange}
           />
 
+          {!validVersion && (
+            <DialogTextField
+              label="TD instance version"
+              id="instance"
+              autoFocus={true}
+              onChange={handleVersionInputChange}
+              placeholder="ex: 1.0.0"
+              value={versionInput}
+              helperText="The Thing Model contains a version without instance key and corresponding value. If you leave this field empty it will automatic generate a instance value."
+            ></DialogTextField>
+          )}
           <h2 className="pb-2 pt-4 text-gray-400">
             Select/unselect the interaction affordances you would like to see in
             the new TD.
@@ -134,9 +166,9 @@ function getSelectedAffordances(elements: JSX.Element[]) {
     if (element.props.className.includes("form-checkbox")) {
       const checkbox = document.getElementById(
         element.props.children[0].props.id
-      ) as HTMLInputElement;
+      ) as HTMLInputElement | null;
       if (checkbox?.checked) {
-        const [type, name] = element.key.toString().split("/");
+        const [type, name] = element.key?.toString().split("/") ?? [];
 
         if (type === "properties") result.properties.push(name);
         else if (type === "actions") result.actions.push(name);
@@ -191,17 +223,6 @@ const createHtmlInputs = (td: string): JSX.Element[] => {
       const { properties, actions, events, requiredFields } =
         extractAffordances(parsed);
 
-      if (parsed["tm:required"]) {
-        for (const field of parsed["tm:required"]) {
-          if (field.startsWith("#properties/"))
-            requiredFields["properties"].push(field.split("/")[1]);
-          else if (field.startsWith("#actions/"))
-            requiredFields["actions"].push(field.split("/")[1]);
-          else if (field.startsWith("#events/"))
-            requiredFields["events"].push(field.split("/")[1]);
-        }
-      }
-
       htmlProperties = createAffordanceHtml(
         "properties",
         properties,
@@ -213,12 +234,12 @@ const createHtmlInputs = (td: string): JSX.Element[] => {
 
     return [...htmlProperties, ...htmlActions, ...htmlEvents];
   } catch (e) {
-    console.log(e);
+    console.error("Error creating HTML inputs:", e);
     return [];
   }
 };
 
-export function createAffordanceHtml(
+function createAffordanceHtml(
   affName: "properties" | "actions" | "events",
   affContainer: string[],
   requiredFields: { [k: string]: string[] }
@@ -246,7 +267,7 @@ export function createAffordanceHtml(
   });
 }
 
-export function extractAffordances(parsed: any) {
+function extractAffordances(parsed: any) {
   const properties = Object.keys(parsed["properties"] || {});
   const actions = Object.keys(parsed["actions"] || {});
   const events = Object.keys(parsed["events"] || {});
@@ -255,10 +276,13 @@ export function extractAffordances(parsed: any) {
   if (parsed["tm:required"]) {
     for (const field of parsed["tm:required"]) {
       if (field.startsWith("#properties/"))
+        // @ts-ignore
         requiredFields["properties"].push(field.split("/")[1]);
       else if (field.startsWith("#actions/"))
+        // @ts-ignore
         requiredFields["actions"].push(field.split("/")[1]);
       else if (field.startsWith("#events/"))
+        // @ts-ignore
         requiredFields["events"].push(field.split("/")[1]);
     }
   }

src/components/Dialogs/base/DialogTextField.tsx

@@ -21,6 +21,7 @@ interface IDialogTextFieldProps {
   autoFocus?: boolean;
   className?: string;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  helperText?: string | ReactNode;
 }
 
 const DialogTextField: React.FC<IDialogTextFieldProps> = (props) => {
@@ -32,6 +33,9 @@ const DialogTextField: React.FC<IDialogTextFieldProps> = (props) => {
       >
         {props.label}
       </label>
+      {props.helperText && (
+        <div className="pb-1 pl-10 text-sm text-white">{props.helperText}</div>
+      )}
       <input
         name={props.id}
         id={props.id}

src/context/ediTDorContext.ts

@@ -11,6 +11,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR W3C-20150513
  ********************************************************************************/
 import React from "react";
+import type { IEdiTDorContext } from "../types/context";
 //  Default
 const defaultContext: IEdiTDorContext = {
   offlineTD: "",

src/context/editorReducers.ts

@@ -110,7 +110,7 @@ const updateOfflineTDReducer = (
   let linkedTd = state.linkedTd;
   if (!linkedTd) {
     // If the user writes a Thing description without the wizard, we save it in linkedTd
-    const href = parsedTD["title"] || "ediTDor Thing";
+    const href = parsedTD?.title ?? "ediTDor Thing";
     linkedTd = { [href]: parsedTD };
   } else if (linkedTd && typeof state.fileHandle !== "object") {
     if (document.getElementById("linkedTd")) {
@@ -119,7 +119,7 @@ const updateOfflineTDReducer = (
       ) as HTMLInputElement | null;
       const href = linkedTdElement?.value || "";
       if (href === "") {
-        linkedTd[parsedTD["title"] || "ediTDor Thing"] = parsedTD;
+        linkedTd[parsedTD?.title || "ediTDor Thing"] = parsedTD;
       } else {
         linkedTd[href] = parsedTD;
       }