Pr 200

env.d.ts

@@ -1 +1,2 @@
 declare const APP_VERSION: string;
+declare module "*.css";

src/App.tsx

@@ -51,6 +51,7 @@ const App = () => {
   const context = useContext(ediTDorContext);
 
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+  const [jsonIndentation, setJsonIndentation] = useState<2 | 4>(2);
   const [customBreakpointsState, setCustomBreakpointsState] = useState(0);
   const tdViewerRef = useRef<HTMLDivElement>(null);
   const [pendingTd, setPendingTd] = useState<string>("");
@@ -229,7 +230,10 @@ const App = () => {
 
   return (
     <main className="flex max-h-screen w-screen flex-col">
-      <AppHeader></AppHeader>
+      <AppHeader
+        jsonIndentation={jsonIndentation}
+        onJsonIndentationChange={setJsonIndentation}
+      ></AppHeader>
 
       <div className="">
         <Container className="height-adjust flex flex-col md:flex-row">
@@ -249,7 +253,10 @@ const App = () => {
           />
 
           <Section className="w-full md:w-5/12">
-            <JsonEditor editorRef={editorRef} />
+            <JsonEditor
+              editorRef={editorRef}
+              jsonIndentation={jsonIndentation}
+            />
           </Section>
         </Container>
       </div>

src/components/App/AppHeader.tsx

@@ -49,7 +49,15 @@ const INVALID_TYPE_MESSAGE =
 const VALIDATION_FAILED_MESSAGE =
   "The Thing Model did not pass the JSON schema validation Please make sure the Thing Model is valid according to the JSON schema before contributing it to the catalog.";
 
-const AppHeader: React.FC = () => {
+interface AppHeaderProps {
+  jsonIndentation: 2 | 4;
+  onJsonIndentationChange: (value: 2 | 4) => void;
+}
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  jsonIndentation,
+  onJsonIndentationChange,
+}) => {
   const context = useContext(ediTDorContext);
   const td: ThingDescription = context.parsedTD;
   /** States*/
@@ -109,9 +117,8 @@ const AppHeader: React.FC = () => {
       context.updateOfflineTD(res.td);
       context.updateIsModified(false);
 
-      context.setFileHandle(res.fileHandle || res.fileNname);
-      context.updateLinkedTd(undefined);
-      context.addLinkedTd(linkedTd);
+      context.setFileHandle(res.fileHandle || res.fileName);
+      context.updateLinkedTd(linkedTd);
     } catch (error) {
       const msg = "Opening a new TD was canceled or an error occured.";
       console.error(msg, error);
@@ -341,7 +348,11 @@ const AppHeader: React.FC = () => {
       <ConvertTmDialog ref={convertTmDialog} />
       <ShareDialog ref={shareDialog} />
       <CreateTdDialog ref={createTdDialog} />
-      <SettingsDialog ref={settingsDialog} />
+      <SettingsDialog
+        ref={settingsDialog}
+        jsonIndentation={jsonIndentation}
+        onJsonIndentationChange={onJsonIndentationChange}
+      />
       <ContributeToCatalog ref={contributeToCatalog} />
       <ErrorDialog
         isOpen={errorDisplay.state}

src/components/App/Settings.tsx

@@ -14,6 +14,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import InfoIconWrapper from "../base/InfoIconWrapper";
 import TextField from "../base/TextField";
 import { isValidUrl } from "../../utils/strings";
+import Dropdown from "../base/Dropdown";
 
 export interface SettingsData {
   northboundUrl: string;
@@ -32,6 +33,8 @@ interface SettingsProps {
   onChange?: (data: SettingsData, isValid: boolean) => void;
   hideTitle?: boolean;
   className?: string;
+  jsonIndentation?: 2 | 4;
+  onJsonIndentationChange?: (value: 2 | 4) => void;
 }
 
 const Settings: React.FC<SettingsProps> = ({
@@ -43,6 +46,8 @@ const Settings: React.FC<SettingsProps> = ({
   onChange,
   hideTitle = false,
   className = "",
+  jsonIndentation,
+  onJsonIndentationChange,
 }) => {
   const [data, setData] = useState<SettingsData>(initialData);
   const [errors, setErrors] = useState<SettingsErrors>({
@@ -51,10 +56,6 @@ const Settings: React.FC<SettingsProps> = ({
     pathToValue: "",
   });
 
-  useEffect(() => {
-    setData(initialData);
-  }, [initialData]);
-
   useEffect(() => {
     if (onChange) {
       const isValid =
@@ -127,8 +128,35 @@ const Settings: React.FC<SettingsProps> = ({
     []
   );
 
+  const handleJsonIndentationChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      if (!onJsonIndentationChange) {
+        return;
+      }
+
+      const parsed = Number(e.target.value);
+      const value: 2 | 4 = parsed === 4 ? 4 : 2;
+      onJsonIndentationChange(value);
+    },
+    [onJsonIndentationChange]
+  );
+
   return (
     <div className={className}>
+      <div className="my-4 rounded-md bg-black bg-opacity-80 p-2">
+        {!hideTitle && <h1 className="font-bold">JSON Editor</h1>}
+        <div className="px-4">
+          <Dropdown
+            id="json-indentation-select"
+            label="Space indentation"
+            value={String(jsonIndentation)}
+            onChange={handleJsonIndentationChange}
+            options={["2", "4"]}
+            className="w-full"
+          />
+        </div>
+      </div>
+
       <div className="rounded-md bg-black bg-opacity-80 p-2">
         {!hideTitle && (
           <h1 className="font-bold">Third Party Service Configuration</h1>

src/components/Dialogs/SettingsDialog.tsx

@@ -21,68 +21,85 @@ export interface SettingsDialogRef {
   close: () => void;
 }
 
-const SettingsDialog = forwardRef<SettingsDialogRef>((_, ref) => {
-  const [display, setDisplay] = useState<boolean>(false);
-  const [settingsData, setSettingsData] = useState<SettingsData>({
-    northboundUrl: "",
-    southboundUrl: "",
-    pathToValue: "/",
-  });
-  const [isValid, setIsValid] = useState(true);
+interface SettingsDialogProps {
+  jsonIndentation: 2 | 4;
+  onJsonIndentationChange: (value: 2 | 4) => void;
+}
 
-  useImperativeHandle(ref, () => {
-    return {
-      openModal: () => open(),
-      close: () => close(),
-    };
-  });
+const SettingsDialog = forwardRef<SettingsDialogRef, SettingsDialogProps>(
+  ({ jsonIndentation, onJsonIndentationChange }, ref) => {
+    const [display, setDisplay] = useState<boolean>(false);
+    const [settingsData, setSettingsData] = useState<SettingsData>({
+      northboundUrl: "",
+      southboundUrl: "",
+      pathToValue: "/",
+    });
+    const [draftJsonIndentation, setDraftJsonIndentation] = useState<2 | 4>(
+      jsonIndentation
+    );
+    const [isValid, setIsValid] = useState(true);
 
-  const open = () => {
-    setDisplay(true);
-    setSettingsData({
-      northboundUrl: getLocalStorage("northbound") || "",
-      southboundUrl: getLocalStorage("southbound") || "",
-      pathToValue: getLocalStorage("valuePath") || "/",
+    useImperativeHandle(ref, () => {
+      return {
+        openModal: () => open(),
+        close: () => close(),
+      };
     });
-  };
 
-  const close = async () => {
-    setDisplay(false);
-  };
+    const open = () => {
+      setDisplay(true);
+      setSettingsData({
+        northboundUrl: getLocalStorage("northbound") || "",
+        southboundUrl: getLocalStorage("southbound") || "",
+        pathToValue: getLocalStorage("valuePath") || "/",
+      });
+      setDraftJsonIndentation(jsonIndentation);
+    };
 
-  const handleSubmit = () => {
-    if (isValid) {
-      setLocalStorage(settingsData.northboundUrl, "northbound");
-      setLocalStorage(settingsData.southboundUrl, "southbound");
-      setLocalStorage(settingsData.pathToValue, "valuePath");
-      close();
-    }
-  };
+    const close = async () => {
+      setDisplay(false);
+    };
 
-  const handleSettingsChange = (data: SettingsData, valid: boolean) => {
-    setSettingsData(data);
-    setIsValid(valid);
-  };
+    const handleSubmit = () => {
+      if (isValid) {
+        setLocalStorage(settingsData.northboundUrl, "northbound");
+        setLocalStorage(settingsData.southboundUrl, "southbound");
+        setLocalStorage(settingsData.pathToValue, "valuePath");
+        onJsonIndentationChange(draftJsonIndentation);
+        close();
+      }
+    };
 
-  if (display) {
-    return ReactDOM.createPortal(
-      <DialogTemplate
-        hasSubmit={true}
-        onHandleEventLeftButton={close}
-        leftButton={"Cancel"}
-        rightButton={"Save Changes"}
-        onHandleEventRightButton={handleSubmit}
-        title={"Settings"}
-        description={"Change the ediTDors configuration to your needs"}
-      >
-        <Settings initialData={settingsData} onChange={handleSettingsChange} />
-      </DialogTemplate>,
-      document.getElementById("modal-root") as HTMLElement
-    );
-  }
+    const handleSettingsChange = (data: SettingsData, valid: boolean) => {
+      setSettingsData(data);
+      setIsValid(valid);
+    };
 
-  return null;
-});
+    if (display) {
+      return ReactDOM.createPortal(
+        <DialogTemplate
+          hasSubmit={true}
+          onHandleEventLeftButton={close}
+          leftButton={"Cancel"}
+          rightButton={"Save Changes"}
+          onHandleEventRightButton={handleSubmit}
+          title={"Settings"}
+          description={"Change the ediTDors configuration to your needs"}
+        >
+          <Settings
+            initialData={settingsData}
+            onChange={handleSettingsChange}
+            jsonIndentation={draftJsonIndentation}
+            onJsonIndentationChange={setDraftJsonIndentation}
+          />
+        </DialogTemplate>,
+        document.getElementById("modal-root") as HTMLElement
+      );
+    }
+
+    return null;
+  }
+);
 
 SettingsDialog.displayName = "SettingsDialog";
 export default SettingsDialog;