wip - add new zendeskUtils

Author: salonishah11

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

@@ -0,0 +1,21 @@
+// Enum representing different documentation keys
+export enum DocsKey {
+  GETTING_STARTED = 'GETTING_STARTED',
+  ABOUT_SERVICE = 'ABOUT_SERVICE',
+  INPUT_REQ = 'INPUT_REQ',
+  QUOTA_DETAILS = 'QUOTA_DETAILS',
+}
+
+// Mapping of documentation keys to their respective Zendesk URLs
+const ZENDESK_PAGES: Record<DocsKey, string> = {
+  GETTING_STARTED: 'https://broadscientificservices.zendesk.com/hc/en-us/sections/39901025462171',
+  ABOUT_SERVICE: 'https://broadscientificservices.zendesk.com/hc/en-us/articles/39901941351323',
+  INPUT_REQ: 'https://broadscientificservices.zendesk.com/hc/en-us/articles/40161675448859',
+  QUOTA_DETAILS: 'https://broadscientificservices.zendesk.com/hc/en-us/articles/39903092619035',
+};
+
+// Retrieve the Zendesk URL based on the provided documentation key
+export const zendeskUrl = (key: DocsKey): string => {
+  // typescript should make sure all keys are valid, but just in case, default to the home page
+  return ZENDESK_PAGES[key] ?? ZENDESK_PAGES.GETTING_STARTED;
+};

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

@@ -2,6 +2,7 @@ import { Spinner } from '@terra-ui-packages/components';
 import React from 'react';
 import FooterWrapper from 'src/components/FooterWrapper';
 import { pipelinesTopBar } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
+import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
 import { usePipelinesList } from 'src/pages/scientificServices/pipelines/hooks/usePipelinesList';
 import { AoUStylizedString } from 'src/pages/scientificServices/pipelines/utils/AoUStylizedString';
 
@@ -37,7 +38,7 @@ export const About = () => {
         <h2 style={{ marginTop: '2rem' }}>User Documentation</h2>
         <div style={{ marginTop: '1rem' }}>
           <a
-            href='https://broadscientificservices.zendesk.com/hc/en-us/sections/39901025462171'
+            href={zendeskUrl(DocsKey.GETTING_STARTED)}
             target='_blank'
             style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
             rel='noreferrer'
@@ -48,7 +49,7 @@ export const About = () => {
         <div style={{ marginTop: '1rem' }}>
           <a
             target='_blank'
-            href='https://broadscientificservices.zendesk.com/hc/en-us/articles/39901941351323'
+            href={zendeskUrl(DocsKey.ABOUT_SERVICE)}
             style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
             rel='noreferrer'
           >

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

@@ -6,6 +6,7 @@ import colors from 'src/libs/colors';
 import { notify } from 'src/libs/notifications';
 import { formatBytes } from 'src/libs/utils';
 import { TEASPOONS_MAX_FILE_UPLOAD_SIZE_BYTES } from 'src/pages/scientificServices/pipelines/common/teaspoons-service-constants';
+import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
 import {
   resumeUpload,
   uploadTimeRemainingDisplayText,
@@ -61,7 +62,7 @@ export const PipelineFileInput: React.FC<PipelineInputSelectorProps> = ({
           <div style={{ marginTop: '0.5rem' }}>
             <Icon icon='info-circle' size={16} style={{ color: colors.primary(), verticalAlign: 'middle' }} />{' '}
             <a
-              href='https://broadscientificservices.zendesk.com/hc/en-us/articles/40161675448859'
+              href={zendeskUrl(DocsKey.INPUT_REQ)}
               target='_blank'
               style={{ color: '#46A3E9', textDecoration: 'underline' }}
               rel='noreferrer'

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
 
 import { PipelineWidgetContainer } from './PipelineWidgetContainer';
 
@@ -15,7 +16,7 @@ export const PIPELINE_TIPS: Record<string, { id: string; content: ReactNode }[]>
         <>
           View{' '}
           <a
-            href='https://broadscientificservices.zendesk.com/hc/en-us/articles/40161675448859'
+            href={zendeskUrl(DocsKey.INPUT_REQ)}
             target='_blank'
             style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}
             rel='noreferrer'

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

@@ -3,6 +3,7 @@ import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
 import colors from 'src/libs/colors';
 import { cond, DEFAULT } from 'src/libs/utils';
 import { SCIENTIFIC_SERVICES_SUPPORT_EMAIL } from 'src/pages/scientificServices/pipelines/common/scientific-services-common';
+import { DocsKey, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
 import { useUserQuota } from 'src/pages/scientificServices/pipelines/hooks/useUserQuota';
 
 import { PipelineWidgetContainer } from './PipelineWidgetContainer';
@@ -82,7 +83,7 @@ export const QuotaDetailsWidget = ({ selectedPipeline }: { selectedPipeline?: Pi
       </div>
       <div style={{ marginTop: '1rem' }}>
         <a
-          href='https://broadscientificservices.zendesk.com/hc/en-us/articles/39903092619035'
+          href={zendeskUrl(DocsKey.QUOTA_DETAILS)}
           target='_blank'
           rel='noreferrer'
           style={{ color: '#46A3E9', textDecoration: 'underline', fontWeight: 'bold' }}