Fix review findings

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">

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();
   });

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>
             </>

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}

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,
     });
   }
 

src/client/styles/create.css

@@ -28,5 +28,5 @@ table {
 }
 
 .text-input-wide {
-  width: 150%;
+  width: 100%;
 }

src/game/gameState.ts

@@ -24,6 +24,6 @@ export interface GameState {
   gameMode: GameMode;
   turnDuration: number;
   modelType: ModelType;
-  modelRef?: string;
+  modelReference?: string;
   turnFinishTargetTime?: number;
 }

src/game/setupData.ts

@@ -8,5 +8,5 @@ export interface SetupData {
   modelType: ModelType;
   turnDuration: number;
   spectatorCredential: string;
-  modelRef?: string;
+  modelReference?: string;
 }

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,
   };
 }
 

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,
         },
       });