Re-level non-docs content to top of repo and rename content→docs

resources/dev-tools/components/websocket-api/connection-modal.tsx

@@ -0,0 +1,53 @@
+import { useTranslate } from "@portal/hooks";
+import { Connection } from './types';
+import { ChangeEvent } from 'react';
+import { Modal } from '../Modal';
+
+interface ConnectionButtonProps {
+  selectedConnection: Connection;
+  setSelectedConnection: (value: Connection) => void;
+  connections: Connection[];
+}
+
+interface ConnectionProps extends ConnectionButtonProps {
+  closeConnectionModal: any;
+}
+
+export const ConnectionModal: React.FC<ConnectionProps> = ({
+                                                             selectedConnection,
+                                                             setSelectedConnection,
+                                                             closeConnectionModal,
+                                                             connections,
+                                                           }) => {
+  const { translate } = useTranslate();
+  const handleConnectionChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const selectedValue = event.target.value;
+    const foundConnection = connections.find(
+      (conn) => conn.id === selectedValue
+    );
+
+    setSelectedConnection(foundConnection);
+  };
+
+  return (
+    <Modal id="wstool-1-connection-settings" title={translate('Connection Settings')} onClose={closeConnectionModal}>
+      {connections.map((conn) => (
+        <div className="form-check" key={conn.id}>
+          <input
+            className="form-check-input"
+            type="radio"
+            name="wstool-1-connection"
+            id={conn.id}
+            value={conn.id}
+            checked={selectedConnection.id === conn.id}
+            onChange={handleConnectionChange}
+          />
+          <label className="form-check-label" htmlFor={conn.id}>
+            <div dangerouslySetInnerHTML={{ __html: conn.longname }} />
+          </label>
+        </div>
+      ))}
+    </Modal>
+  );
+};
+