From a8c773be7a0bb9e26a564144cf2c5782c4120941 Mon Sep 17 00:00:00 2001
From: Sam Chau <chaucted@gmail.com>
Date: Thu, 19 Sep 2024 13:45:54 +0930
Subject: [PATCH] refactor: improve and move type / scope tags to diff modal

---
 backend/app/git/status/utils.py               |  2 +-
 .../settings/git/modal/DiffCommit.jsx         | 43 ++++++-----
 .../settings/git/modal/ViewDiff.jsx           | 72 ++++++++++++++-----
 3 files changed, 74 insertions(+), 43 deletions(-)

diff --git a/backend/app/git/status/utils.py b/backend/app/git/status/utils.py
index 00d9784..18e7951 100644
--- a/backend/app/git/status/utils.py
+++ b/backend/app/git/status/utils.py
@@ -67,7 +67,7 @@ def parse_commit_message(commit_message):
         'scope': 'Unknown Scope',
         'subject': 'No subject provided',
         'body': 'No body provided',
-        'footer': 'No footer provided'
+        'footer': ''
     }
 
     # Mapping of commit types and scopes to canonical forms
diff --git a/frontend/src/components/settings/git/modal/DiffCommit.jsx b/frontend/src/components/settings/git/modal/DiffCommit.jsx
index 6fafc75..ff9e848 100644
--- a/frontend/src/components/settings/git/modal/DiffCommit.jsx
+++ b/frontend/src/components/settings/git/modal/DiffCommit.jsx
@@ -1,42 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {GitCommit} from 'lucide-react';
 
 const DiffCommit = ({commitMessage}) => {
     if (!commitMessage) return null;
 
-    const {type, scope, subject, body, footer} = commitMessage;
+    const {subject, body, footer} = commitMessage;
 
     return (
-        <div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg shadow-sm'>
+        <div className='bg-gray-100 dark:bg-gray-800 p-4 rounded-lg'>
             <div className='flex items-start space-x-3'>
-                <GitCommit
-                    className='text-gray-500 dark:text-gray-400 mt-1'
-                    size={16}
-                />
                 <div className='flex-1'>
-                    <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                        Commit Message
-                    </h4>
                     <div className='mb-2'>
-                        <span className='inline-block px-2 py-1 rounded text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 mr-2'>
-                            {type}
-                        </span>
-                        <span className='text-sm font-semibold text-gray-700 dark:text-gray-300'>
-                            {`${scope ? `(${scope})` : ''} ${subject}`}
+                        <span className='text-sm font-semibold text-gray-700 dark:text-gray-300 mr-3'>
+                            {subject}
                         </span>
                     </div>
+
+                    {/* Render the body without double hyphens */}
                     {body && (
                         <ul className='list-disc pl-5 space-y-1'>
-                            {body.split('\n').map((line, index) => (
-                                <li
-                                    key={index}
-                                    className='text-sm text-gray-600 dark:text-gray-400'>
-                                    {line.trim()}
-                                </li>
-                            ))}
+                            {body
+                                .split('\n')
+                                .filter(line => line.trim().startsWith('-')) // Ensure we only take lines starting with "-"
+                                .map((line, index) => (
+                                    <li
+                                        key={index}
+                                        className='text-sm text-gray-600 dark:text-gray-400'>
+                                        {line.trim().replace(/^-\s*/, '')}{' '}
+                                        {/* Remove leading hyphen */}
+                                    </li>
+                                ))}
                         </ul>
                     )}
+
+                    {/* Render the footer if it exists */}
                     {footer && (
                         <div className='mt-2 text-sm text-gray-600 dark:text-gray-400'>
                             {footer}
@@ -50,7 +47,7 @@ const DiffCommit = ({commitMessage}) => {
 
 DiffCommit.propTypes = {
     commitMessage: PropTypes.shape({
-        type: PropTypes.string.isRequired,
+        type: PropTypes.string,
         scope: PropTypes.string,
         subject: PropTypes.string.isRequired,
         body: PropTypes.string,
diff --git a/frontend/src/components/settings/git/modal/ViewDiff.jsx b/frontend/src/components/settings/git/modal/ViewDiff.jsx
index 175099d..57872c0 100644
--- a/frontend/src/components/settings/git/modal/ViewDiff.jsx
+++ b/frontend/src/components/settings/git/modal/ViewDiff.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../../ui/Modal';
-import {Code, FileText, Settings, File} from 'lucide-react';
 import DiffCommit from './DiffCommit';
 
 const ViewDiff = ({
@@ -40,25 +39,45 @@ const ViewDiff = ({
         });
     };
 
-    const getTypeIcon = () => {
-        switch (type) {
-            case 'Regex Pattern':
-                return <Code className='text-blue-400' size={20} />;
-            case 'Custom Format':
-                return <FileText className='text-green-400' size={20} />;
-            case 'Quality Profile':
-                return <Settings className='text-purple-400' size={20} />;
-            default:
-                return <File className='text-gray-400' size={20} />;
-        }
+    // Tag background colors based on the type and scope
+    const typeColors = {
+        'New Feature':
+            'bg-green-100 text-white-800 dark:bg-green-900 dark:text-white-200',
+        'Bug Fix':
+            'bg-red-100 text-white-800 dark:bg-red-900 dark:text-white-200',
+        Documentation:
+            'bg-yellow-100 text-white-800 dark:bg-yellow-900 dark:text-white-200',
+        'Style Change':
+            'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+        Refactoring:
+            'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
+        'Performance Improvement':
+            'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200',
+        'Test Addition/Modification':
+            'bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200',
+        'Chore/Maintenance':
+            'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
     };
 
-    const formattedContent = formatDiffContent(diffContent);
+    const scopeColors = {
+        'Regex Pattern':
+            'bg-blue-100 text-white-800 dark:bg-blue-900 dark:text-white-200',
+        'Custom Format':
+            'bg-green-100 text-white-800 dark:bg-green-900 dark:text-white-200',
+        'Quality Profile':
+            'bg-yellow-100 text-white-800 dark:bg-yellow-900 dark:text-white-200'
+    };
+
+    const renderTag = (label, colorClass) => (
+        <span
+            className={`inline-block px-2 py-1 rounded text-xs font-medium mr-2 ${colorClass}`}>
+            {label}
+        </span>
+    );
 
     const titleContent = (
-        <div className='flex items-center space-x-2'>
-            {getTypeIcon()}
-            <span>{`${type}: ${name}`}</span>
+        <div className='flex items-center space-x-2 flex-wrap'>
+            <span>{name}</span>
             <span
                 className={`px-2 py-1 rounded text-xs font-medium ${
                     isIncoming
@@ -67,18 +86,33 @@ const ViewDiff = ({
                 }`}>
                 {isIncoming ? 'Incoming' : 'Outgoing'}
             </span>
+            {commitMessage &&
+                commitMessage.type &&
+                renderTag(
+                    commitMessage.type,
+                    typeColors[commitMessage.type] ||
+                        'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
+                )}
+            {commitMessage &&
+                commitMessage.scope &&
+                renderTag(
+                    commitMessage.scope,
+                    scopeColors[commitMessage.scope] ||
+                        'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'
+                )}
         </div>
     );
 
+    const formattedContent = formatDiffContent(diffContent);
+
     return (
         <Modal
             isOpen={isOpen}
             onClose={onClose}
             title={titleContent}
-            size='4xl'>
+            width='3xl'>
             <div className='space-y-4'>
-                <DiffCommit commitMessage={commitMessage} />{' '}
-                {/* Passing the commitMessage object */}
+                <DiffCommit commitMessage={commitMessage} />
                 <div className='border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden'>
                     <div className='bg-gray-50 dark:bg-gray-800 p-2 text-sm font-medium text-gray-600 dark:text-gray-300 border-b border-gray-300 dark:border-gray-600'>
                         Diff Content