Merge branch 'main' into 360-fix-e2e-specs

notch8 · Feb 6, 2024 · 5c01246 · 5c01246
2 parents 5dceb17 + 4f1f813
commit 5c01246
Show file tree

Hide file tree

Showing 6 changed files with 777 additions and 23 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,3 +23,5 @@ node_modules/
 cypress/results
 cypress/screenshots
 cypress/videos
+
+.DS_Store
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "@rjsf/core": "^5.0.0-beta.17",
     "@rjsf/utils": "^5.0.0-beta.17",
     "@rjsf/validator-ajv8": "^5.0.1",
-    "@scientist-softserv/webstore-component-library": "^0.1.19",
+    "@scientist-softserv/webstore-component-library": "^0.1.21",
     "@sentry/nextjs": "^7.42.0",
     "axios": "^1.1.3",
     "bootstrap": "^5.2.3",
@@ -33,6 +33,8 @@
     "next-auth": "^4.20.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-markdown": "^9.0.1",
+    "rehype-raw": "^7.0.0",
     "sass": "^1.56.1",
     "start-server-and-test": "^2.0.3",
     "swr": "^1.3.0"

diff --git a/pages/browse/index.js b/pages/browse/index.js
@@ -6,18 +6,22 @@ import {
   Notice,
   SearchBar,
 } from '@scientist-softserv/webstore-component-library'
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
 import {
   buttonBg,
   configureErrors,
   configureServices,
   useFilteredWares,
+  truncateDescription,
 } from '../../utils'
 
 const Browse = ({ session }) => {
   const router = useRouter()
   const [query, setQuery] = useState('')
   const existingQuery = router.query.q
   const accessToken = session?.accessToken
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     if (existingQuery) setQuery(existingQuery)
@@ -60,19 +64,32 @@ const Browse = ({ session }) => {
           <>
             {(services.length > 0) ? (
               <>
-                {services.map(service => (
-                  <Item
-                    key={service.id}
-                    item={service}
-                    withButtonLink={true}
-                    buttonLink={service.href}
-                    orientation='horizontal'
-                    buttonProps={{
-                      backgroundColor: buttonBg,
-                      label: 'Request this item',
-                    }}
-                  />
-                ))}
+                {services.map(service => {
+                  const { truncated, cutOffIndex } = truncateDescription(service?.description, 300, open)
+                  return (
+                    <Item
+                      key={service.id}
+                      markdownDescriptionTruncated={(
+                        <Markdown rehypePlugins={[rehypeRaw]}>
+                          {truncated}
+                        </Markdown>
+                      )}
+                      markdownDescriptionExtended={(
+                        <Markdown rehypePlugins={[rehypeRaw]}>
+                          {service?.description?.slice(cutOffIndex).trimStart()}
+                        </Markdown>
+                      )}
+                      item={service}
+                      withButtonLink={true}
+                      buttonLink={service.href}
+                      orientation='horizontal'
+                      buttonProps={{
+                        backgroundColor: buttonBg,
+                        label: 'Request this item',
+                      }}
+                    />
+                  )
+                })}
               </>
             ) : (
               <p data-cy='no-results'>

diff --git a/utils/api/configurations.js b/utils/api/configurations.js
@@ -15,7 +15,8 @@ export const configureServices = ({ data, path }) => {
       : DEFAULT_WARE_IMAGE
 
     return {
-      description: ware.snippet,
+      description: ware.description === '' ? ware.snippet : ware.description,
+      snippet: ware.snippet,
       id: ware.id,
       img,
       name: ware.name,

diff --git a/utils/helpers.js b/utils/helpers.js
@@ -82,3 +82,10 @@ export const formatBytes = (bytes, decimals = 2) => {
 
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
+
+export const truncateDescription = (desc = '', maxLength, isOpen) => {
+  if (desc.length <= maxLength || isOpen) return { truncated: desc, cutOffIndex: desc.length }
+  const lastSpaceIndex = desc.substring(0, maxLength).lastIndexOf(' ')
+  const ellipsis = isOpen ? '' : '...'
+  return { truncated: desc.slice(0, lastSpaceIndex) + ellipsis, cutOffIndex: lastSpaceIndex }
+}