Larger configuration input boxes

ScottLogic · Aug 8, 2023 · 80b96ba · 80b96ba
1 parent fcbf23a
commit 80b96ba
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 10 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -7,6 +7,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-contenteditable": "^3.3.7",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-scripts": "5.0.1",

diff --git a/frontend/src/Attacks.ts b/frontend/src/Attacks.ts
@@ -3,8 +3,8 @@ import { ATTACK_TYPES, AttackInfo } from "./models/attack";
 const ATTACKS: AttackInfo[] = [
   {
     id: ATTACK_TYPES.JAILBREAK_PROMPT,
-    name: "jailbreak prompt",
-    info: "using prompt injection, get the chat bot in a state where it no longer follows its original instructions.",
+    name: "Jailbreak Prompt",
+    info: "Using prompt injection, get the chat bot in a state where it no longer follows its original instructions.",
   },
 ];
 

diff --git a/frontend/src/Defences.ts b/frontend/src/Defences.ts
@@ -5,13 +5,13 @@ const DEFENCE_DETAILS: DefenceInfo[] = [
     DEFENCE_TYPES.CHARACTER_LIMIT,
     "Character Limit",
     "Limit the number of characters in the user input. This is a form of prompt validation.",
-    [new DefenceConfig("maxMessageLength", "max Message Length")]
+    [new DefenceConfig("maxMessageLength", "max message length")]
   ),
   new DefenceInfo(
     DEFENCE_TYPES.EMAIL_WHITELIST,
     "Email Whitelist",
     "Only allow emails to those on a whitelist. They can be full email addresses, or domains in the format '*@scottlogic.com'",
-    [new DefenceConfig("whitelist", "email Whitelist")]
+    [new DefenceConfig("whitelist", "email whitelist")]
   ),
   new DefenceInfo(
     DEFENCE_TYPES.RANDOM_SEQUENCE_ENCLOSURE,

diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.css b/frontend/src/components/DefenceBox/DefenceConfiguration.css
@@ -0,0 +1,9 @@
+.defence-config-value {
+  border-color: #444;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 1px;
+  font-size: 14px;
+  padding: 2px 4px;
+  margin: 4px 0px;
+}
diff --git a/frontend/src/components/DefenceBox/DefenceConfiguration.tsx b/frontend/src/components/DefenceBox/DefenceConfiguration.tsx
@@ -1,4 +1,6 @@
+import "./DefenceConfiguration.css";
 import { DefenceConfig } from "../../models/defence";
+import ContentEditable from "react-contenteditable";
 
 function DefenceConfiguration(
   this: any,
@@ -18,15 +20,14 @@ function DefenceConfiguration(
 
   return (
     <div>
-      <span className="defence-config-name">{config.name} </span>
-      <input
+      <span className="defence-config-name">{config.name}: </span>
+      <ContentEditable
         className="defence-config-value"
-        type="text"
-        title="Press enter to save"
-        defaultValue={config.value}
+        html={config.value}
         onKeyUp={setConfiguration.bind(this)}
         onClick={(event) => event.stopPropagation()}
-      ></input>
+        onChange={() => {}}
+      />
     </div>
   );
 }