working with Threat dragon 2

apps/client/src/components/board/board.tsx

@@ -149,6 +149,15 @@ const Board: FC<BoardProps> = ({
           onSelectDiagram={moves.selectDiagram}
           onSelectComponent={moves.selectComponent}
         />
+      )}
+       {G.modelType === ModelType.THREAT_DRAGON_V2 && model !== undefined && (
+        <Model
+          model={model}
+          selectedDiagram={G.selectedDiagram}
+          selectedComponent={G.selectedComponent}
+          onSelectDiagram={moves.selectDiagram}
+          onSelectComponent={moves.selectComponent}
+        />
       )}
       {G.modelType === ModelType.PRIVACY_ENHANCED && (
         <PrivacyEnhancedModel modelReference={G.modelReference} />

apps/client/src/components/sidebar/sidebar.tsx

@@ -60,6 +60,19 @@ const Sidebar: FC<SidebarProps> = ({
           Download Model
         </DownloadButton>
       )}
+      {G.modelType === ModelType.THREAT_DRAGON_V2 && (
+        <DownloadButton
+          matchID={matchID}
+          playerID={playerID}
+          secret={secret}
+          block
+          size="lg"
+          color="success"
+          apiEndpoint="download"
+        >
+          Download Model
+        </DownloadButton>
+      )}
       <DownloadButton
         matchID={matchID}
         playerID={playerID}

apps/client/src/pages/create.tsx

@@ -255,7 +255,8 @@ class Create extends React.Component<CreateProps, CreateState> {
       }
     }
     if (
-      (this.state.modelType === ModelType.THREAT_DRAGON && !this.state.model) ||
+      (this.state.modelType === ModelType.THREAT_DRAGON && !this.state.model) || 
+      (this.state.modelType === ModelType.THREAT_DRAGON_V2 && !this.state.model) ||
       (this.state.modelType === ModelType.IMAGE && !this.state.image)
     ) {
       return false;
@@ -511,6 +512,47 @@ class Create extends React.Component<CreateProps, CreateState> {
                     to try it out.
                   </FormText>
                 </FormGroup>
+                <FormGroup>
+                  <Label check>
+                    <Input
+                      type="radio"
+                      name="model-type"
+                      value={ModelType.THREAT_DRAGON_V2}
+                      onChange={this.updateModelType.bind(this)}
+                    />
+                    Provide model via Threat Dragon V2
+                  </Label>
+                  <Input
+                    disabled={this.state.modelType !== ModelType.THREAT_DRAGON_V2}
+                    type="file"
+                    name="model-json"
+                    id="model"
+                    onChange={this.readJson.bind(this)}
+                    checked={this.state.modelType === ModelType.THREAT_DRAGON_V2}
+                  />
+                  <FormText color="muted">
+                    Select the JSON model produced by{' '}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://docs.threatdragon.org/"
+                    >
+                      Threat Dragon V2
+                    </a>
+                    .
+                  </FormText>
+                  <FormText color="muted">
+                    Or download a{' '}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      href="https://owasp.org/www-project-threat-dragon/assets/schemas/owasp.threat-dragon.schema.V2.json"
+                    >
+                      sample model
+                    </a>{' '}
+                    to try it out.
+                  </FormText>
+                </FormGroup>
               </Col>
             </FormGroup>
             <hr />

apps/server/src/endpoints.ts

@@ -10,8 +10,10 @@ import {
   INTERNAL_API_PORT,
   isSuit,
   logEvent,
+  mapModel2toOldModel,
   ModelType,
   ThreatDragonModel,
+  ThreatDragonModel2,
   ThreatDragonThreat,
   gameName,
 } from '@eop/shared';
@@ -86,10 +88,17 @@ export const createGame =
       switch (body.modelType) {
         case ModelType.THREAT_DRAGON: {
           // TODO: validation
-          await gameServer.db.setModel(
-            matchID,
-            JSON.parse(body.model as string) as ThreatDragonModel,
-          );
+          logEvent(`printing body: ${body.model}`);
+          var model = JSON.parse(body.model as string) as ThreatDragonModel;
+          await gameServer.db.setModel(matchID,model);
+          break;
+        }
+
+        case ModelType.THREAT_DRAGON_V2: {
+          logEvent(`printing body: ${body.model}`);
+          var model2 = JSON.parse(body.model as string) as ThreatDragonModel2;
+          var model = mapModel2toOldModel(model2);
+          await gameServer.db.setModel(matchID,model);
           break;
         }
 
@@ -222,7 +231,8 @@ export const downloadThreatDragonModel =
 
     const isJsonModel =
       state.G.modelType == ModelType.PRIVACY_ENHANCED ||
-      state.G.modelType == ModelType.THREAT_DRAGON;
+      state.G.modelType == ModelType.THREAT_DRAGON || 
+      state.G.modelType == ModelType.THREAT_DRAGON_V2;
 
     const model = game.model;
     if (!model || 'extension' in model || !isJsonModel) {
@@ -295,7 +305,8 @@ export const downloadThreatsMarkdownFile =
 
     const isJsonModel =
       state.G.modelType == ModelType.PRIVACY_ENHANCED ||
-      state.G.modelType == ModelType.THREAT_DRAGON;
+      state.G.modelType == ModelType.THREAT_DRAGON || 
+      state.G.modelType == ModelType.THREAT_DRAGON_V2;
 
     const model = game.model;
     const threats = getThreats(

packages/shared/src/game/ThreatDragonModel.ts

@@ -332,7 +332,8 @@ type CellType =
   | 'tm.Store'
   | 'tm.Actor'
   | 'tm.Flow'
-  | 'tm.Boundary';
+  | 'tm.Boundary'
+  | 'tm.BoundaryBox';
 
 export interface ThreatDragonThreat {
   /**

packages/shared/src/game/ThreatDragonModel2.ts

@@ -0,0 +1,233 @@
+/**
+ * The threat models used by OWASP Threat Dragon
+ *
+ * This type is based on the schema at https://owasp.org/www-project-threat-dragon/assets/schemas/owasp.threat-dragon.schema.V2.json
+ */
+
+export interface ThreatDragonModel2 {
+    summary: Summary
+    detail: Detail
+    version: string
+  }
+
+export interface Summary {
+    title: string
+    owner: string
+    description: string
+    id: number
+  }
+
+export interface Detail {
+    contributors: Contributor[]
+    diagrams: Diagram[]
+    reviewer: string
+    diagramTop: number
+    threatTop: number
+  }
+
+export interface Contributor {
+    name: string
+  }
+
+export interface Diagram {
+    cells: Cell[]
+    version: string
+    title: string
+    thumbnail: string
+    id: number
+  }
+
+export interface Cell {
+    position?: {
+      /**
+       * The component horizontal position
+       */
+      x: number;
+      /**
+       * The component vertical position
+       */
+      y: number;
+      [k: string]: unknown;
+    };
+    size?: {
+      /**
+       * The component height
+       */
+      height: number;
+      /**
+       * The component width
+       */
+      width: number;
+    };
+    attrs?: Attrs
+    visible?: boolean
+    shape: string
+    zIndex: number
+    id: string
+    data: Data
+    width?: number
+    height?: number
+    connector?: string
+    labels?: Label[]
+    source?: Source
+    target?: Target
+    vertices?: {
+      /**
+       * The horizontal value of the curve point
+       */
+      x: number;
+      /**
+       * The vertical value of the curve point
+       */
+      y: number;
+    };
+  }
+
+export interface Position {
+    x: number
+    y: number
+  }
+
+export interface Size {
+    width: number
+    height: number
+  }
+
+export interface Attrs {
+    line?: Line
+    text?: Text
+    topLine?: TopLine
+    bottomLine?: BottomLine
+    body?: Body
+  }
+
+export interface Line {
+    stroke: string
+    strokeWidth?: number
+    targetMarker: TargetMarker
+    sourceMarker: SourceMarker
+    strokeDasharray?: string
+  }
+
+export interface TargetMarker {
+    name: string
+  }
+
+export interface SourceMarker {
+    name: string
+  }
+
+export interface Text {
+    text: string
+  }
+
+export interface TopLine {
+    stroke: string
+    strokeWidth: number
+    strokeDasharray: any
+  }
+
+export interface BottomLine {
+    stroke: string
+    strokeWidth: number
+    strokeDasharray: any
+  }
+
+export interface Body {
+    stroke: string
+    strokeWidth: number
+    strokeDasharray: any
+  }
+
+export interface Data {
+    name: string
+    description: string
+    type: CellType
+    isTrustBoundary: boolean
+    outOfScope?: boolean
+    reasonOutOfScope?: string
+    threats?: Threat[]
+    hasOpenThreats: boolean
+    isALog?: boolean
+    storesCredentials?: boolean
+    isEncrypted?: boolean
+    isSigned?: boolean
+    providesAuthentication?: boolean
+    isBidirectional?: boolean
+    isPublicNetwork?: boolean
+    protocol?: string
+  }
+
+export interface Threat {
+    status: Status
+    severity: string
+    title: string
+    type: string
+    description: string
+    mitigation: string
+    modelType: string
+    id: string
+  }
+
+export interface Label {
+     /**
+   * The label position
+   */
+  position: number;
+  /**
+   * The label text attributes
+   */
+  attrs: {
+    /**
+     * The text attributes
+     */
+    label: {
+      /**
+       * The text size
+       */
+      // 'font-size': string;
+      /**
+       * The text weight
+       */
+      // 'font-weight': string;
+      /**
+       * The text content
+       */
+      text: string;
+    };
+  };
+  }
+
+export interface Attrs2 {
+    label: Label2
+  }
+
+export interface Label2 {
+    text: string
+  }
+
+export interface Source {
+    x?: number
+    y?: number
+    cell?: string
+  }
+
+export interface Target {
+    x?: number
+    y?: number
+    cell?: string
+  }
+
+export interface Vertex {
+    x: number
+    y: number
+  }
+ export type CellType =
+  | 'tm.Process'
+  | 'tm.Store'
+  | 'tm.Actor'
+  | 'tm.Flow'
+  | 'tm.Boundary'
+  | 'tm.BoundaryBox';
+
+type Status = 'NA' | 'Open' | 'Mitigated';

packages/shared/src/index.ts

@@ -2,6 +2,7 @@ export * from './game/eop';
 export * from './game/gameState';
 export * from './game/setupData';
 export * from './game/ThreatDragonModel';
+export * from './game/ThreatDragonModel2';
 
 export * from './utils/serverConfig';
 export * from './utils/constants';