Merge branch 'dev' into sps_fix_hsts_issue

Author: salonishah11

.circleci/config.yml

@@ -211,7 +211,8 @@ jobs:
     executor: node
     resource_class: large
     steps:
-      - checkout
+      - checkout:
+          method: full
       - restore_cache:
           keys:
             - deps-{{ .Branch }}-{{ checksum ".pnp.cjs" }}

integration-tests/slack/slack-notify-channels.json

@@ -9,66 +9,6 @@
     {
       "name": "dsde-qa",
       "id": "C53JYBV9A"
-    },
-    {
-      "name": "dsp-analysis-non-prod-alerts",
-      "id": "C07RX0CJV0D",
-      "tests": [
-        {
-          "name": "run-analysis"
-        },
-        {
-          "name": "run-rstudio"
-        },
-        {
-          "name": "analysis-context-bar"
-        },
-        {
-          "name": "run-analysis-azure"
-        },
-        {
-          "name": "find-workflow"
-        },
-        {
-          "name": "import-dockstore-workflow"
-        },
-        {
-          "name": "run-workflow"
-        }
-      ]
-    },
-    {
-      "name": "dsp-tdr",
-      "id": "CD4HBRFMG",
-      "tests": [
-        {
-          "name": "preview-drs-uri"
-        }
-      ]
-    },
-    {
-      "name": "dsp-core-services-alerts",
-      "id": "C07Q8H7F8LV",
-      "tests": [
-        {
-          "name": "preview-drs-uri"
-        },
-        {
-          "name": "import-tdr-snapshot"
-        },
-        {
-          "name": "billing-projects"
-        },
-        {
-          "name": "delete-orphaned-workspaces"
-        },
-        {
-          "name": "register-user"
-        },
-        {
-          "name": "request-access"
-        }
-      ]
     }
   ]
 }

src/import-data/ImportDataOverview.ts

@@ -47,12 +47,25 @@ export interface ImportDataOverviewProps {
 export const ImportDataOverview = (props: ImportDataOverviewProps): ReactNode => {
   const { importRequest } = props;
 
+  const getDisplayUrl = (url: string) => url.replace(/^https?:\/\//, '').split('?')[0];
+
   return div({ style: styles.card }, [
     h2({ style: styles.title }, [getTitleForImportRequest(importRequest)]),
     'url' in importRequest &&
       h(Fragment, [
-        h3({ style: { fontSize: 16 } }, ['Dataset source:']),
-        div({ style: { marginTop: '1rem' } }, [`${importRequest.url.href.split('?')[0]}`]),
+        h3({ style: { fontSize: 16, marginBottom: 2 } }, ['Dataset source:']),
+        div(
+          {
+            style: {
+              fontSize: 13,
+              color: colors.dark(0.7),
+              marginBottom: 8,
+              marginTop: 0,
+            },
+          },
+          ['(For reference only — not a direct link)']
+        ),
+        div({ style: { marginTop: '1rem', marginBottom: '0.5rem' } }, [getDisplayUrl(importRequest.url.href)]),
       ]),
     h(ImportRequirements, { importRequest }),
   ]);

src/libs/ajax/teaspoons/Teaspoons.ts

@@ -12,6 +12,7 @@ import {
   StartPipelineResponse,
   UserPipelineQuotaDetails,
 } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { FilterValues } from 'src/pages/scientificServices/pipelines/tabs/history/controls/TableFilters';
 
 export const Teaspoons = (signal?: AbortSignal) => ({
   /* Lists all pipelines available to the user */
@@ -40,17 +41,25 @@ export const Teaspoons = (signal?: AbortSignal) => ({
     pageSize: number,
     pageNumber: number,
     sortProperty?: string,
-    sortDirection?: string
+    sortDirection?: string,
+    filters?: FilterValues
   ): Promise<GetPipelineRunsResponse> => {
+    const { status, description, jobId, pipelineName } = filters || {};
+
     const queryString = qs.stringify(
       {
         pageSize,
         pageNumber,
         ...(sortProperty ? { sortProperty } : {}),
         ...(sortDirection ? { sortDirection } : {}),
+        ...(status ? { status } : {}),
+        ...(description ? { description } : {}),
+        ...(jobId ? { jobId } : {}),
+        ...(pipelineName ? { pipelineName } : {}),
       },
       { addQueryPrefix: true }
     );
+
     const res = await fetchTeaspoons(`pipelineruns/v2/pipelineruns${queryString}`, _.merge(authOpts(), { signal }));
     return res.json();
   },

src/libs/ajax/teaspoons/teaspoons-models.ts

@@ -7,7 +7,7 @@ export interface Pipeline {
 
 export interface PipelineInput {
   name: string;
-  type: 'FILE' | 'STRING' | 'FLOAT';
+  type: 'FILE' | 'STRING' | 'FLOAT' | 'BOOLEAN';
   isRequired: boolean;
   displayName?: string;
   description?: string;
@@ -71,6 +71,7 @@ export interface PipelineRun {
 
 export interface GetPipelineRunsResponse {
   totalResults: number;
+  totalFilteredResults: number;
   pageToken: string;
   results: PipelineRun[];
 }

src/pages/scientificServices/NavPaths.tsx

@@ -1,7 +1,7 @@
 import { CliAuth } from 'src/pages/scientificServices/cli-auth/CliAuth';
-import { About } from 'src/pages/scientificServices/pipelines/views/About';
-import { JobHistory } from 'src/pages/scientificServices/pipelines/views/JobHistory';
-import { RunJob } from 'src/pages/scientificServices/pipelines/views/RunJob';
+import { About } from 'src/pages/scientificServices/pipelines/tabs/about/About';
+import { JobHistory } from 'src/pages/scientificServices/pipelines/tabs/history/JobHistory';
+import { RunJob } from 'src/pages/scientificServices/pipelines/tabs/run/RunJob';
 
 export const navPaths = [
   // For now, redirect /pipelines to the Imputation home page

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

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { DocsKey, ZendeskLink, zendeskUrl } from 'src/pages/scientificServices/pipelines/common/zendeskUtils';
+
+describe('zendeskUtils', () => {
+  describe('zendeskUrl', () => {
+    it('returns the correct URL for INPUT_REQ', () => {
+      expect(zendeskUrl(DocsKey.INPUT_REQ)).toBe(
+        'https://broadscientificservices.zendesk.com/hc/en-us/articles/40161675448859'
+      );
+    });
+
+    it('returns the default URL for an unknown DocsKey', () => {
+      // @ts-expect-error Testing invalid key
+      expect(zendeskUrl('UNKNOWN_KEY')).toBe(
+        'https://broadscientificservices.zendesk.com/hc/en-us/sections/39901025462171' // Getting Started URL
+      );
+    });
+  });
+
+  describe('ZendeskLink', () => {
+    it('renders correctly with given children and href', () => {
+      const { getByText } = render(
+        <ZendeskLink docsKey={DocsKey.QUOTA_DETAILS} additionalStyle={{ fontWeight: 'italics' }}>
+          Link to my excellent documentation
+        </ZendeskLink>
+      );
+
+      const linkElement = getByText('Link to my excellent documentation');
+      expect(linkElement).toBeInTheDocument();
+      expect(linkElement).toHaveAttribute(
+        'href',
+        'https://broadscientificservices.zendesk.com/hc/en-us/articles/39903092619035'
+      );
+      expect(linkElement).toHaveStyle('font-weight: italics');
+    });
+  });
+});

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

@@ -0,0 +1,45 @@
+// Enum representing different documentation keys
+import React from 'react';
+
+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;
+};
+
+// Renders a component with link to the specified Zendesk documentation page
+export const ZendeskLink = ({
+  docsKey,
+  additionalStyle,
+  children,
+}: {
+  docsKey: DocsKey;
+  additionalStyle?;
+  children: React.ReactNode;
+}) => {
+  return (
+    <a
+      href={zendeskUrl(docsKey)}
+      target='_blank'
+      style={{ color: '#46A3E9', textDecoration: 'underline', ...additionalStyle }}
+      rel='noreferrer'
+    >
+      {children}
+    </a>
+  );
+};

src/pages/scientificServices/pipelines/hooks/usePipelinesList.ts

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { Teaspoons } from 'src/libs/ajax/teaspoons/Teaspoons';
+import { Pipeline } from 'src/libs/ajax/teaspoons/teaspoons-models';
+import { notify } from 'src/libs/notifications';
+import { useCancellation } from 'src/libs/react-utils';
+
+export interface UsePipelinesListResult {
+  pipelines: Pipeline[];
+  isLoading: boolean;
+  error: Error | undefined;
+}
+
+export const usePipelinesList = (): UsePipelinesListResult => {
+  const signal = useCancellation();
+  const [pipelines, setPipelines] = useState<Pipeline[]>([]);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [error, setError] = useState<Error | undefined>(undefined);
+
+  const fetchPipelines = async () => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      const response = await Teaspoons(signal).getPipelines();
+      setPipelines(response.results);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to fetch pipelines');
+      setError(error);
+      notify('error', error.message);
+      setPipelines([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchPipelines();
+  }, [signal]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    pipelines,
+    isLoading,
+    error,
+  };
+};

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

@@ -0,0 +1,52 @@
+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, ZendeskLink } 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';
+
+export const About = () => {
+  const { isLoading, error, pipelines } = usePipelinesList();
+
+  return (
+    <FooterWrapper alwaysShow>
+      {pipelinesTopBar('about')}
+      <div style={{ marginLeft: '2rem', marginTop: '1rem' }}>
+        <h1>Scientific Services from the Broad Data Sciences Platform</h1>
+        <h2 style={{ marginTop: '2rem' }}>Pipelines</h2>
+
+        {isLoading && <Spinner />}
+
+        {error && <div style={{ color: 'red' }}>{error.message}</div>}
+
+        {pipelines?.map((pipeline) => (
+          <div key={pipeline.pipelineName}>
+            <h3>
+              <AoUStylizedString text={pipeline.displayName} />
+            </h3>
+            <div style={{ width: '50%' }}>
+              {pipeline.description ? (
+                <AoUStylizedString text={pipeline.description} />
+              ) : (
+                <em>No description available</em>
+              )}
+            </div>
+          </div>
+        ))}
+
+        <h2 style={{ marginTop: '2rem' }}>User Documentation</h2>
+        <div style={{ marginTop: '1rem' }}>
+          <ZendeskLink docsKey={DocsKey.GETTING_STARTED} additionalStyle={{ fontWeight: 'bold' }}>
+            Get Started
+          </ZendeskLink>
+        </div>
+        <div style={{ marginTop: '1rem' }}>
+          <ZendeskLink docsKey={DocsKey.ABOUT_SERVICE} additionalStyle={{ fontWeight: 'bold' }}>
+            About this Service
+          </ZendeskLink>
+        </div>
+      </div>
+    </FooterWrapper>
+  );
+};