refactor(settings): replace select with Dropdown and align jsonIndentation with context API

Signed-off-by: Pranav-0440 <pranavghorpade61@gmail.com>

Author: Pranav-0440

src/components/App/Settings.tsx

@@ -15,6 +15,7 @@ import InfoIconWrapper from "../base/InfoIconWrapper";
 import TextField from "../base/TextField";
 import { isValidUrl } from "../../utils/strings";
 import EdiTDorContext from "../../context/ediTDorContext";
+import Dropdown from "../base/Dropdown";
 
 export interface SettingsData {
   northboundUrl: string;
@@ -149,21 +150,14 @@ const Settings: React.FC<SettingsProps> = ({
       <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">
-          <label
-            htmlFor="json-indentation-select"
-            className="mb-1 block text-sm text-gray-300"
-          >
-            Space indentation
-          </label>
-          <select
+          <Dropdown
             id="json-indentation-select"
-            value={data.jsonIndentation}
+            label="Space indentation"
+            value={String(data.jsonIndentation)}
             onChange={handleJsonIndentationChange}
-            className="w-full rounded-md border-2 border-gray-600 bg-gray-600 p-2 text-white focus:border-blue-500 focus:outline-none sm:text-sm"
-          >
-            <option value={2}>2 spaces</option>
-            <option value={4}>4 spaces</option>
-          </select>
+            options={["2", "4"]}
+            className="w-full"
+          />
         </div>
       </div>
 

src/components/Editor/JsonEditor.tsx

@@ -47,7 +47,7 @@ interface JsonSchemaEntry {
 const JsonEditor: React.FC<JsonEditorProps> = ({ editorRef }) => {
   const context = useContext(ediTDorContext);
 
-  const jsonIndentation = context.settings?.jsonIndentation ?? 2;
+  const jsonIndentation = context.jsonIndentation ?? 2;
   const [schemas] = useState<JsonSchemaEntry[]>([]);
   const [proxy, setProxy] = useState<any>(undefined);
   const editorInstance = useRef<editor.IStandaloneCodeEditor | null>(null);

src/components/base/Dropdown.tsx

@@ -17,6 +17,8 @@ interface IDropdownProps {
   id: string;
   label: string;
   options: string[];
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
   className?: string;
 }
 
@@ -33,6 +35,8 @@ const Dropdown: React.FC<IDropdownProps> = (props) => {
         <select
           className="block w-full appearance-none rounded border-2 border-gray-600 bg-gray-600 px-4 py-3 pr-8 leading-tight text-white focus:border-blue-500 focus:outline-none"
           id={props.id}
+          value={props.value}
+          onChange={props.onChange}
         >
           {props.options.map((e) => {
             return <option key={e}>{e}</option>;