varnitgoyal95/houston-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

TP-49977 | rca row added

Browse Source
This commit is contained in:
AyushRanjan
2023-12-04 15:12:27 +05:30
parent 86c29600e9
commit 2cb51d5cc0
4 changed files with 100 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Pages/Incidents/DescriptionContent/DescriptionContent.module.scss
View File

@@ -16,6 +16,20 @@
margin-top: 12px;
}
.description-content-rca {
display: flex;
align-items: center;
margin-top: 12px;
}
.rca-text {
display: flex;
align-items: center;
gap: 4px;
margin-left: 44px;
text-decoration: none;
}
.description-content-jira {
display: flex;
justify-content: flex-start;

22
src/Pages/Incidents/DescriptionContent/index.tsx
View File

@@ -16,6 +16,8 @@ import LinkIcon from '@src/assets/LinkIcon';
import JiraLogo from '@src/assets/JiraLogo';
import CopyIcon from '@src/assets/CopyIcon';
import LoadingIcon from '@src/assets/LoadingIcon';
import ConfluenceIcon from '@src/assets/ConfluenceIcon';
import GoToLinkIcon from '@src/assets/GoToLinkIcon';
import { ApiService } from '@src/services/api';
import { handleCopyClick } from '@src/services/globalUtils';
import DescriptionContentProps from './DescriptionContentProps';
@@ -248,7 +250,25 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
</Typography>
</a>
</div>
<div className={styles['description-content-rca']}>
<ConfluenceIcon />
&nbsp;
<Typography variant="h4" color="var(--navi-color-gray-c2)">
RCA link
</Typography>
&nbsp;
<a
href={`https://go-navi.slack.com/archives/${slackChannel}`}
target="_blank"
rel="noreferrer"
className={styles['rca-text']}
>
<GoToLinkIcon color="#0276FE" />
<Typography variant="h4" color="var(--navi-color-blue-base)">
Go to document
</Typography>
</a>
</div>
<div className={styles['description-content-jira']}>
<div className={styles['flex-row']}>
<JiraLogo />

54
src/assets/ConfluenceIcon.tsx Normal file
View File

@@ -0,0 +1,54 @@
import { FC } from 'react';
import { IconProps } from './types';
const ConfluenceIcon: FC<IconProps> = ({
width = '16',
height = '16',
...restProps
}) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M1.50727 11.5437C1.36277 11.7797 1.20027 12.0537 1.06177 12.2717C1.00251 12.3722 0.985023 12.492 1.01307 12.6053C1.04111 12.7186 1.11245 12.8164 1.21177 12.8777L4.10777 14.6597C4.15753 14.6904 4.21286 14.7111 4.27062 14.7205C4.32837 14.7299 4.3874 14.7278 4.44434 14.7143C4.50128 14.7008 4.555 14.6763 4.60243 14.642C4.64987 14.6078 4.69008 14.5645 4.72077 14.5147L4.72477 14.5082C4.84027 14.3147 4.98977 14.0627 5.15227 13.7932C6.29927 11.8997 7.45227 12.1317 9.53377 13.1252L12.4053 14.4907C12.4582 14.5159 12.5155 14.5304 12.574 14.5334C12.6325 14.5364 12.691 14.5279 12.7462 14.5083C12.8014 14.4887 12.8522 14.4584 12.8957 14.4192C12.9392 14.38 12.9746 14.3326 12.9998 14.2797L13.0053 14.2677L14.3828 11.1502C14.4296 11.0432 14.4325 10.922 14.3909 10.8129C14.3493 10.7038 14.2664 10.6153 14.1603 10.5667C13.5543 10.2817 12.3493 9.71317 11.2643 9.18967C7.36177 7.29317 4.04477 7.41567 1.50727 11.5437Z"
fill="url(#paint0_linear_2919_19154)"
/>
<path
d="M14.4922 4.46598C14.6367 4.22998 14.7991 3.95598 14.9376 3.73798C14.9969 3.63743 15.0144 3.51766 14.9864 3.40436C14.9583 3.29107 14.887 3.19328 14.7877 3.13198L11.8921 1.34998C11.8437 1.31729 11.7892 1.29447 11.7319 1.28283C11.6746 1.27119 11.6156 1.27096 11.5582 1.28215C11.5008 1.29334 11.4462 1.31574 11.3974 1.34805C11.3487 1.38037 11.3068 1.42197 11.2741 1.47048C11.2682 1.47902 11.2627 1.48786 11.2577 1.49698C11.1417 1.69048 10.9927 1.94248 10.8296 2.21198C9.68265 4.10548 8.52965 3.87348 6.44815 2.87998L3.58565 1.52148C3.53286 1.4963 3.47563 1.48176 3.41723 1.47871C3.35882 1.47566 3.30039 1.48415 3.24526 1.50371C3.19014 1.52326 3.13942 1.55348 3.09598 1.59265C3.05255 1.63182 3.01727 1.67917 2.99215 1.73198L2.98665 1.74398L1.60765 4.86298C1.56084 4.96999 1.55793 5.09111 1.59955 5.20024C1.64116 5.30938 1.72398 5.39781 1.83015 5.44648C2.43615 5.73148 3.64115 6.29948 4.72615 6.82298C8.63765 8.71648 11.9547 8.58948 14.4922 4.46598Z"
fill="url(#paint1_linear_2919_19154)"
/>
<defs>
<linearGradient
id="paint0_linear_2919_19154"
x1="14.3033"
y1="15.5827"
x2="5.54227"
y2="10.5482"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.18" stopColor="#0052CC" />
<stop offset="1" stopColor="#2684FF" />
</linearGradient>
<linearGradient
id="paint1_linear_2919_19154"
x1="1.69365"
y1="0.428483"
x2="10.4571"
y2="5.46498"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.18" stopColor="#0052CC" />
<stop offset="1" stopColor="#2684FF" />
</linearGradient>
</defs>
</svg>
);
};
export default ConfluenceIcon;

33
src/assets/GoToLinkIcon.tsx
View File

@@ -10,31 +10,20 @@ const GoToLinkIcon: FC<IconProps> = ({
}) => {
return (
<svg
width="20"
height="20"
width="16"
height="16"
viewBox="0 0 20 20"
fill={color}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...restProps}
>
<g id="Icon">
<mask
id="mask0_1843_6590"
maskUnits="userSpaceOnUse"
x="0"
y="0"
width="20"
height="20"
>
<rect id="Bounding box" width="20" height="20" fill={color} />
</mask>
<g mask="url(#mask0_1843_6590)">
<path
id="open_in_new"
d="M4.16667 17.5C3.70833 17.5 3.31583 17.3369 2.98917 17.0108C2.66306 16.6842 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66306 3.31583 2.98917 2.98917C3.31583 2.66306 3.70833 2.5 4.16667 2.5H9.16667C9.40278 2.5 9.60083 2.57972 9.76083 2.73917C9.92028 2.89917 10 3.09722 10 3.33333C10 3.56944 9.92028 3.76722 9.76083 3.92667C9.60083 4.08667 9.40278 4.16667 9.16667 4.16667H4.16667V15.8333H15.8333V10.8333C15.8333 10.5972 15.9133 10.3992 16.0733 10.2392C16.2328 10.0797 16.4306 10 16.6667 10C16.9028 10 17.1006 10.0797 17.26 10.2392C17.42 10.3992 17.5 10.5972 17.5 10.8333V15.8333C17.5 16.2917 17.3369 16.6842 17.0108 17.0108C16.6842 17.3369 16.2917 17.5 15.8333 17.5H4.16667ZM7.5 12.5C7.34722 12.3472 7.27083 12.1528 7.27083 11.9167C7.27083 11.6806 7.34722 11.4861 7.5 11.3333L14.6667 4.16667H12.5C12.2639 4.16667 12.0661 4.08667 11.9067 3.92667C11.7467 3.76722 11.6667 3.56944 11.6667 3.33333C11.6667 3.09722 11.7467 2.89917 11.9067 2.73917C12.0661 2.57972 12.2639 2.5 12.5 2.5H16.6667C16.9028 2.5 17.1006 2.57972 17.26 2.73917C17.42 2.89917 17.5 3.09722 17.5 3.33333V7.5C17.5 7.73611 17.42 7.93389 17.26 8.09333C17.1006 8.25333 16.9028 8.33333 16.6667 8.33333C16.4306 8.33333 16.2328 8.25333 16.0733 8.09333C15.9133 7.93389 15.8333 7.73611 15.8333 7.5V5.33333L8.64583 12.5208C8.49306 12.6736 8.30556 12.75 8.08333 12.75C7.86111 12.75 7.66667 12.6667 7.5 12.5Z"
fill={color}
/>
</g>
<g id="Open in new tab">
<path
id="Icon"
fillRule="evenodd"
clipRule="evenodd"
d="M15 15.8333H5C4.54167 15.8333 4.16667 15.4583 4.16667 15V5C4.16667 4.54167 4.54167 4.16667 5 4.16667H9.16667C9.625 4.16667 10 3.79167 10 3.33333C10 2.875 9.625 2.5 9.16667 2.5H4.16667C3.24167 2.5 2.5 3.25 2.5 4.16667V15.8333C2.5 16.75 3.25 17.5 4.16667 17.5H15.8333C16.75 17.5 17.5 16.75 17.5 15.8333V10.8333C17.5 10.375 17.125 10 16.6667 10C16.2083 10 15.8333 10.375 15.8333 10.8333V15C15.8333 15.4583 15.4583 15.8333 15 15.8333ZM11.6667 3.33333C11.6667 3.79167 12.0417 4.16667 12.5 4.16667H14.6583L7.05 11.775C6.725 12.1 6.725 12.625 7.05 12.95C7.375 13.275 7.9 13.275 8.225 12.95L15.8333 5.34167V7.5C15.8333 7.95833 16.2083 8.33333 16.6667 8.33333C17.125 8.33333 17.5 7.95833 17.5 7.5V3.33333C17.5 2.875 17.125 2.5 16.6667 2.5H12.5C12.0417 2.5 11.6667 2.875 11.6667 3.33333Z"
fill={color}
/>
</g>
</svg>
);