Release/v5.1.0 (#356)

* feat-311-disease-card (#354)

* feat: add tentative disease overview card

* feat: add Strapi data to disease overview card

* feat: restyle disease overview card

* feat: improve queries to fetch disese data

* chore: remove unneeded code

* feat: add disease overview counts

* chore: rename resource catalog card component

* chore: create base compact card component

* fix: handle landing page searches successfully

* chore: remove unneeded code

* chore: remove unneeded code

* chore: improve code organization

* fix: add removed comment

* chore: simplify Markdown handling

* feat: change tab and accordion titles

* chore: separate API and Strapi resources

* chore: improve controller code readability

* chore: move compact card components to new directory

* chore: create compact card compound components

* fix: tab style repetition

* fix: disease type banner

* refactor: remove disease types in resource formatting helpers

* chore: simplify compact card title rendering logic

* fix: handle undefined type in the formatting function

* chore: update counts handling

* chore: remove AllResource type

* fix: remove extra accordion

* feat: standardize Other Resources

---------

Co-authored-by: candicecz <[email protected]>

* feat(features): add features content

* chore(deps): upgrade tar-fs to 3.1.1 to fix security issue

---------

Co-authored-by: candicecz <[email protected]>

Author: leandrocollares

configs/site.config.json

@@ -199,8 +199,7 @@
       "nav": {
         "label": "Features",
         "description": "Featured content for the portal."
-      },
-      "env": ["development", "staging"]
+      }
     },
     "/ontology-browser": {
       "seo": {

package.json

@@ -115,7 +115,7 @@
     "nanoid": "^3.3.8",
     "path-to-regexp": "^6.3.0",
     "semver": "^7.5.2",
-    "tar-fs": "^3.0.9",
+    "tar-fs": "^3.1.1",
     "tough-cookie": "^4.1.3",
     "tmp": "0.2.4",
     "ws": "^8.17.1",

src/components/advanced-search/components/Search/components/SearchInput/index.tsx

@@ -11,7 +11,7 @@ import { QueryValue } from 'src/components/advanced-search/types';
 import { SearchInputProps } from './types';
 import {
   APIResourceType,
-  formatResourceTypeForDisplay,
+  formatAPIResourceTypeForDisplay,
 } from 'src/utils/formatting/formatResourceType';
 
 export const SearchInput: React.FC<SearchInputProps> = ({
@@ -134,7 +134,7 @@ export const SearchInput: React.FC<SearchInputProps> = ({
             // [@type] needs to be formatted to the terms we use in the UI.
             if (selectedFieldDetails.property === '@type') {
               const type = value as APIResourceType;
-              return { label: formatResourceTypeForDisplay(type), value };
+              return { label: formatAPIResourceTypeForDisplay(type), value };
             }
             return { label: value, value };
           })}

src/components/resource-sections/components/banner/index.tsx

@@ -5,6 +5,7 @@ import TypeBanner from '../type-banner';
 import { FormattedResource } from 'src/utils/api/types';
 import { isSourceFundedByNiaid } from 'src/utils/helpers/sources';
 import { operatingSystemIcons } from 'src/utils/helpers/operating-system-icons';
+import { formatAPIResourceTypeForDisplay } from 'src/utils/formatting/formatResourceType';
 
 interface DateTagProps extends FlexProps {
   type?: string;
@@ -68,6 +69,7 @@ const ResourceBanner: React.FC<ResourceBannerProps> = ({ data }) => {
 
   return (
     <TypeBanner
+      label={formatAPIResourceTypeForDisplay(type)}
       type={type}
       bg='status.info_lt'
       isNiaidFunded={isSourceFundedByNiaid(data.includedInDataCatalog)}

src/components/resource-sections/components/type-banner/index.tsx

@@ -3,18 +3,19 @@ import { Flex, FlexProps, Icon, Text } from '@chakra-ui/react';
 import { FaRegClock } from 'react-icons/fa6';
 import { FormattedResource } from 'src/utils/api/types';
 import { StyledLabel } from './styles';
-import { formatResourceTypeForDisplay } from 'src/utils/formatting/formatResourceType';
+import { APIResourceType } from 'src/utils/formatting/formatResourceType';
 import Tooltip from 'src/components/tooltip';
 import SCHEMA_DEFINITIONS from 'configs/schema-definitions.json';
 
-interface TypeBannerProps extends FlexProps {
-  type?: FormattedResource['@type'];
+export interface TypeBannerProps extends FlexProps {
+  label: string;
+  type?: APIResourceType | 'Disease';
   date?: FormattedResource['date'];
   sourceName?: string[] | null;
   isNiaidFunded?: boolean;
 }
 
-export const getTypeColor = (type?: FormattedResource['@type']) => {
+export const getTypeColor = (type?: APIResourceType | string) => {
   const typeLower = type?.toLowerCase();
   let lt = 'status.info';
   let dk = 'niaid.500';
@@ -27,13 +28,17 @@ export const getTypeColor = (type?: FormattedResource['@type']) => {
     dk = 'primary.700';
   } else if (typeLower?.includes('tool') || typeLower?.includes('software')) {
     lt = 'primary.800';
+  } else if (typeLower === 'disease') {
+    lt = 'purple.600';
+    dk = 'purple.800';
   } else {
     lt = 'niaid.500';
   }
   return { lt, dk };
 };
 
 const TypeBanner: React.FC<TypeBannerProps> = ({
+  label,
   type,
   date,
   children,
@@ -84,7 +89,7 @@ const TypeBanner: React.FC<TypeBannerProps> = ({
               whiteSpace='nowrap'
               textTransform='uppercase'
             >
-              {type ? formatResourceTypeForDisplay(type) : 'Unknown'}
+              {label || 'Unknown'}
             </Text>
           </Tooltip>
         </StyledLabel>

src/pages/features/[[...slug]].tsx

@@ -1,6 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import type { GetStaticProps, NextPage } from 'next';
-import { useRouter } from 'next/router';
 import { Flex, Skeleton, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { Error } from 'src/components/error';
@@ -48,14 +47,6 @@ const FeaturedPage: NextPage<{
     refetchOnMount: true,
   });
 
-  // If the app is in production, redirect to a 404 page until search is fully implemented and approved.
-  const router = useRouter();
-  useEffect(() => {
-    if (process.env.NEXT_PUBLIC_APP_ENV === 'production') {
-      router.replace('/404');
-    }
-  }, [router]);
-
   const pageTitle = data?.title || 'Features';
   return (
     <PageContainer

src/utils/formatting/formatResourceType.ts

@@ -2,9 +2,6 @@ export type APIResourceType =
   | 'Dataset'
   | 'ResourceCatalog'
   | 'ComputationalTool';
-// | 'Software'
-// | 'ScholarlyArticle'
-// | 'Other';
 
 export type CollectionType =
   | 'Knowledge Base'
@@ -34,10 +31,14 @@ export type DisplayResourceType =
   | 'Scholarly Article'
   | 'Other';
 
-// Format the resource type for display.
-export const formatResourceTypeForDisplay = (
-  str: APIResourceType,
+// Format API resource types for display
+export const formatAPIResourceTypeForDisplay = (
+  str: APIResourceType | undefined,
 ): DisplayResourceType => {
+  if (!str) {
+    return 'Other';
+  }
+
   if (str.toLowerCase() === 'dataset') {
     return 'Dataset';
   } else if (str.toLowerCase() === 'resourcecatalog') {
@@ -49,7 +50,7 @@ export const formatResourceTypeForDisplay = (
   }
 };
 
-// Format the dataset type(if changed for display) to the @type accepted in the API.
+// Format the dataset type (if changed for display) to the @type accepted in the API
 export const formatResourceTypeForAPI = (
   str: string,
 ): APIResourceType | string => {
@@ -69,3 +70,8 @@ export const formatResourceTypeForAPI = (
     return str;
   }
 };
+
+// Type guard to check if a type is an API resource type
+export const isAPIResourceType = (type: string): type is APIResourceType => {
+  return ['Dataset', 'ResourceCatalog', 'ComputationalTool'].includes(type);
+};

src/views/diseases/disease/components/data-types.tsx

@@ -7,7 +7,7 @@ import { fetchSearchResults } from 'src/utils/api';
 import { FacetTerm, FetchSearchResultsResponse } from 'src/utils/api/types';
 import {
   APIResourceType,
-  formatResourceTypeForDisplay,
+  formatAPIResourceTypeForDisplay,
 } from 'src/utils/formatting/formatResourceType';
 import {
   getFillColor,
@@ -114,7 +114,7 @@ export const DataTypes = ({ query, topic }: TopicQueryProps) => {
                 labelStyles={{
                   fill: '#2f2f2f',
                   transformLabel: term =>
-                    formatResourceTypeForDisplay(term as APIResourceType),
+                    formatAPIResourceTypeForDisplay(term as APIResourceType),
                 }}
                 getRoute={term => {
                   return getSearchResultsRoute({
@@ -144,7 +144,7 @@ export const DataTypes = ({ query, topic }: TopicQueryProps) => {
                 })
                 .map(({ term, count }) => {
                   if (!term) return null; // Skip if term is undefined
-                  const label = formatResourceTypeForDisplay(
+                  const label = formatAPIResourceTypeForDisplay(
                     term as APIResourceType,
                   );
                   return (
@@ -171,7 +171,11 @@ export const DataTypes = ({ query, topic }: TopicQueryProps) => {
                         })}
                         passHref
                       >
-                        <Link as='p'>{label}</Link>
+                        <Link as='p'>
+                          {formatAPIResourceTypeForDisplay(
+                            term as APIResourceType,
+                          )}
+                        </Link>
                       </NextLink>
                     </LegendItem>
                   );

src/views/features/helpers.ts

@@ -7,10 +7,7 @@ export const fetchFeaturedContent = async (
 ): Promise<FeaturedPageProps | null> => {
   try {
     const isProd = process.env.NEXT_PUBLIC_APP_ENV === 'production';
-    // In production, we do not features. Remove when approved.
-    if (isProd) {
-      return null;
-    }
+
     const featured = await axios.get(
       `${
         process.env.NEXT_PUBLIC_STRAPI_API_URL
@@ -34,10 +31,6 @@ export const fetchFeaturedContent = async (
 export const fetchAllFeaturedPages = async (params?: FeaturedQueryParams) => {
   try {
     const isProd = process.env.NEXT_PUBLIC_APP_ENV === 'production';
-    // In production, we do not features. Remove when approved.
-    if (isProd) {
-      return [];
-    }
 
     const featuredPages = await axios.get<{ data: FeaturedPageProps[] }>(
       `${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/features`,

src/views/search-results-page-archived/components/card/index.tsx

@@ -31,6 +31,7 @@ import { filterWords } from './helpers';
 import { SchemaDefinitions } from 'scripts/generate-schema-definitions/types';
 import SCHEMA_DEFINITIONS from 'configs/schema-definitions.json';
 import { InfoLabel } from 'src/components/info-label';
+import { formatAPIResourceTypeForDisplay } from 'src/utils/formatting/formatResourceType';
 
 interface SearchResultCardProps {
   isLoading?: boolean;
@@ -85,6 +86,7 @@ const SearchResultCard: React.FC<SearchResultCardProps> = ({
     // {/* Banner with resource type + date of publication */}
     <Card ref={cardRef} variant='niaid' my={4} mb={8}>
       <TypeBanner
+        label={formatAPIResourceTypeForDisplay(type || 'Dataset')}
         type={type || 'Dataset'}
         p={0}
         pl={[2, 4, 6]}