#38 merge develop

INSO-World · Feb 8, 2023 · 61fdcab · 61fdcab
1 parent 94986be
commit 61fdcab
Show file tree

Hide file tree

Showing 10 changed files with 135 additions and 57,759 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js b/ui/src/visualizations/team-awareness/components/BubbleChart/BubbleChart.js
@@ -1,36 +1,36 @@
 import React from 'react';
 import _ from 'lodash';
-import * as chartStyle from './BubbleChart.scss';
+import styles from './BubbleChart.scss';
 import * as d3 from 'd3';
 import Legend from '../../../../components/Legend';
 
 export default class BubbleChart extends React.Component {
   constructor(props) {
     super(props);
-    this.styles = _.assign({}, chartStyle);
 
     this.state = {
       componentMounted: false,
       content: this.props.content,
       width: 0,
-      height: 0
+      height: 0,
     };
     window.addEventListener('resize', () => this.setState({ width: window.innerWidth, height: window.innerHeight }));
+    console.log(this.state);
   }
 
   render() {
     const { activeLegend, content } = this.state;
     const legend = activeLegend ? activeLegend : this.constructLegendsFromContent();
 
     return (
-      <div className={this.styles.chartArea}>
-        <svg className={this.styles.chartDrawingArea} ref={svg => (this.svgRef = svg)}>
+      <div className={styles.chartArea}>
+        <svg className={styles.chartDrawingArea} ref={(svg) => (this.svgRef = svg)}>
           <g>
             {this.generateBubbles()}
             {content && content.length > 0 && <Legend x={10} y={50} categories={legend} />}
           </g>
         </svg>
-        <div className={this.styles.chartTooltip} ref={div => (this.tooltipRef = div)} />
+        <div className={styles.chartTooltip} ref={(div) => (this.tooltipRef = div)} />
       </div>
     );
   }
@@ -39,24 +39,24 @@ export default class BubbleChart extends React.Component {
     return [
       {
         name: 'Authors',
-        subLegend: _.map(this.state.content, c => {
+        subLegend: _.map(this.state.content, (c) => {
           return {
             name: c.signature,
             style: {
-              fill: this.props.colors.get(c.id)
-            }
+              fill: this.props.colors.get(c.id),
+            },
           };
-        })
-      }
+        }),
+      },
     ];
   }
 
   constructActiveLegend(stakeholder) {
     const legend = [
       {
         name: stakeholder.signature + ' Activity: ' + stakeholder.activity,
-        style: { fill: this.props.colors.get(stakeholder.id) }
-      }
+        style: { fill: this.props.colors.get(stakeholder.id) },
+      },
     ];
 
     this.setState({ activeLegend: legend });
@@ -74,7 +74,7 @@ export default class BubbleChart extends React.Component {
     const { componentMounted, content } = this.state;
     if (componentMounted && content !== this.props.content) {
       this.setState({
-        content: this.props.content
+        content: this.props.content,
       });
     }
   }
@@ -88,7 +88,7 @@ export default class BubbleChart extends React.Component {
     const { clientWidth, clientHeight } = this.svgRef;
 
     const layout = pack().size([clientWidth, clientHeight]);
-    const root = hierarchy({ children: this.state.content }).sum(d => d.activity);
+    const root = hierarchy({ children: this.state.content }).sum((d) => d.activity);
     layout(root);
 
     const leaves = root.leaves();

diff --git a/ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.js b/ui/src/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.js
@@ -1,31 +1,26 @@
 import React from 'react';
-import * as styles from './ConflictDetailsModal.scss';
+import styles from './ConflictDetailsModal.scss';
 import FileOverview from './FileOverview/FileOverview';
 import FileDetails from './FileDetails/FileDetails';
 
 export default class ConflictDetailsModal extends React.Component {
   constructor(props) {
     super(props);
-    this.styles = Object.assign({}, styles);
   }
 
   render() {
-    const {
-      show,
-      close,
-      selectedConflict,
-      displayConflictDetails,
-      startFileConflictDetails,
-      isFileDetailsProcessing,
-      fileDetails
-    } = this.props;
+    const { show, close, selectedConflict, displayConflictDetails, startFileConflictDetails, isFileDetailsProcessing, fileDetails } =
+      this.props;
 
     if (show === false) return null;
     const { overviewType } = selectedConflict;
-    const closeModal = e => {
-      if (!Array.isArray(e.target.className)) return;
-      if (e.target.className.indexOf('darkBG') >= 0) {
-        close();
+    const closeModal = (e) => {
+      console.log('close', e);
+      if (e.target.className && typeof e.target.className === 'string') {
+        console.log(e.target.className);
+        if (e.target.className.indexOf('darkBG') >= 0) {
+          close();
+        }
       }
     };
 
@@ -47,17 +42,25 @@ export default class ConflictDetailsModal extends React.Component {
     }
 
     return (
-      <div className={this.styles.darkBG} onClick={e => closeModal(e)}>
-        <div className={this.styles.modal}>
-          <div className={this.styles.header}>
-            {overviewType === 'fileDetails' &&
-              <i className={this.styles.backIcon + ' fas fa-caret-left'} title="Go back to file list" onClick={() => navigateToFiles()} />}
+      <div className={styles.darkBG} onClick={(e) => closeModal(e)}>
+        <div className={styles.modal}>
+          <div className={styles.header}>
+            {overviewType === 'fileDetails' && (
+              <button
+                className={[styles.iconButton, styles.leftButton].join(' ')}
+                title="Go back to file list"
+                onClick={() => navigateToFiles()}>
+                <i className={'fas fa-caret-left ' + styles.fill} />
+              </button>
+            )}
             {overviewType === 'files' && <i />}
             <b>Conflict Details</b>
-            <i className={this.styles.closeIcon + ' fas fa-times'} onClick={() => close()} title="Close Details Modal" />
+            <button className={[styles.iconButton, styles.rightButton].join(' ')} onClick={() => close()} title="Close Details Modal">
+              <i className={'fas fa-times ' + styles.fill} />
+            </button>
           </div>
           {content}
-          <div className={this.styles.footer}>
+          <div className={styles.footer}>
             <button title="Close Details Modal" onClick={() => close()}>
               Close
             </button>

diff --git a/...c/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.scss b/...c/visualizations/team-awareness/components/ConflictDetailsModal/ConflictDetailsModal.scss
@@ -52,13 +52,22 @@
   justify-content: space-between;
 }
 
-.backIcon {
-  margin-left: 17px;
+.iconButton {
   cursor: pointer;
+  border: none;
+  background-color: transparent;
+  height: 100%;
+}
+.leftButton {
+  margin-left: 17px;
 }
-.closeIcon {
+.rightButton {
   margin-right: 17px;
-  cursor: pointer;
+}
+
+.fill {
+  width: 32px !important;
+  height: 32px !important;
 }
 .modalBody {}
 

diff --git a/...isualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.js b/...isualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.js
@@ -1,11 +1,10 @@
 import React from 'react';
-import * as styles from './ConflictFile.scss';
+import 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() {
@@ -15,7 +14,7 @@ export default class ConflictFile extends React.Component {
 
     console.log(filePath, conflict);
 
-    const showFileDetails = branch => {
+    const showFileDetails = (branch) => {
       startFileConflictDetails(Object.assign(conflict, { selectedBranch: branch, selectedFile: filePath }));
       displayConflictDetails(Object.assign(conflict, { overviewType: 'fileDetails', selectedBranch: branch, selectedFile: filePath }));
     };
@@ -24,40 +23,33 @@ export default class ConflictFile extends React.Component {
 
     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 className={styles.item}>
+          <div className={styles.header}>
+            <div className={styles.headerIcon}>{fileIcon}</div>
+            <div className={styles.headerText}>{filePath}</div>
           </div>
-          <div className={this.styles.fileBody}>
+          <div className={styles.fileBody}>
             <small>
               Conflicts on {branches.length} branch{branches.length === 1 ? '' : 'es'}
             </small>
             <div>
-              {branches.map(branch =>
-                <div key={`file_branch_${branch}`} className={this.styles.branch}>
-                  <div className={this.styles.branchIcon}>
-                    {GIT_BRANCH_ICON}
-                  </div>
-                  <div className={this.styles.branchTextContainer}>
-                    <div className={this.styles.branchText}>
-                      {branch}
-                    </div>
-                    {showInfoIcon &&
-                      <button className={this.styles.branchInfoIcon} onClick={() => showFileDetails(branch)} title="View conflicts">
+              {branches.map((branch) => (
+                <div key={`file_branch_${branch}`} className={styles.branch}>
+                  <div className={styles.branchIcon}>{GIT_BRANCH_ICON}</div>
+                  <div className={styles.branchTextContainer}>
+                    <div className={styles.branchText}>{branch}</div>
+                    {showInfoIcon && (
+                      <button className={styles.branchInfoIcon} onClick={() => showFileDetails(branch)} title="View conflicts">
                         {MAGNIFY_DOCUMENT_ICON}
-                      </button>}
+                      </button>
+                    )}
                   </div>
                 </div>
-              )}
+              ))}
             </div>
           </div>
         </div>
-        <div className={this.styles.separator} />
+        <div className={styles.separator} />
       </div>
     );
   }