Skip to content

Commit b28ec68

Browse files
salonishah11salonishah11
committed
DRY and tests
1 parent fb9b3d6 commit b28ec68

File tree

6 files changed

+57
-41
lines changed

6 files changed

+57
-41
lines changed

‎src/pages/scientificServices/pipelines/common/zendeskUtils.test.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
1+
import { render } from '@testing-library/react';
2+
import React from 'react';
3+
import { DocsKey, ZendeskLink, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
24

35
describe('zendeskUtils', () => {
46
describe('zendeskUrl', () => {
@@ -16,3 +18,21 @@ describe('zendeskUtils', () => {
1618
});
1719
});
1820
});
21+
22+
describe('ZendeskLink', () => {
23+
it('renders correctly with given children and href', () => {
24+
const { getByText } = render(
25+
<ZendeskLink dockKey={DocsKey.QUOTA_DETAILS} additionalStyle={{ fontWeight: 'bold' }}>
26+
Link to my excellent documentation
27+
</ZendeskLink>
28+
);
29+
30+
const linkElement = getByText('Link to my excellent documentation');
31+
expect(linkElement).toBeInTheDocument();
32+
expect(linkElement).toHaveAttribute(
33+
'href',
34+
'https://broadscientificservices.zendesk.com/hc/en-us/articles/39903092619035'
35+
);
36+
expect(linkElement).toHaveStyle('font-weight: bold');
37+
});
38+
});

‎src/pages/scientificServices/pipelines/common/zendeskUtils.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// Enum representing different documentation keys
2+
import React from 'react';
3+
24
export enum DocsKey {
35
GETTING_STARTED = 'GETTING_STARTED',
46
ABOUT_SERVICE = 'ABOUT_SERVICE',
@@ -19,3 +21,24 @@ export const zendeskUrl = (key: DocsKey): string => {
1921
// typescript should make sure all keys are valid, but just in case, default to the home page
2022
return ZENDESK_PAGES[key] ?? ZENDESK_PAGES.GETTING_STARTED;
2123
};
24+
25+
export const ZendeskLink = ({
26+
dockKey,
27+
additionalStyle,
28+
children,
29+
}: {
30+
dockKey: DocsKey;
31+
additionalStyle?;
32+
children: React.ReactNode;
33+
}) => {
34+
return (
35+
<a
36+
href={zendeskUrl(dockKey)}
37+
target='_blank'
38+
style={{ color: '#46A3E9', textDecoration: 'underline', ...additionalStyle }}
39+
rel='noreferrer'
40+
>
41+
{children}
42+
</a>
43+
);
44+
};

‎src/pages/scientificServices/pipelines/tabs/about/About.tsx‎

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Spinner } from '@terra-ui-packages/components';
22
import React from 'react';
33
import FooterWrapper from 'src/components/FooterWrapper';
44
import { pipelinesTopBar } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
5-
import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
5+
import { DocsKey, ZendeskLink } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
66
import { usePipelinesList } from 'src/pages/scientificServices/pipelines/hooks/usePipelinesList';
77
import { AoUStylizedString } from 'src/pages/scientificServices/pipelines/utils/AoUStylizedString';
88

@@ -37,24 +37,14 @@ export const About = () => {
3737

3838
<h2 style={{ marginTop: '2rem' }}>User Documentation</h2>
3939
<div style={{ marginTop: '1rem' }}>
40-
<a
41-
href={zendeskUrl(DocsKey.GETTING_STARTED)}
42-
target='_blank'
43-
style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
44-
rel='noreferrer'
45-
>
40+
<ZendeskLink dockKey={DocsKey.GETTING_STARTED} additionalStyle={{ fontWeight: 'bold' }}>
4641
Get Started
47-
</a>
42+
</ZendeskLink>
4843
</div>
4944
<div style={{ marginTop: '1rem' }}>
50-
<a
51-
target='_blank'
52-
href={zendeskUrl(DocsKey.ABOUT_SERVICE)}
53-
style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
54-
rel='noreferrer'
55-
>
45+
<ZendeskLink dockKey={DocsKey.ABOUT_SERVICE} additionalStyle={{ fontWeight: 'bold' }}>
5646
About this Service
57-
</a>
47+
</ZendeskLink>
5848
</div>
5949
</div>
6050
</FooterWrapper>

‎src/pages/scientificServices/pipelines/tabs/run/inputs/PipelineFileInput.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import colors from 'src/libs/colors';
66
import { notify } from 'src/libs/notifications';
77
import { formatBytes } from 'src/libs/utils';
88
import { TEASPOONS_MAX_FILE_UPLOAD_SIZE_BYTES } from 'src/pages/scientificServices/pipelines/common/teaspoons-service-constants';
9-
import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
9+
import { DocsKey, ZendeskLink } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
1010
import {
1111
resumeUpload,
1212
uploadTimeRemainingDisplayText,
@@ -61,14 +61,7 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
6161
</span>
6262
<div style={{ marginTop: '0.5rem' }}>
6363
<Icon icon='info-circle' size={16} style={{ color: colors.primary(), verticalAlign: 'middle' }} />{' '}
64-
<a
65-
href={zendeskUrl(DocsKey.INPUT_REQ)}
66-
target='_blank'
67-
style={{ color: '#46A3E9', textDecoration: 'underline' }}
68-
rel='noreferrer'
69-
>
70-
Learn more about how to reduce your file size.
71-
</a>
64+
<ZendeskLink dockKey={DocsKey.INPUT_REQ}>Learn more about how to reduce your file size.</ZendeskLink>
7265
</div>
7366
</>
7467
);

‎src/pages/scientificServices/pipelines/tabs/run/widgets/HelpfulTipsWidget.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { ReactNode } from 'react';
22
import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
3-
import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
3+
import { DocsKey, ZendeskLink } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
44

55
import { PipelineWidgetContainer } from './PipelineWidgetContainer';
66

@@ -15,14 +15,9 @@ export const PIPELINE_TIPS: Record<string, { id: string; content: ReactNode }[]>
1515
content: (
1616
<>
1717
View{' '}
18-
<a
19-
href={zendeskUrl(DocsKey.INPUT_REQ)}
20-
target='_blank'
21-
style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
22-
rel='noreferrer'
23-
>
18+
<ZendeskLink dockKey={DocsKey.INPUT_REQ} additionalStyle={{ fontWeight: 'bold' }}>
2419
formatting guidelines
25-
</a>{' '}
20+
</ZendeskLink>{' '}
2621
for input VCF files
2722
</>
2823
),

‎src/pages/scientificServices/pipelines/tabs/run/widgets/QuotaDetailsWidget.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
33
import colors from 'src/libs/colors';
44
import { cond, DEFAULT } from 'src/libs/utils';
55
import { SCIENTIFIC_SERVICES_SUPPORT_EMAIL } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
6-
import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
6+
import { DocsKey, ZendeskLink } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
77
import { useUserQuota } from 'src/pages/scientificServices/pipelines/hooks/useUserQuota';
88

99
import { PipelineWidgetContainer } from './PipelineWidgetContainer';
@@ -82,14 +82,9 @@ export const QuotaDetailsWidget = ({ selectedPipeline }: { selectedPipeline?: Pi
8282
&nbsp;for quota.
8383
</div>
8484
<div style={{ marginTop: '1rem' }}>
85-
<a
86-
href={zendeskUrl(DocsKey.QUOTA_DETAILS)}
87-
target='_blank'
88-
rel='noreferrer'
89-
style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
90-
>
85+
<ZendeskLink dockKey={DocsKey.QUOTA_DETAILS} additionalStyle={{ fontWeight: 'bold' }}>
9186
Get help
92-
</a>
87+
</ZendeskLink>
9388
&nbsp;with quota.
9489
</div>
9590
</PipelineWidgetContainer>

0 commit comments

Comments
 (0)