#38: add conflict file overview to details modal

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.js

@@ -1,16 +1,13 @@
 import React from 'react';
 import * as styles from './ConflictDetailsModal.scss';
+import FileOverview from './FileOverview/FileOverview';
 
 export default class ConflictDetailsModal extends React.Component {
   constructor(props) {
     super(props);
     this.styles = Object.assign({}, styles);
   }
 
-  getUniqueFiles(selectedConflict) {
-    return [...new Set(selectedConflict.conflicts.map(c => c.file))];
-  }
-
   render() {
     const { show, close, selectedConflict } = this.props;
     if (show === false) return null;
@@ -22,27 +19,19 @@ export default class ConflictDetailsModal extends React.Component {
       }
     };
 
-    console.log(selectedConflict);
+    const content = <FileOverview selectedConflict={selectedConflict} />;
+
     return (
       <div className={this.styles.darkBG} onClick={e => closeModal(e)}>
         <div className={this.styles.modal}>
-          <div className={this.styles.modalHeader}>
+          <div className={this.styles.header}>
             <b>Conflict Details</b>
           </div>
-          <div className={this.styles.modalBody}>Here comes the content</div>
-          <div className={this.styles.modalFileContainer}>
-            {this.getUniqueFiles(selectedConflict).map((c, i) =>
-              <div className={this.styles.modalFileItem} key={`conflicted_file_${i}`}>
-                <div className={this.styles.modalFileItemPath}>
-                  {c.path}
-                </div>
-                {c.path.endsWith('.js') && <div className={this.styles.modalFileItemIcon}>+</div>}
-              </div>
-            )}
-          </div>
-
-          <div className={this.styles.modalFooter}>
-            <button onClick={() => close()}>Close</button>
+          {content}
+          <div className={this.styles.footer}>
+            <button title="Close Details Modal" onClick={() => close()}>
+              Close
+            </button>
           </div>
         </div>
       </div>

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.scss

@@ -11,43 +11,79 @@
 
 
 .modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+
   background-color: white;
-  width: 500px;
+  width: 700px;
   height: 500px;
   z-index: 10;
   position: absolute;
   margin-left: auto;
 
   border-radius: 5px;
   box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.04);
-}
 
+  .header {
+    margin-top: 15px;
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+  .footer {
+    display: flex;
+    justify-content: end;
+    margin: 10px 15px 15px 0;
 
-.modalHeader {
-  font-size: 2rem;
-  display: flex;
-  align-items: center;
-  flex-direction: row;
-  justify-content: center;
+    button {
+      cursor: pointer;
+      border-radius: 3px;
+      background-color: #3273dc;
+      padding: 8px 16px;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      border: none;
+      color: white;
+    }
+  }
 }
+
 .modalBody {}
-.modalFooter {}
 
-.modalFileContainer {
-  overflow: scroll;
-  max-height: 300px;
+.item{
+  margin-left: 15px;
 }
-.modalFileItem{
+.header {
   display: flex;
+  align-items: center;
   flex-direction: row;
-  justify-content: space-between;
 }
-.modalFileItemPath{
-  margin-left: 30px;
+.fileBody {
+  margin-left: 35px;
+}
+.headerText{
+  margin-left: 15px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 }
-.modalFileItemIcon{
-  margin-right: 30px;
+.headerIcon{
+  width: 20px;
+  height: 20px;
+}
+.branch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.branchIcon {
+  width: 15px;
+  height: 15px;
+}
+.branchText {
+  margin-left: 10px;
 }

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import * as styles from './ConflictFile.scss';
+import { EMPTY_DOCUMENT_ICON, GIT_BRANCH_ICON, MAGNIFY_DOCUMENT_ICON, TEXT_DOCUMENT_ICON } from '../Icons';
+
+export default class ConflictFile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = Object.assign({}, styles);
+  }
+
+  render() {
+    const { filePath, conflicts } = this.props;
+    console.log(conflicts);
+
+    const fileIcon = filePath.endsWith('.js') ? TEXT_DOCUMENT_ICON : EMPTY_DOCUMENT_ICON;
+    const showInfoIcon = filePath.endsWith('.js');
+
+    return (
+      <div>
+        <div className={this.styles.item}>
+          <div className={this.styles.header}>
+            <div className={this.styles.headerIcon}>
+              {fileIcon}
+            </div>
+            <div className={this.styles.headerText}>
+              {filePath}
+            </div>
+          </div>
+          <div className={this.styles.fileBody}>
+            <small>
+              Conflicts on {conflicts.length} branch{conflicts.length === 1 ? '' : 'es'}
+            </small>
+            <div>
+              {conflicts.map(c =>
+                <div className={this.styles.branch}>
+                  <div className={this.styles.branchIcon}>
+                    {GIT_BRANCH_ICON}
+                  </div>
+                  <div className={this.styles.branchTextContainer}>
+                    <div className={this.styles.branchText}>
+                      {c.otherStakeholder.branch}
+                    </div>
+                    {showInfoIcon &&
+                      <button className={this.styles.branchInfoIcon} title="View conflicts">
+                        {MAGNIFY_DOCUMENT_ICON}
+                      </button>}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className={this.styles.separator} />
+      </div>
+    );
+  }
+}

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.scss

@@ -0,0 +1,66 @@
+.item{
+  margin-left: 15px;
+}
+.separator {
+  height: 1px;
+  background-color: #343232;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .headerIcon{
+    width: 20px;
+    height: 20px;
+  }
+  .headerText{
+    margin-left: 15px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+}
+.fileBody {
+  margin-left: 35px;
+}
+
+.branch {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .branchIcon {
+    width: 22px;
+  }
+
+  .branchTextContainer {
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 7px;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+    .branchText {
+      max-width: 570px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .branchInfoIcon {
+      padding: 0;
+      cursor: pointer;
+      background-color: transparent;
+      border: none;
+      width: 20px;
+      height: 20px;
+      margin-right: 20px;
+    }
+  }
+}
+
+

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/FileDetailes/FileDetails.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as styles from './FileDetails.scss';
+
+export default class FileDetails extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = Object.assign({}, styles);
+  }
+
+  render() {
+    return null;
+  }
+}

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/FileOverview/FileOverview.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import * as styles from './FileOverview.scss';
+import ConflictFile from '../ConflictFile/ConflictFile';
+
+export default class FileOverview extends React.Component {
+  constructor(props) {
+    super(props);
+    this.styles = Object.assign({}, styles);
+  }
+
+  getUniqueFiles(selectedConflict) {
+    const files = new Map();
+
+    selectedConflict.conflicts.forEach(c => {
+      if (!files.has(c.file.path)) {
+        files.set(c.file.path, []);
+      }
+
+      files.get(c.file.path).push(c);
+    });
+
+    console.log(files);
+    return files;
+  }
+
+  render() {
+    const { selectedConflict } = this.props;
+
+    const fileEntries = [];
+    for (const [filePath, conflicts] of this.getUniqueFiles(selectedConflict)) {
+      fileEntries.push(<ConflictFile filePath={filePath} key={`conflicted_file_${filePath}`} conflicts={conflicts} />);
+    }
+
+    return (
+      <div className={this.styles.content}>
+        {fileEntries}
+      </div>
+    );
+  }
+}

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/FileOverview/FileOverview.scss

@@ -0,0 +1,3 @@
+.content {
+  overflow: scroll;
+}

ui/src/visualizations/team-awareness/components/ConflictDetailsModal/Icons.js

@@ -0,0 +1,50 @@
+const GIT_BRANCH_ICON = (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7 5C7 3.89543 7.89543 3 9 3C10.1046 3 11 3.89543 11 5C11 5.74028 10.5978 6.38663 10 6.73244V14.0396H11.7915C12.8961 14.0396
+      13.7915 13.1441 13.7915 12.0396V10.7838C13.1823 10.4411 12.7708 9.78837 12.7708 9.03955C12.7708 7.93498 13.6662 7.03955 14.7708
+      7.03955C15.8753 7.03955 16.7708 7.93498 16.7708 9.03955C16.7708 9.77123 16.3778 10.4111 15.7915 10.7598V12.0396C15.7915 14.2487
+      14.0006 16.0396 11.7915 16.0396H10V17.2676C10.5978 17.6134 11 18.2597 11 19C11 20.1046 10.1046 21 9 21C7.89543 21 7 20.1046 7 19C7
+      18.2597 7.4022 17.6134 8 17.2676V6.73244C7.4022 6.38663 7 5.74028 7 5Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+const EMPTY_DOCUMENT_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 
+      00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 
+      1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+    />
+  </svg>
+);
+
+const TEXT_DOCUMENT_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0
+      12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504
+      1.125-1.125V11.25a9 9 0 00-9-9z"
+    />
+  </svg>
+);
+
+const MAGNIFY_DOCUMENT_ICON = (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231
+      13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504
+      1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+    />
+  </svg>
+);
+
+export { TEXT_DOCUMENT_ICON, EMPTY_DOCUMENT_ICON, GIT_BRANCH_ICON, MAGNIFY_DOCUMENT_ICON };