Merge branch 'main' into 176-full-color-demo

Author: alishaevn

.github/issue_template.md

@@ -0,0 +1,18 @@
+# Story
+
+# Acceptance Criteria
+
+- [ ]
+
+# Screenshots / Video
+
+<details>
+<summary></summary>
+
+</details>
+
+# Testing Instructions and Sample Files
+
+-
+
+# Notes

.github/pull_request_template.md

@@ -0,0 +1,16 @@
+# Story
+
+Refs #issuenumber
+
+# Expected Behavior Before Changes
+
+# Expected Behavior After Changes
+
+# Screenshots / Video
+
+<details>
+<summary></summary>
+
+</details>
+
+# Notes

README.md

@@ -39,7 +39,7 @@ The webstore requires a [React component library](https://reactjs.org/docs/react
 Using the published github npm package requires an auth token to pull:
 
   1. Create a classic token on your github account https://github.com/settings/tokens
-  2. `echo "//npm.pkg.github.com/:_authToken=$THE_ABOVE_TOKEN_GOES_HERE" >> ~/.npmrc`
+  2. `echo "//npm.pkg.github.com/:_authToken=THE_ABOVE_TOKEN_GOES_HERE" >> ~/.npmrc`
 
 #### Component Library Dev Mode
 Using the local github repository requires you to manually clone the component library to your computer, build, and link it:

assets/svg/gps-logo-white.svg

@@ -27,7 +27,41 @@ describe('Browsing', () => {
     cy.get('button.search-button').click()
 
     // The new url should include "/browse"
-    cy.url().should('include', '/browse?=next')
+    cy.url().should('include', '/browse?q=next')
+
+    // The search bar on the browse page should have the text that was searched for
+    cy.get('input.search-bar').should('have.value', 'next')
+  })
+
+  it('completes a search from the "/browse" with a blank query', () => {
+    // Start from the browse page
+    cy.visit('/browse')
+
+    // Find the search button and perform an empty search, which should lead to the browse page
+    cy.get('button.search-button').click()
+
+    // The new url should include "/browse"
+    cy.url().should('include', '/browse')
+
+    // The new url should not contain a query
+    cy.url().should('not.include', '?')
+
+    // The search bar on the browse page should remain blank
+    cy.get('input.search-bar').should('have.value', '')
+  })
+
+  it('completes a search from "/browse" with a query term', () => {
+    // Start from the browse page
+    cy.visit('/browse')
+
+    // type an example search into the searchbar
+    cy.get('input.search-bar').type('next')
+
+    // Press the search button
+    cy.get('button.search-button').click()
+
+    // The new url should include "/browse"
+    cy.url().should('include', '/browse?q=next')
 
     // The search bar on the browse page should have the text that was searched for
     cy.get('input.search-bar').should('have.value', 'next')

cypress/e2e/browsing.cy.js

@@ -1,13 +1,16 @@
 import { Footer, Header } from '@scientist-softserv/webstore-component-library'
 import { SWRConfig } from 'swr'
 import {
-  SessionProvider, signIn, signOut, useSession
+  SessionProvider,
+  signIn,
+  signOut,
+  useSession,
 } from 'next-auth/react'
-
 import {
   FOOTER_NAME,
   FOOTER_SECTIONS,
   FOOTER_SOCIALS,
+  headerAndFooterLinkColors,
   LOGO,
   NAVIGATION_LINKS,
   fetcher,
@@ -24,14 +27,14 @@ const WebStore = ({ Component }) => {
           signIn: () => signIn(process.env.NEXT_PUBLIC_PROVIDER_NAME),
           signOut: signOut,
         }}
-        linkColor='white'
+        linkColor={headerAndFooterLinkColors}
         logo={LOGO}
         navLinks={NAVIGATION_LINKS}
         userSession={session}
       />
       <Component />
       <Footer
-        color='white'
+        color={headerAndFooterLinkColors}
         companyName={FOOTER_NAME}
         sections={FOOTER_SECTIONS}
         socials={FOOTER_SOCIALS}

pages/_app.js

@@ -8,9 +8,9 @@ import {
   SearchBar,
 } from '@scientist-softserv/webstore-component-library'
 import {
+  buttonBg,
   configureErrors,
   configureServices,
-  secondary,
   useFilteredWares,
 } from '../../utils'
 
@@ -65,7 +65,7 @@ const Browse = () => {
               buttonLink={service.href}
               orientation='horizontal'
               buttonProps={{
-                backgroundColor: secondary,
+                backgroundColor: buttonBg,
                 label: 'Request this item',
               }}
             />

pages/browse/index.js

@@ -14,7 +14,7 @@ import {
   configureServices,
   useAllWares,
   FEATURED_SERVICE_PATH,
-  TEXT,
+  ABOUT_US,
   TITLE,
 } from '../utils'
 
@@ -43,7 +43,7 @@ const Home = () => {
       />
       <div className='container'>
         <SearchBar onSubmit={handleOnSubmit} />
-        <TitledTextBox title={TITLE} text={TEXT} />
+        <TitledTextBox title={TITLE} text={ABOUT_US} />
         {isError ? (
           <Notice
             alert={configureErrors([isError])}

pages/index.js

@@ -16,10 +16,14 @@ import {
 import {
   configureErrors,
   createMessageOrFile,
-  useMessagesAndFiles,
+  requestActionsBg,
+  requestStatsHeaderBg,
+  STATUS_ARRAY,
+  statusBarBg,
+  useMessages,
+  useFiles,
   useAllSOWs,
   useOneRequest,
-  STATUS_ARRAY,
 } from '../../utils'
 
 const Request = () => {
@@ -29,18 +33,12 @@ const Request = () => {
   const { id } = router.query
   const { request, isLoadingRequest, isRequestError } = useOneRequest(id, session?.accessToken)
   const { allSOWs, isLoadingSOWs, isSOWError } = useAllSOWs(id, request?.identifier, session?.accessToken)
-  const {
-    messages,
-    files,
-    isLoadingMessagesAndFiles,
-    isMessagesAndFilesError,
-    mutate,
-    data,
-  } = useMessagesAndFiles(id, session?.accessToken)
+  const { messages, isLoadingMessages, isMessagesError, mutate, data } = useMessages(request?.uuid, session?.accessToken)
+  const { files, isLoadingFiles, isFilesError } = useFiles(id, session?.accessToken)
   const documents = (allSOWs) ? [...allSOWs] : []
 
-  const isLoading = isLoadingRequest || isLoadingSOWs || isLoadingMessagesAndFiles
-  const isError = isRequestError || isSOWError || isMessagesAndFilesError
+  const isLoading = isLoadingRequest || isLoadingSOWs || isLoadingFiles || isLoadingMessages
+  const isError = isRequestError || isSOWError || isFilesError|| isMessagesError
 
   if (isLoading) return <Loading wrapperClass='item-page mt-5' />
 
@@ -60,7 +58,7 @@ const Request = () => {
   if (isError) {
     return (
       <Notice
-        alert={configureErrors([isRequestError, isSOWError, isMessagesAndFilesError])}
+        alert={configureErrors([isRequestError, isSOWError, isMessagesError, isFilesError])}
         dismissible={false}
         withBackButton={true}
         buttonProps={{
@@ -71,35 +69,35 @@ const Request = () => {
     )
   }
 
-  // TODO(summer-cook) need to use the quoted ware id here instead of the quote group id.
-  // can be found at https://{{base_path}}/quote_groups/{{quote_group_id}}/quoted_wares.json
-  // const handleSendingMessagesOrFiles = ({ message, files }) => {
-  //   createMessageOrFile({
-  //     id,
-  //     message,
-  //     files,
-  //     accessToken: session?.accessToken,
-  //   })
-  //   mutate({ ...data, ...messages })
-  // }
+  const handleSendingMessagesOrFiles = ({ message, files }) => {
+    createMessageOrFile({
+      id,
+      message,
+      files,
+      accessToken: session?.accessToken,
+      quotedWareID: request.quotedWareID,
+    })
+    mutate({ ...data, ...messages })
+  }
 
   return (
     <div className='container'>
       <StatusBar
         addClass='mt-4'
         apiRequestStatus={request.status.text}
-        backgroundColor='light'
+        backgroundColor={statusBarBg}
         statusArray={STATUS_ARRAY}
       />
       <div className='row mb-4'>
         <div className='col-sm-4 col-md-3 mt-2 mt-sm-4 order-1 order-sm-0'>
-          {/* TODO(@summercook):
-          - add back in the handleSendingMessagesOrFiles={handleSendingMessagesOrFiles} prop
-            to ActionsGroup once posting messages/attachments has been refactored. */}
-          <ActionsGroup initialFiles={files} />
+          <ActionsGroup
+            backgroundColor={requestActionsBg}
+            initialFiles={files}
+            handleSendingMessagesOrFiles={handleSendingMessagesOrFiles}
+          />
           <div className='mt-3'>
             <RequestStats
-              addClass='bg-secondary-8'
+              addClass={requestStatsHeaderBg}
               billingInfo={{ ...request.billingAddress }}
               createdAt={request.createdAt}
               deadline={request.proposedDeadline}

pages/requests/[id].js

@@ -8,8 +8,9 @@ import {
   RequestList,
 } from '@scientist-softserv/webstore-component-library'
 import {
+  buttonBg,
   configureErrors,
-  primary,
+  requestListBg,
   useDefaultWare,
   useAllRequests
 } from '../../utils'
@@ -58,14 +59,14 @@ const Requests = () => {
       <div className='text-end d-block mt-4 mb-2'>
         <LinkedButton
           buttonProps={{
-            backgroundColor: primary,
+            backgroundColor: buttonBg,
             label: 'Initiate a New Request',
             size: 'large',
           }}
           path={{ pathname: `/requests/new/make-a-request`, query: { id: defaultWareID } }}
         />
       </div>
-      <RequestList backgroundColor='light' requests={requests} />
+      <RequestList backgroundColor={requestListBg} requests={requests} />
     </div>
   )
 }