Skip to content

Commit

Permalink
#38 improvements due to evaluation
Browse files Browse the repository at this point in the history
  • Loading branch information
@m4nv3ru
m4nv3ru committed Feb 8, 2023
1 parent eca9ae5 commit 0ab3123
Show file tree
Hide file tree
Showing 10 changed files with 241 additions and 104 deletions.
8 changes: 5 additions & 3 deletions ...isualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@ export default class ConflictFile extends React.Component {
const fileIcon = filePath.endsWith('.js') ? TEXT_DOCUMENT_ICON : EMPTY_DOCUMENT_ICON;
const showInfoIcon = filePath.endsWith('.js');

console.log(filePath, conflict);

const showFileDetails = branch => {
startFileConflictDetails(Object.assign(conflict, { selectedBranch: branch }));
displayConflictDetails(Object.assign(conflict, { overviewType: 'fileDetails', selectedBranch: branch }));
startFileConflictDetails(Object.assign(conflict, { selectedBranch: branch, selectedFile: filePath }));
displayConflictDetails(Object.assign(conflict, { overviewType: 'fileDetails', selectedBranch: branch, selectedFile: filePath }));
};

const { branches } = conflict.files.get(conflict.selectedFile);
const { branches } = conflict.files.get(filePath);

return (
<div>
Expand Down
2 changes: 1 addition & 1 deletion ...ualizations/team-awareness/components/ConflictDetailsModal/ConflictFile/ConflictFile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}
.separator {
height: 1px;
background-color: #343232;
background-color: lightgray;
margin-left: 15px;
margin-right: 15px;
}
Expand Down
110 changes: 86 additions & 24 deletions .../visualizations/team-awareness/components/ConflictDetailsModal/FileDetails/FileDetails.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from 'react';
import * as styles from './FileDetails.scss';
import { LOADING_ICON } from '../Icons';
import { GIT_BRANCH_ICON } from '../Icons';

export default class FileDetails extends React.Component {
constructor(props) {
Expand All @@ -9,50 +9,112 @@ export default class FileDetails extends React.Component {
}

renderError(error) {
console.log(error);
return (
<div>
<span>Could not load conflict details. Reason: </span>
<span>
{error}
</span>
<div className={this.styles.content}>
<div className={this.styles.centerContent}>
<i className={this.styles.errorIndicator + ' fa fa-times-circle'} />
<div>Could not fetch details</div>
</div>
</div>
);
}

renderLoadingIndicator() {
return (
<div className={this.styles.loadingWrapper}>
<div className={this.styles.loadingIcon}>
{LOADING_ICON}
<div className={this.styles.content}>
<div className={this.styles.centerContent}>
<i className={this.styles.loadingIndicator + ' fa fa-spinner'} />
<div>Loading file conflict details...</div>
</div>
</div>
);
}

renderBranchListItem(repositoryUrl, selectedFile, branch) {
return (
<div className={this.styles.flexRow}>
<div className={this.styles.branchIcon}>
{GIT_BRANCH_ICON}
</div>
<div>
<a href={`${repositoryUrl}${branch}/${selectedFile}`}>
{branch}
</a>
</div>
</div>
);
}

renderInvolvedUser(user) {
console.log(user);

return (
<div className={styles.flexRow}>
<i className={styles.userIcon + ' fas fa-user'} />
<div>
{user.gitSignature}
</div>
<div>Loading file conflict details</div>
</div>
);
}

render() {
const { isFileDetailsProcessing, fileDetails: { selectedConflict, repositoryUrl, fetchError } } = this.props;
const { conflictBranch, selectedBranch, selectedFile } = selectedConflict;
console.log(selectedConflict, this.props.fileDetails);
const { isFileDetailsProcessing, fileDetails: { selectedConflict, repositoryUrl, error, changes } } = this.props;
const { conflictBranch, selectedBranch, selectedFile, conflictStakeholder, otherStakeholder } = selectedConflict;

if (isFileDetailsProcessing) {
return this.renderLoadingIndicator();
}
if (fetchError) {
return this.renderError(fetchError);
if (error) {
return this.renderError(error);
}

console.log(changes);
return (
<div>
<div className={this.styles.content}>
<div>
{'Conflict between branches '}
<a href={`${repositoryUrl}${conflictBranch}/${selectedFile}`}>
{conflictBranch}
</a>
{'and '}
<a href={`${repositoryUrl}${selectedBranch}/${selectedFile}`}>
{selectedBranch}
</a>
<span>Conflicts in file </span>
<span className={this.styles.textConsolas}>
{selectedFile}
</span>
</div>
<div className={this.styles.paddingLeft}>
{this.renderBranchListItem(repositoryUrl, selectedFile, conflictBranch)}
{this.renderBranchListItem(repositoryUrl, selectedFile, selectedBranch)}
</div>
<div className={this.styles.separator} />
<div>
<div>Involved Users</div>
<div className={this.styles.paddingLeft}>
{this.renderInvolvedUser(conflictStakeholder)}
{this.renderInvolvedUser(otherStakeholder)}
</div>
</div>
<div className={this.styles.separator} />
<div>
<div>Detailed changes that cause issues:</div>
<div className={this.styles.changeList}>
{changes.map(c =>
<div className={this.styles.changeItem} key={`${c.type}_${c.start}_${c.end}`}>
<span className={this.styles.textConsolas}>
{c.type}
</span>
<span> on </span>
<span>
{c.end - c.start <= 1 ? 'line ' : 'lines '}
</span>
<span className={this.styles.textConsolas}>
{c.start}
</span>
{c.end - c.start > 1 && <span> to </span>}
{c.end - c.start > 1 &&
<span className={this.styles.textConsolas}>
{c.end}
</span>}
</div>
)}
</div>
</div>
</div>
);
Expand Down
57 changes: 53 additions & 4 deletions ...isualizations/team-awareness/components/ConflictDetailsModal/FileDetails/FileDetails.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,57 @@
.loadingIcon {
height: 15px;
width: 15px;
.centerContent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.content {
overflow: scroll;
height: 100%;
padding: 0 17px;
}

.changeItem {
margin-left: 10px;
}
.textConsolas {
font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
}

.separator {
height: 1px;
background-color: lightgray;
}

.userIcon {
align-self: center;
margin-right: 5px;
padding-left: 3px;
}
.loadingWrapper {
.paddingLeft {
padding-left: 10px;
}
.flexRow {
display: flex;
flex-direction: row;
}

.branchIcon {
width: 22px;
}
.loadingIndicator {
font-size: 2rem;
animation: rotation 2s infinite linear;
}
.errorIndicator {
font-size: 2rem;
color: indianred;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
1 change: 1 addition & 0 deletions ...ualizations/team-awareness/components/ConflictDetailsModal/FileOverview/FileOverview.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.content {
height: 100%;
overflow: scroll;
}
10 changes: 1 addition & 9 deletions ui/src/visualizations/team-awareness/components/ConflictDetailsModal/Icons.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import React from 'react';

const GIT_BRANCH_ICON = (
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
Expand Down Expand Up @@ -49,10 +47,4 @@ const MAGNIFY_DOCUMENT_ICON = (
</svg>
);

const LOADING_ICON = (
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
);

export { TEXT_DOCUMENT_ICON, EMPTY_DOCUMENT_ICON, GIT_BRANCH_ICON, MAGNIFY_DOCUMENT_ICON, LOADING_ICON };
export { TEXT_DOCUMENT_ICON, EMPTY_DOCUMENT_ICON, GIT_BRANCH_ICON, MAGNIFY_DOCUMENT_ICON };
112 changes: 62 additions & 50 deletions ui/src/visualizations/team-awareness/components/ConflictOverview/ConflictOverview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,75 +15,87 @@ export default class ConflictOverview extends React.Component {
};
}

render() {
renderLoadingIndicator() {
return (
<div className={[this.styles.conflictOverview, this.styles.conflictOverviewHeader].join(' ')}>
<i className={[this.styles.indicator, this.styles.loadingIndicator, 'fa fa-spinner'].join(' ')} />
<span>Processing conflicts...</span>
</div>
);
}

renderNoConflictIndicator() {
return (
<div className={[this.styles.conflictOverview, this.styles.conflictOverviewHeader].join(' ')}>
<svg
className={this.styles.conflictOverviewIcon}
fill="none"
stroke="#27ae60"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
/>
</svg>
<span>Could not detect any conflicts</span>
</div>
);
}

renderConflictIndicator() {
const { conflicts } = this.props;
const participantsTag = conflicts.length > 1 ? 'participants' : 'participant';
const handleContentMouseOver = () => {
clearTimeout(this.state.contentCloseTimeout);
this.setState({ showContent: true });
const handleContentClose = () => {
this.setState({ contentCloseTimeout: setTimeout(() => this.setState({ showContent: false }), 250) });
};

return (
<div
className={this.styles.conflictOverviewHeader}
onMouseOver={() => this.setState({ showContent: true })}
onMouseOut={handleContentClose}>
<svg className={this.styles.conflictOverviewIcon} fill="#E67E22" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
<span>
Detected conflicts with {conflicts.length} {participantsTag}
</span>
</div>
);
}

render() {
const { conflicts } = this.props;

const handleContentClose = () => {
this.setState({ contentCloseTimeout: setTimeout(() => this.setState({ showContent: false }), 250) });
};
const handleContentMouseOver = () => {
clearTimeout(this.state.contentCloseTimeout);
this.setState({ showContent: true });
};

if (!this.props.branchSelected) {
return <div className={this.styles.conflictOverviewNoSelection}>No conflict branch selected</div>;
}

if (this.props.loading) {
return (
<div className={[this.styles.conflictOverview, this.styles.conflictOverviewHeader].join(' ')}>
<svg
className={this.styles.conflictOverviewIcon}
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<span>Processing conflicts...</span>
</div>
);
return this.renderLoadingIndicator();
}
if (conflicts.length === 0) {
return (
<div className={[this.styles.conflictOverview, this.styles.conflictOverviewHeader].join(' ')}>
<svg
className={this.styles.conflictOverviewIcon}
fill="none"
stroke="#27ae60"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
/>
</svg>
<span>Could not detect any possible conflicts with selected branches</span>
</div>
);
return this.renderNoConflictIndicator();
}

return (
<div className={this.styles.conflictOverview}>
<div
className={this.styles.conflictOverviewHeader}
onMouseOver={() => this.setState({ showContent: true })}
onMouseOut={handleContentClose}>
<svg className={this.styles.conflictOverviewIcon} fill="#E67E22" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
fillRule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clipRule="evenodd"
/>
</svg>
<span>
Detected conflicts with {conflicts.length} {participantsTag}
</span>
</div>
{this.renderConflictIndicator()}
{this.state.showContent &&
<div className={this.styles.conflictOverviewContent} onMouseOver={handleContentMouseOver} onMouseOut={handleContentClose}>
{conflicts.map((conflict, i) =>
Expand Down
Loading

0 comments on commit 0ab3123

Please sign in to comment.