From 5da0ae68667e94fcadf0259f543cfea1c18cb84b Mon Sep 17 00:00:00 2001
From: Christoph Niehoff <christoph.niehoff@tngtech.com>
Date: Thu, 6 Jul 2023 17:22:11 +0200
Subject: [PATCH] Fix review findings

---
 src/client/components/board/board.jsx                  |  2 +-
 .../privacyEnhancedModel/privacyEnhancedModel.test.tsx |  6 +++---
 .../privacyEnhancedModel/privacyEnhancedModel.tsx      | 10 +++++-----
 src/client/components/threatmodal/threatmodal.jsx      |  4 ++--
 src/client/pages/create.tsx                            | 10 +++++-----
 src/client/styles/create.css                           |  2 +-
 src/game/gameState.ts                                  |  2 +-
 src/game/setupData.ts                                  |  2 +-
 src/game/utils.ts                                      |  4 ++--
 src/server/endpoints.js                                |  2 +-
 10 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/client/components/board/board.jsx b/src/client/components/board/board.jsx
index 948575d..05c9d61 100644
--- a/src/client/components/board/board.jsx
+++ b/src/client/components/board/board.jsx
@@ -122,7 +122,7 @@ class Board extends React.Component {
           />
         )}
         {this.props.G.modelType === ModelType.PRIVACY_ENHANCED && (
-          <PrivacyEnhancedModel modelRef={this.props.G.modelRef} />
+          <PrivacyEnhancedModel modelReference={this.props.G.modelReference} />
         )}
         <div className="player-wrap">
           <div className="playingCardsContainer">
diff --git a/src/client/components/privacyEnhancedModel/privacyEnhancedModel.test.tsx b/src/client/components/privacyEnhancedModel/privacyEnhancedModel.test.tsx
index 1233601..b5794aa 100644
--- a/src/client/components/privacyEnhancedModel/privacyEnhancedModel.test.tsx
+++ b/src/client/components/privacyEnhancedModel/privacyEnhancedModel.test.tsx
@@ -6,14 +6,14 @@ describe('privacy enhanced model', () => {
   it('should provide link to model', () => {
     const linkToModel = 'https://link/to/model';
 
-    render(<PrivacyEnhancedModel modelRef={linkToModel} />);
+    render(<PrivacyEnhancedModel modelReference={linkToModel} />);
 
     screen.getByText(linkToModel);
     screen.getByRole('link');
   });
 
-  it('should not provide link to model if there is no modelRef', () => {
-    render(<PrivacyEnhancedModel modelRef={undefined} />);
+  it('should not provide link to model if there is no modelReference', () => {
+    render(<PrivacyEnhancedModel modelReference={undefined} />);
 
     expect(screen.queryByRole('link')).toBeNull();
   });
diff --git a/src/client/components/privacyEnhancedModel/privacyEnhancedModel.tsx b/src/client/components/privacyEnhancedModel/privacyEnhancedModel.tsx
index 150b475..6d2e7ae 100644
--- a/src/client/components/privacyEnhancedModel/privacyEnhancedModel.tsx
+++ b/src/client/components/privacyEnhancedModel/privacyEnhancedModel.tsx
@@ -2,22 +2,22 @@ import type React from 'react';
 import './privacyEnhancedModel.css';
 
 interface PrivacyEnhancedModelProps {
-  modelRef?: string;
+  modelReference?: string;
 }
 
 const PrivacyEnhancedModel: React.FC<PrivacyEnhancedModelProps> = ({
-  modelRef,
+  modelReference,
 }) => {
-  if (modelRef) {
+  if (modelReference) {
     return (
       <div className="model modelContainer">
         <h2>Threat Modelling</h2>
         <p>
-          {modelRef && (
+          {modelReference && (
             <>
               <p>
                 The model is hosted externally:&nbsp;
-                <a href={modelRef}>{modelRef}</a>
+                <a href={modelReference}>{modelReference}</a>
                 {/* Note: React takes care about sanitization of user input above to prevent XSS */}
               </p>
             </>
diff --git a/src/client/components/threatmodal/threatmodal.jsx b/src/client/components/threatmodal/threatmodal.jsx
index 227124a..9626934 100644
--- a/src/client/components/threatmodal/threatmodal.jsx
+++ b/src/client/components/threatmodal/threatmodal.jsx
@@ -201,12 +201,12 @@ class ThreatModal extends React.Component {
     return (
       <ModalBody>
         <FormGroup>
-          <Label for="ref">
+          <Label for="referenceInputField">
             Reference <em>(e.g. link to external bug tracking system)</em>
           </Label>
           <Input
             type="text"
-            name="ref"
+            name="referenceInputField"
             disabled={!this.isOwner}
             autoComplete="off"
             value={this.state.title}
diff --git a/src/client/pages/create.tsx b/src/client/pages/create.tsx
index 918d1bc..fb7e989 100644
--- a/src/client/pages/create.tsx
+++ b/src/client/pages/create.tsx
@@ -58,7 +58,7 @@ interface CreateState {
   turnDuration: number;
   provideModelThruAlternativeChannel: boolean;
   gameMode: GameMode;
-  modelRef?: string;
+  modelReference?: string;
 }
 
 class Create extends React.Component<CreateProps, CreateState> {
@@ -89,7 +89,7 @@ class Create extends React.Component<CreateProps, CreateState> {
       turnDuration: DEFAULT_TURN_DURATION,
       provideModelThruAlternativeChannel: false,
       gameMode: DEFAULT_GAME_MODE,
-      modelRef: undefined,
+      modelReference: undefined,
     };
 
     this.onPlayersUpdated = this.onPlayersUpdated.bind(this);
@@ -138,8 +138,8 @@ class Create extends React.Component<CreateProps, CreateState> {
     formData.append('startSuit', this.state.startSuit);
     formData.append('turnDuration', `${this.state.turnDuration}`);
     formData.append('gameMode', this.state.gameMode);
-    if (this.state.modelRef) {
-      formData.append('modelRef', this.state.modelRef);
+    if (this.state.modelReference) {
+      formData.append('modelReference', this.state.modelReference);
     }
 
     // Use Fetch API (not superagent)
@@ -251,7 +251,7 @@ class Create extends React.Component<CreateProps, CreateState> {
   onModelRefUpdated(e: ChangeEvent<HTMLInputElement>): void {
     this.setState({
       ...this.state,
-      modelRef: e.target.value,
+      modelReference: e.target.value,
     });
   }
 
diff --git a/src/client/styles/create.css b/src/client/styles/create.css
index f895ca9..fd89051 100644
--- a/src/client/styles/create.css
+++ b/src/client/styles/create.css
@@ -28,5 +28,5 @@ table {
 }
 
 .text-input-wide {
-  width: 150%;
+  width: 100%;
 }
diff --git a/src/game/gameState.ts b/src/game/gameState.ts
index b1d08d8..8e73ed0 100644
--- a/src/game/gameState.ts
+++ b/src/game/gameState.ts
@@ -24,6 +24,6 @@ export interface GameState {
   gameMode: GameMode;
   turnDuration: number;
   modelType: ModelType;
-  modelRef?: string;
+  modelReference?: string;
   turnFinishTargetTime?: number;
 }
diff --git a/src/game/setupData.ts b/src/game/setupData.ts
index 2ef007e..e778c25 100644
--- a/src/game/setupData.ts
+++ b/src/game/setupData.ts
@@ -8,5 +8,5 @@ export interface SetupData {
   modelType: ModelType;
   turnDuration: number;
   spectatorCredential: string;
-  modelRef?: string;
+  modelReference?: string;
 }
diff --git a/src/game/utils.ts b/src/game/utils.ts
index 9259dd7..5acd00c 100644
--- a/src/game/utils.ts
+++ b/src/game/utils.ts
@@ -22,7 +22,7 @@ export function setupGame(ctx: Ctx, setupData?: SetupData): GameState {
   const gameMode = setupData?.gameMode ?? DEFAULT_GAME_MODE;
   const modelType = setupData?.modelType ?? ModelType.PRIVACY_ENHANCED;
   const turnDuration = setupData?.turnDuration ?? DEFAULT_TURN_DURATION;
-  const modelRef = setupData?.modelRef;
+  const modelReference = setupData?.modelReference;
 
   const deck = getAllCards(gameMode);
   const startingCard = getStartingCard(gameMode, startSuit);
@@ -57,7 +57,7 @@ export function setupGame(ctx: Ctx, setupData?: SetupData): GameState {
     gameMode: gameMode,
     turnDuration: turnDuration,
     modelType,
-    modelRef,
+    modelReference,
   };
 }
 
diff --git a/src/server/endpoints.js b/src/server/endpoints.js
index caefa83..7123556 100644
--- a/src/server/endpoints.js
+++ b/src/server/endpoints.js
@@ -29,7 +29,7 @@ export const createGame = (gameServer) => async (ctx) => {
           turnDuration: ctx.request.body.turnDuration,
           gameMode: ctx.request.body.gameMode,
           modelType: ctx.request.body.modelType,
-          modelRef: ctx.request.body.modelRef,
+          modelReference: ctx.request.body.modelReference,
           spectatorCredential,
         },
       });