jira link visibilty fix (#89)

* TP-47935 | truncating from start

* TP-47935 | padding added

* TP-47935 | showing only jira id

* TP-47935 | jira id color

* TP-47935 | width and hline

* TP-47935 | centered aligned

* TP-47935 | minor fix

* TP-47935 | minor fix 2

src/Pages/Incidents/DescriptionContent/DescriptionContent.module.scss

@@ -1,6 +1,6 @@
 .description-content {
   width: 450px;
-  margin-right: 50px;
+  margin-right: 20px;
   margin-top: 16px;
 }
 
@@ -32,20 +32,14 @@
 }
 
 .jira-link-row {
-  width: 250px;
+  width: 100px;
   overflow: hidden;
-}
-
-.jira-link-hover {
-  transition: color 0.3s;
-}
-
-.jira-link-hover:hover {
-  color: var(--navi-color-blue-base);
+  margin-right: 5px;
 }
 
 .link-row-style {
   display: flex;
+  align-items: center;
   margin-top: 16px;
 }
 
@@ -55,10 +49,15 @@
 }
 
 .deleteicon-style {
+  margin-top: 4px;
   margin-left: 8px;
   cursor: pointer;
 }
 
+.copyicon-style {
+  margin-top: 5px;
+}
+
 .copyicon-style {
   margin-left: 13px;
 }
@@ -106,7 +105,8 @@
 }
 
 .horizontal-line {
-  border: 1px solid var(--navi-color-gray-border);
+  margin-top: 24px;
+  border-top: 1px solid var(--navi-color-gray-border);
 }
 
 .description-participants {

src/Pages/Incidents/DescriptionContent/DescriptionContentProps.ts

@@ -46,4 +46,4 @@ export const reducer = (state, action) => {
   }
 };
 
-export const JIRA_VALIDATION = 'https://navihq.atlassian.net';
+export const JIRA_VALIDATION = 'https://navihq.atlassian.net/browse/';

src/Pages/Incidents/DescriptionContent/index.tsx

@@ -89,7 +89,7 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
   };
 
   const validateLink = (value: string): void => {
-    const urlPattern = /^https:\/\/navihq\.atlassian\.net\/.*/;
+    const urlPattern = /^https:\/\/navihq\.atlassian\.net\/browse\/.*/;
     const invalidChars = /,|\s/;
     if (value === '') {
       dispatch({ type: ActionType.SET_ERROR_TEXT, payload: '' });
@@ -117,14 +117,25 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
     validateLink(inputValue);
   };
 
+  const linkSanitization = link => {
+    const sanitizedLinkMatch = link.match(
+      /(https:\/\/navihq.atlassian.net\/browse\/[^/]+)/,
+    );
+    if (sanitizedLinkMatch && sanitizedLinkMatch[1]) {
+      return sanitizedLinkMatch[1];
+    }
+    return link;
+  };
+
   const handleInputKeyDown = (
     event: React.KeyboardEvent<HTMLInputElement>,
   ): void => {
     if (event.key === 'Enter') {
       if (!state.errorText && state.inputValue.startsWith(JIRA_VALIDATION)) {
+        const sanitizedLink = linkSanitization(state.inputValue);
         const payload = {
           incident_id: id,
-          jira_link: state.inputValue,
+          jira_link: sanitizedLink,
           user: storedEmail,
         };
         toast('Adding link. Please wait a moment.', {
@@ -165,9 +176,10 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
     removeJiraLink(payload);
   };
 
-  const truncateText = (text, maxLength): string => {
-    if (text.length > maxLength) {
-      return text.slice(0, maxLength) + '...';
+  const truncateText = (text): string => {
+    const jiraTicketMatch = text.match(/\/browse\/([^/]+)/);
+    if (jiraTicketMatch && jiraTicketMatch[1]) {
+      return jiraTicketMatch[1];
     }
     return text;
   };
@@ -214,6 +226,7 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
           </Typography>
         </div>
       </div>
+      <div className={styles['horizontal-line']} />
       <div className={styles['description-content-link']}>
         <Typography variant="h6" color="var(--navi-color-gray-c3)">
           LINKS
@@ -230,7 +243,7 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
             target="_blank"
             rel="noreferrer"
           >
-            <Typography variant="h6" color="var(--navi-color-blue-base)">
+            <Typography variant="h4" color="var(--navi-color-blue-base)">
               {incidentName || '-'}
             </Typography>
           </a>
@@ -293,21 +306,23 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
                           >
                             <Typography
                               variant="h4"
-                              className={styles['jira-link-hover']}
+                              color="var(--navi-color-blue-base)"
                             >
-                              {truncateText(jiraLink, 37)}
+                              {truncateText(jiraLink)}
                             </Typography>
                           </a>
                         </div>
-                        <div className={styles['horizontal-line']} />
                       </div>
                       &nbsp;&nbsp;
-                      <CopyIcon onClick={() => handleCopyClick(jiraLink)} />
+                      <div className={styles['copyicon-style']}>
+                        <CopyIcon onClick={() => handleCopyClick(jiraLink)} />
+                      </div>
                       <div className={styles['deleteicon-style']}>
                         <DeleteIconOutlined
                           onClick={() => handleDeleteIconClick(jiraLink)}
                           width={20}
                           height={20}
+                          color="var(--navi-color-gray-c3)"
                         />
                       </div>
                     </div>
@@ -336,7 +351,7 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
           </div>
         </div>
       </div>
-
+      <div className={styles['horizontal-line']} />
       <div className={styles['description-participants']}>
         <Typography variant="h6" color="var(--navi-color-gray-c3)">
           PARTICIPANTS

src/Pages/Incidents/Incidents.module.scss

@@ -12,6 +12,10 @@
   justify-content: space-between;
 }
 
+.audit-log {
+  padding-right: 20px;
+}
+
 .tab-content-wrapper {
   margin-top: 13px;
   margin-left: 24px;
@@ -24,7 +28,7 @@
 
 .log-update-dropdown {
   background: var(--blue-background-primary, #f5f9ff);
-  width: 950px;
+  width: 875px;
   height: 80px;
   border-radius: 8px;
   margin-top: 12px;