MMT-3552: Adds additional types, fixes prop type errors in tests, fix…

…es auth redirect

static/src/js/App.jsx

@@ -21,6 +21,7 @@ import PublishPreview from './components/PublishPreview/PublishPreview'
 import SearchPage from './pages/SearchPage/SearchPage'
 import HomePage from './pages/HomePage/HomePage'
 import AuthRequiredContainer from './components/AuthRequiredContainer/AuthRequiredContainer'
+import AuthCallbackContainer from './components/AuthCallbackContainer/AuthCallbackContainer'
 
 import REDIRECTS from './constants/redirectsMap/redirectsMap'
 
@@ -151,6 +152,11 @@ const App = () => {
                   )
                 }
               />
+              <Route
+                exact
+                path="/auth_callback"
+                element={<AuthCallbackContainer />}
+              />
               <Route path="/404" element={<Page title="404 Not Found" pageType="secondary">Not Found :(</Page>} />
               <Route path="*" element={<Navigate to="/404" replace />} />
               <Route path="/:type/:conceptId/:revisionId" element={<PublishPreview />} />

static/src/js/components/AuthCallbackContainer/AuthCallbackContainer.jsx

@@ -17,7 +17,7 @@ export const AuthCallbackContainer = () => {
     if (path) {
       navigate(path)
     }
-  })
+  }, [])
 
   return <div />
 }

static/src/js/components/AuthRequiredContainer/AuthRequiredContainer.jsx

@@ -17,7 +17,10 @@ export const AuthRequiredContainer = ({
     const { apiHost } = getApplicationConfig()
 
     if (token === null || token === '' || token === undefined) {
-      window.location.href = `${apiHost}/saml-login?target=${encodeURIComponent(location.pathname)}`
+      console.log('🚀 ~ useEffect ~ location:', location)
+      const nextPath = location.pathname + location.search
+      // debugger
+      window.location.href = `${apiHost}/saml-login?target=${encodeURIComponent(nextPath)}`
     }
   }, [])
 

static/src/js/components/CustomArrayFieldTemplate/CustomArrayFieldTemplate.jsx

@@ -129,6 +129,7 @@ const CustomArrayFieldTemplate = ({
                       <Button
                         className="custom-array-field-template__remove-button text-danger px-0"
                         Icon={FaMinusCircle}
+                        iconTitle="Minus icon in a circle"
                         naked
                         onClick={onDropIndexClick(elementIndex)}
                       >
@@ -161,6 +162,7 @@ const CustomArrayFieldTemplate = ({
           <Button
             className="text-primary"
             Icon={FaPlusCircle}
+            iconTitle="Plus icon in a circle"
             naked
             onClick={handleAdd}
           >

static/src/js/components/CustomArrayFieldTemplate/__tests__/CustomArrayFieldTemplate.test.js

@@ -83,7 +83,7 @@ describe('CustomArrayFieldTemplate', () => {
     test('adds another array field', async () => {
       const { props } = setup()
 
-      const addButton = screen.getByRole('button', { name: 'Add Another Array Field Test' })
+      const addButton = screen.getByRole('button', { name: 'Plus icon in a circle Add Another Array Field Test' })
 
       await waitFor(async () => {
         addButton.click()
@@ -100,7 +100,7 @@ describe('CustomArrayFieldTemplate', () => {
     test('removes a array field', async () => {
       const { props } = setup()
 
-      const remove = screen.getByRole('button', { name: 'Remove' })
+      const remove = screen.getByRole('button', { name: 'Minus icon in a circle Remove' })
 
       await waitFor(async () => {
         remove.click()

static/src/js/components/CustomModal/CustomModal.jsx

@@ -69,7 +69,7 @@ const CustomModal = ({
               }
             }
             Icon={FaTimes}
-            iconTitle="Close"
+            iconTitle="X icon"
             iconOnly
           >
             Close

static/src/js/components/CustomModal/__tests__/CustomModal.test.js

@@ -59,7 +59,7 @@ describe('CustomModal', () => {
         header: 'Header content'
       })
 
-      expect(screen.getByRole('button', { name: 'Close Close' })).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'X icon Close' })).toBeInTheDocument()
     })
   })
 })

static/src/js/components/GridGroupedSinglePanel/GridGroupedSinglePanel.jsx

@@ -54,6 +54,7 @@ const GridGroupedSinglePanel = ({
       <Button
         className="text-danger px-0"
         Icon={FaMinusCircle}
+        iconTitle="Minus icon in a circle"
         naked
         onClick={removeGroup}
       >
@@ -75,6 +76,7 @@ const GridGroupedSinglePanel = ({
       <Button
         className="text-primary"
         Icon={FaPlusCircle}
+        iconTitle="Plus icon in a circle"
         naked
         onClick={addGroup}
       >

static/src/js/components/GridGroupedSinglePanel/__tests__/GridGroupedSinglePanel.test.js

@@ -132,7 +132,7 @@ describe('GridGroupedSinglePanel', () => {
     test('renders the add group button', async () => {
       const { user } = setup()
       expect(screen.getByText('Add Index Ranges')).toBeInTheDocument()
-      const addButton = screen.getByRole('button', { name: 'Add Index Ranges' })
+      const addButton = screen.getByRole('button', { name: 'Plus icon in a circle Add Index Ranges' })
       await user.click(addButton)
       expect(screen.getByText('Remove Index Ranges')).toBeInTheDocument()
     })
@@ -141,9 +141,9 @@ describe('GridGroupedSinglePanel', () => {
   describe('when add button clicked', () => {
     test('renders the remove group button', async () => {
       const { user } = setup()
-      const addButton = screen.getByRole('button', { name: 'Add Index Ranges' })
+      const addButton = screen.getByRole('button', { name: 'Plus icon in a circle Add Index Ranges' })
       await user.click(addButton)
-      const removeButton = screen.getByRole('button', { name: 'Remove Index Ranges' })
+      const removeButton = screen.getByRole('button', { name: 'Minus icon in a circle Remove Index Ranges' })
       await user.click(removeButton)
       expect(screen.getByText('Add Index Ranges')).toBeInTheDocument()
     })
@@ -164,7 +164,7 @@ describe('GridGroupedSinglePanel', () => {
 
       const { user } = setup({ formData })
       expect(screen.getByText('Remove Index Ranges')).toBeInTheDocument()
-      const removeButton = screen.getByRole('button', { name: 'Remove Index Ranges' })
+      const removeButton = screen.getByRole('button', { name: 'Minus icon in a circle Remove Index Ranges' })
       await user.click(removeButton)
       expect(screen.getByText('Add Index Ranges')).toBeInTheDocument()
     })

static/src/js/components/LoadingBanner/LoadingBanner.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
+import Col from 'react-bootstrap/Col'
 import Row from 'react-bootstrap/Row'
 import Spinner from 'react-bootstrap/Spinner'
 
@@ -18,11 +19,13 @@ export const LoadingBanner = ({
   dataTestId
 }) => (
   <Row className="justify-content-center mt-5">
-    <Spinner
-      animation="border"
-      variant="primary"
-      data-testid={dataTestId}
-    />
+    <Col xs={12} className="d-flex justify-content-center">
+      <Spinner
+        animation="border"
+        variant="primary"
+        data-testid={dataTestId}
+      />
+    </Col>
   </Row>
 )
 

static/src/js/components/LoadingBanner/__tests__/__snapshots__/LoadingBanner.test.js.snap

@@ -6,9 +6,13 @@ exports[`Error Banner Component Provided a message it renders a loading banner 1
     class="justify-content-center mt-5 row"
   >
     <div
-      class="spinner-border text-primary"
-      data-testid="loading-banner__spinner"
-    />
+      class="d-flex justify-content-center col-12"
+    >
+      <div
+        class="spinner-border text-primary"
+        data-testid="loading-banner__spinner"
+      />
+    </div>
   </div>
 </div>
 `;
@@ -19,9 +23,13 @@ exports[`Error Banner Component Provided a test id it renders a loading banner 1
     class="justify-content-center mt-5 row"
   >
     <div
-      class="spinner-border text-primary"
-      data-testid="test-spinner"
-    />
+      class="d-flex justify-content-center col-12"
+    >
+      <div
+        class="spinner-border text-primary"
+        data-testid="test-spinner"
+      />
+    </div>
   </div>
 </div>
 `;

static/src/js/constants/conceptTypeQueries.js

@@ -1,15 +1,21 @@
 import { GET_COLLECTION } from '../operations/queries/getCollection'
 import { GET_COLLECTIONS } from '../operations/queries/getCollections'
 import { GET_SERVICE } from '../operations/queries/getService'
+import { GET_SERVICES } from '../operations/queries/getServices'
 import { GET_TOOL } from '../operations/queries/getTool'
+import { GET_TOOLS } from '../operations/queries/getTools'
 import { GET_VARIABLE } from '../operations/queries/getVariable'
+import { GET_VARIABLES } from '../operations/queries/getVariables'
 
 const conceptTypeQueries = {
   Collection: GET_COLLECTION,
   Collections: GET_COLLECTIONS,
   Service: GET_SERVICE,
+  Services: GET_SERVICES,
   Tool: GET_TOOL,
-  Variable: GET_VARIABLE
+  Tools: GET_TOOLS,
+  Variable: GET_VARIABLE,
+  Variables: GET_VARIABLES
 }
 
 export default conceptTypeQueries

static/src/js/constants/conceptTypes.js

@@ -0,0 +1,15 @@
+/**
+ * Mapping of concept id types
+ */
+const conceptTypes = {
+  Collection: 'Collection',
+  Collections: 'Collections',
+  Service: 'Service',
+  Services: 'Services',
+  Tool: 'Tool',
+  Tools: 'Tools',
+  Variable: 'Variable',
+  Variables: 'Variables'
+}
+
+export default conceptTypes

static/src/js/hooks/useSearchQuery.js

@@ -3,6 +3,7 @@ import { isEmpty } from 'lodash-es'
 import { useLazyQuery } from '@apollo/client'
 
 import conceptTypeQueries from '../constants/conceptTypeQueries'
+import conceptTypes from '../constants/conceptTypes'
 
 /**
  * Creates a query that can be used to search across the published types.
@@ -23,6 +24,15 @@ const useSearchQuery = ({
   const [error, setError] = useState()
   const [loading, setLoading] = useState()
 
+  let conditionalParams = {}
+
+  if (type === conceptTypes.Collections) {
+    conditionalParams = {
+      ...conditionalParams,
+      includeTags: '*'
+    }
+  }
+
   const [getResults, { loading: queryLoading }] = useLazyQuery(conceptTypeQueries[type], {
     // If the search results has already been loaded, skip this query
     skip: !isEmpty(results),
@@ -32,8 +42,8 @@ const useSearchQuery = ({
         limit,
         offset,
         keyword,
-        includeTags: '*',
-        sortKey
+        sortKey,
+        ...conditionalParams
       }
     },
     onCompleted: (getResultsData) => {

static/src/js/operations/queries/getServices.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+export const GET_SERVICES = gql`
+  query GetServices($params: ServicesInput) {
+    services(params: $params) {
+      count
+      items {
+        conceptId
+        name
+        longName
+        providerId
+        revisionDate
+      }
+    }
+  }
+`

static/src/js/operations/queries/getTools.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+export const GET_TOOLS = gql`
+  query GetTools($params: ToolsInput) {
+    tools(params: $params) {
+      count
+      items {
+        conceptId
+        name
+        longName
+        providerId
+        revisionDate
+      }
+    }
+  }
+`

static/src/js/operations/queries/getVariables.js

@@ -0,0 +1,16 @@
+import { gql } from '@apollo/client'
+
+export const GET_VARIABLES = gql`
+  query GetVariables($params: VariablesInput) {
+    variables(params: $params) {
+      count
+      items {
+        conceptId
+        name
+        longName
+        providerId
+        revisionDate
+      }
+    }
+  }
+`