feat: Tag scene filter selection as URL search parameter

packages/api-explorer/src/ApiExplorer.tsx

@@ -68,8 +68,16 @@ import {
   selectSpecs,
   selectCurrentSpec,
   selectSdkLanguage,
+  selectTagFilter,
 } from './state'
-import { getSpecKey, diffPath, useNavigation, findSdk, allAlias } from './utils'
+import {
+  getSpecKey,
+  diffPath,
+  useNavigation,
+  findSdk,
+  allAlias,
+  isValidFilter,
+} from './utils'
 
 export interface ApiExplorerProps {
   adaptor: IApixAdaptor
@@ -92,9 +100,14 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
   const specs = useSelector(selectSpecs)
   const spec = useSelector(selectCurrentSpec)
   const selectedSdkLanguage = useSelector(selectSdkLanguage)
+  const selectedTagFilter = useSelector(selectTagFilter)
   const { initLodesAction } = useLodeActions()
-  const { initSettingsAction, setSearchPatternAction, setSdkLanguageAction } =
-    useSettingActions()
+  const {
+    initSettingsAction,
+    setSearchPatternAction,
+    setSdkLanguageAction,
+    setTagFilterAction,
+  } = useSettingActions()
   const { initSpecsAction, setCurrentSpecAction } = useSpecActions()
 
   const location = useLocation()
@@ -125,10 +138,13 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
     // reconcile local storage state with URL or vice versa
     if (initialized) {
       const sdkParam = searchParams.get('sdk') || ''
+      const verbParam = searchParams.get('v') || ''
       const sdk = findSdk(sdkParam)
       const validSdkParam =
         !sdkParam.localeCompare(sdk.alias, 'en', { sensitivity: 'base' }) ||
         !sdkParam.localeCompare(sdk.language, 'en', { sensitivity: 'base' })
+      const validVerbParam = isValidFilter(location, verbParam)
+
       if (validSdkParam) {
         // sync store with URL
         setSdkLanguageAction({
@@ -141,6 +157,14 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
           sdk: alias === allAlias ? null : alias,
         })
       }
+
+      if (validVerbParam) {
+        setTagFilterAction({ tagFilter: verbParam.toUpperCase() })
+      } else {
+        navigate(location.pathname, {
+          v: selectedTagFilter === 'ALL' ? null : selectedTagFilter,
+        })
+      }
     }
   }, [initialized])
 
@@ -153,11 +177,18 @@ export const ApiExplorer: FC<ApiExplorerProps> = ({
 
   useEffect(() => {
     if (!initialized) return
+    const searchParams = new URLSearchParams(location.search)
     const searchPattern = searchParams.get('s') || ''
     const sdkParam = searchParams.get('sdk') || 'all'
+    const verbParam = searchParams.get('v') || 'ALL'
     const { language: sdkLanguage } = findSdk(sdkParam)
     setSearchPatternAction({ searchPattern })
     setSdkLanguageAction({ sdkLanguage })
+    setTagFilterAction({
+      tagFilter: isValidFilter(location, verbParam)
+        ? verbParam.toUpperCase()
+        : 'ALL',
+    })
   }, [location.search])
 
   useEffect(() => {

packages/api-explorer/src/components/SelectorContainer/SelectorContainer.tsx

@@ -51,6 +51,9 @@ export const SelectorContainer: FC<SelectorContainerProps> = ({
   ...spaceProps
 }) => {
   const searchParams = new URLSearchParams(location.search)
+  // TODO: noticing that there are certain pages where we must delete extra params
+  //       before pushing its link, what's a way we can handle this?
+  searchParams.delete('v')
   return (
     <Space width="auto" {...spaceProps}>
       <SdkLanguageSelector />

packages/api-explorer/src/components/SideNav/SideNav.tsx

@@ -84,12 +84,12 @@ export const SideNav: FC<SideNavProps> = ({ headless = false, spec }) => {
     if (parts[1] === 'diff') {
       if (parts[3] !== tabNames[index]) {
         parts[3] = tabNames[index]
-        navigate(parts.join('/'))
+        navigate(parts.join('/'), { v: null })
       }
     } else {
       if (parts[2] !== tabNames[index]) {
         parts[2] = tabNames[index]
-        navigate(parts.join('/'))
+        navigate(parts.join('/'), { v: null })
       }
     }
   }

packages/api-explorer/src/components/SideNav/SideNavMethods.tsx

@@ -85,12 +85,15 @@ export const SideNavMethods = styled(
           {Object.values(methods).map((method) => (
             <li key={method.name}>
               <Link
-                to={`${buildMethodPath(
-                  specKey,
-                  tag,
-                  method.name,
-                  searchParams.toString()
-                )}`}
+                to={() => {
+                  searchParams.delete('v')
+                  return buildMethodPath(
+                    specKey,
+                    tag,
+                    method.name,
+                    searchParams.toString()
+                  )
+                }}
               >
                 {highlightHTML(searchPattern, method.summary)}
               </Link>

packages/api-explorer/src/components/SideNav/SideNavTypes.tsx

@@ -85,12 +85,15 @@ export const SideNavTypes = styled(
           {Object.values(types).map((type) => (
             <li key={type.name}>
               <Link
-                to={`${buildTypePath(
-                  specKey,
-                  tag,
-                  type.name,
-                  searchParams.toString()
-                )}`}
+                to={() => {
+                  searchParams.delete('v')
+                  return buildTypePath(
+                    specKey,
+                    tag,
+                    type.name,
+                    searchParams.toString()
+                  )
+                }}
               >
                 {highlightHTML(searchPattern, type.name)}
               </Link>

packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.spec.tsx

@@ -29,16 +29,28 @@ import { screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { api } from '../../test-data'
-import { renderWithRouter } from '../../test-utils'
+import { renderWithRouterAndReduxProvider } from '../../test-utils'
 import { MethodTagScene } from './MethodTagScene'
 
 const opBtnNames = /ALL|GET|POST|PUT|PATCH|DELETE/
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
+
 describe('MethodTagScene', () => {
   Element.prototype.scrollTo = jest.fn()
 
   test('it renders operation buttons and all methods for a given method tag', () => {
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
@@ -62,7 +74,7 @@ describe('MethodTagScene', () => {
 
   test('it only renders operation buttons for operations that exist under that tag', () => {
     /** ApiAuth contains two POST methods and a DELETE method */
-    renderWithRouter(
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
@@ -75,30 +87,29 @@ describe('MethodTagScene', () => {
     ).toHaveLength(3)
   })
 
-  test('it filters methods by operation type', async () => {
-    renderWithRouter(
+  test('it pushes filter to URL on toggle', async () => {
+    renderWithRouterAndReduxProvider(
       <Route path="/:specKey/methods/:methodTag">
         <MethodTagScene api={api} />
       </Route>,
       ['/3.1/methods/Look']
     )
-    const allLookMethods = /^\/look.*/
-    expect(screen.getAllByText(allLookMethods)).toHaveLength(7)
     /** Filter by GET operation */
     userEvent.click(screen.getByRole('button', { name: 'GET' }))
     await waitFor(() => {
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(4)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 'v=get',
+      })
     })
     /** Filter by DELETE operation */
     userEvent.click(screen.getByRole('button', { name: 'DELETE' }))
     await waitFor(() => {
       // eslint-disable-next-line jest-dom/prefer-in-document
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(1)
-    })
-    /** Restore original state */
-    userEvent.click(screen.getByRole('button', { name: 'ALL' }))
-    await waitFor(() => {
-      expect(screen.getAllByText(allLookMethods)).toHaveLength(7)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 'v=delete',
+      })
     })
   })
 })

packages/api-explorer/src/scenes/MethodTagScene/MethodTagScene.tsx

@@ -28,8 +28,10 @@ import React, { useEffect, useState } from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { Grid, ButtonToggle, ButtonItem } from '@looker/components'
 import type { ApiModel } from '@looker/sdk-codegen'
+import { useSelector } from 'react-redux'
 import { ApixSection, DocTitle, DocMethodSummary, Link } from '../../components'
 import { buildMethodPath, useNavigation } from '../../utils'
+import { selectTagFilter } from '../../state'
 import { getOperations } from './utils'
 
 interface MethodTagSceneProps {
@@ -44,16 +46,22 @@ interface MethodTagSceneParams {
 export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   const { specKey, methodTag } = useParams<MethodTagSceneParams>()
   const history = useHistory()
+  const methods = api.tags[methodTag]
   const navigate = useNavigation()
+  const selectedTagFilter = useSelector(selectTagFilter)
+  const [tagFilter, setTagFilter] = useState(selectedTagFilter)
   const searchParams = new URLSearchParams(location.search)
-  const [value, setValue] = useState('ALL')
+
+  const setValue = (filter: string) => {
+    navigate(location.pathname, {
+      v: filter === 'ALL' ? null : filter.toLowerCase(),
+    })
+  }
 
   useEffect(() => {
-    /** Reset ButtonToggle value on route change */
-    setValue('ALL')
-  }, [methodTag])
+    setTagFilter(selectedTagFilter)
+  }, [selectedTagFilter])
 
-  const methods = api.tags[methodTag]
   useEffect(() => {
     if (!methods) {
       navigate(`/${specKey}/methods`)
@@ -70,7 +78,12 @@ export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
   return (
     <ApixSection>
       <DocTitle>{`${tag.name}: ${tag.description}`}</DocTitle>
-      <ButtonToggle mb="small" mt="xlarge" value={value} onChange={setValue}>
+      <ButtonToggle
+        mb="small"
+        mt="xlarge"
+        value={tagFilter}
+        onChange={setValue}
+      >
         <ButtonItem key="ALL" px="large" py="xsmall">
           ALL
         </ButtonItem>
@@ -82,15 +95,19 @@ export const MethodTagScene: FC<MethodTagSceneProps> = ({ api }) => {
       </ButtonToggle>
       {Object.values(methods).map(
         (method, index) =>
-          (value === 'ALL' || value === method.httpMethod) && (
+          (selectedTagFilter === 'ALL' ||
+            selectedTagFilter === method.httpMethod) && (
             <Link
               key={index}
-              to={buildMethodPath(
-                specKey,
-                tag.name,
-                method.name,
-                searchParams.toString()
-              )}
+              to={() => {
+                searchParams.delete('v')
+                return buildMethodPath(
+                  specKey,
+                  tag.name,
+                  method.name,
+                  searchParams.toString()
+                )
+              }}
             >
               <Grid columns={1} py="xsmall">
                 <DocMethodSummary key={index} method={method} />

packages/api-explorer/src/scenes/TypeTagScene/TypeTagScene.spec.tsx

@@ -36,6 +36,18 @@ const opBtnNames = /ALL|SPECIFICATION|WRITE|REQUEST|ENUMERATED/
 
 const path = '/:specKey/types/:typeTag'
 
+const mockHistoryPush = jest.fn()
+jest.mock('react-router-dom', () => {
+  const ReactRouterDOM = jest.requireActual('react-router-dom')
+  return {
+    ...ReactRouterDOM,
+    useHistory: () => ({
+      push: mockHistoryPush,
+      location,
+    }),
+  }
+})
+
 describe('TypeTagScene', () => {
   Element.prototype.scrollTo = jest.fn()
 
@@ -74,30 +86,28 @@ describe('TypeTagScene', () => {
     ).toHaveLength(2)
   })
 
-  test('it filters methods by operation type', async () => {
+  test('it pushes filter to URL on toggle', async () => {
     renderWithRouterAndReduxProvider(
       <Route path={path}>
         <TypeTagScene api={api} />
       </Route>,
       ['/3.1/types/Look']
     )
-    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
-      Object.keys(api.typeTags.Look).length
-    )
-
-    expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(
-      Object.keys(api.typeTags.Look).length
-    )
-
     /** Filter by SPECIFICATION */
     userEvent.click(screen.getByRole('button', { name: 'SPECIFICATION' }))
     await waitFor(() => {
-      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(5)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 'v=specification',
+      })
     })
     /** Filter by REQUEST */
     userEvent.click(screen.getByRole('button', { name: 'REQUEST' }))
     await waitFor(() => {
-      expect(screen.getAllByRole('heading', { level: 3 })).toHaveLength(2)
+      expect(mockHistoryPush).toHaveBeenCalledWith({
+        pathname: location.pathname,
+        search: 'v=request',
+      })
     })
   })
 })