chore: review launchdarkly flags (#1207)

* remove landingPageIndex flag * remove guardianDirectory flag * fixup! remove landingPageIndex flag * move flags to keep to top * remove weather widget * remove dragAndDropCollections flag * remove searchPageFilter flag * remove featuredShortcuts flag * fix pagenav test * Revert "remove dragAndDropCollections flag" This reverts commit a5bcd28. * WIP * WIP * WIP * Remove attributes --------- Co-authored-by: Jacob Capps <99674188+jcbcapps@users.noreply.github.com> Co-authored-by: Jacob Capps <jcapps@truss.works>
USSF-ORBIT · Feb 16, 2024 · 5a727b4 · 5a727b4
1 parent 7e0102c
commit 5a727b4
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 115 deletions.
diff --git a/src/__tests__/pages/search.test.tsx b/src/__tests__/pages/search.test.tsx
@@ -2,7 +2,6 @@
  * @jest-environment jsdom
  */
 import { screen } from '@testing-library/react'
-import { mockFlags } from 'jest-launchdarkly-mock'
 import type { GetServerSidePropsContext } from 'next'
 
 import { renderWithAuth } from '../../testHelpers'
@@ -133,10 +132,6 @@ describe('Search page', () => {
     })
 
     test('renders the SearchFilter component', () => {
-      mockFlags({
-        searchPageFilter: true,
-      })
-
       renderWithAuth(
         <SearchPage
           query="fitness"
@@ -148,22 +143,6 @@ describe('Search page', () => {
       expect(screen.getByText('Filter Search')).toBeInTheDocument()
     })
 
-    test('does not render the SearchFilter component if the flag is off', () => {
-      mockFlags({
-        searchPageFilter: false,
-      })
-
-      renderWithAuth(
-        <SearchPage
-          query="fitness"
-          results={[]}
-          labels={[{ name: 'label1' }, { name: 'label2' }, { name: 'label3' }]}
-        />
-      )
-
-      expect(screen.queryByText('Filter Search')).not.toBeInTheDocument()
-    })
-
     test('renders the results if there were matches for the query', async () => {
       const mockResults = mockCmsSearchResults.map((r) => ({
         ...r,

diff --git a/src/components/AddWidget/AddWidget.test.tsx b/src/components/AddWidget/AddWidget.test.tsx
@@ -188,10 +188,6 @@ describe('AddWidget component', () => {
   })
 
   test('Add weather widget', async () => {
-    mockFlags({
-      weatherWidget: true,
-    })
-
     const user = userEvent.setup()
     const mockSetTemporaryWidget = jest.fn()
     const mockIsAddingWidget = jest.fn()
@@ -220,10 +216,6 @@ describe('AddWidget component', () => {
   })
 
   test('Add weather widget button is disabled if the user cannot add Weather', async () => {
-    mockFlags({
-      weatherWidget: true,
-    })
-
     const user = userEvent.setup()
     const mockSetTemporaryWidget = jest.fn()
     const mockIsAddingWidget = jest.fn()

diff --git a/src/components/AddWidget/AddWidget.tsx b/src/components/AddWidget/AddWidget.tsx
@@ -89,18 +89,16 @@ const AddWidget = ({
           }}>
           Add news widget
         </Button>
-        {flags?.weatherWidget && (
-          <Button
-            disabled={!canAddWeather}
-            type="button"
-            onClick={() => {
-              setTemporaryWidget('Weather')
-              setIsAddingWidget(true)
-              setIsDropdownOpen(false)
-            }}>
-            Add weather widget
-          </Button>
-        )}
+        <Button
+          disabled={!canAddWeather}
+          type="button"
+          onClick={() => {
+            setTemporaryWidget('Weather')
+            setIsAddingWidget(true)
+            setIsDropdownOpen(false)
+          }}>
+          Add weather widget
+        </Button>
         {flags?.guardianIdealCarousel && (
           <Button
             disabled={!canAddGuardianIdeal}
@@ -112,17 +110,15 @@ const AddWidget = ({
             Add Guardian Ideal widget
           </Button>
         )}
-        {flags?.featuredShortcuts && (
-          <Button
-            disabled={!canAddFeaturedShortcuts}
-            type="button"
-            onClick={() => {
-              addFeaturedShortcuts()
-              setIsDropdownOpen(false)
-            }}>
-            Add Featured Shortcuts widget
-          </Button>
-        )}
+        <Button
+          disabled={!canAddFeaturedShortcuts}
+          type="button"
+          onClick={() => {
+            addFeaturedShortcuts()
+            setIsDropdownOpen(false)
+          }}>
+          Add Featured Shortcuts widget
+        </Button>
       </DropdownMenu>
     </div>
   )

diff --git a/src/components/MySpace/MySpace.tsx b/src/components/MySpace/MySpace.tsx
@@ -144,7 +144,7 @@ const MySpace = ({ bookmarks }: { bookmarks: CMSBookmark[] }) => {
               strategy={rectSortingStrategy}>
               <Grid row gap={2}>
                 {mySpace.map((widget: Widget) => {
-                  if (isFeaturedShortcuts(widget) && flags?.featuredShortcuts) {
+                  if (isFeaturedShortcuts(widget)) {
                     return (
                       <Grid
                         key={`widget_${widget._id}`}
@@ -183,7 +183,7 @@ const MySpace = ({ bookmarks }: { bookmarks: CMSBookmark[] }) => {
                     )
                   }
 
-                  if (isWeather(widget) && flags?.weatherWidget) {
+                  if (isWeather(widget)) {
                     const weatherWidget = widget as WeatherWidgetType
                     return (
                       <Grid

diff --git a/src/components/PageNav/PageNav.test.tsx b/src/components/PageNav/PageNav.test.tsx
@@ -3,7 +3,6 @@
  */
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { mockFlags } from 'jest-launchdarkly-mock'
 import PageNav from './PageNav'
 
 jest.mock('next/router', () => ({
@@ -27,19 +26,6 @@ describe('PageNav component', () => {
         expect(link).toHaveAttribute('href', navItem.getAttribute('href'))
       })
 
-      expect(links).toHaveLength(3)
-    })
-
-    test('renders nav items behind LaunchDarkly flags', () => {
-      mockFlags({
-        landingPageIndex: true,
-        guardianDirectory: true,
-      })
-
-      render(<PageNav />)
-
-      const links = screen.getAllByRole('link')
-
       expect(links).toHaveLength(5)
     })
   })

diff --git a/src/components/PageNav/PageNav.tsx b/src/components/PageNav/PageNav.tsx
@@ -1,34 +1,24 @@
 import React from 'react'
 import { SideNav } from '@trussworks/react-uswds'
-import { useFlags } from 'launchdarkly-react-client-sdk'
 import styles from './PageNav.module.scss'
 
 import NavLink from 'components/util/NavLink/NavLink'
 
 const PageNav = () => {
-  const flags = useFlags()
-
   const navItems = [
     { path: '/', label: 'My Space' },
+    {
+      path: '/guardian-directory',
+      label: 'Guardian Directory',
+    },
     {
       path: '/sites-and-applications',
       label: <>All sites &amp; applications</>,
     },
     { path: '/ussf-documentation', label: 'USSF documentation' },
+    { path: '/landing', label: 'Landing Pages' },
   ]
 
-  if (flags.guardianDirectory) {
-    // TODO: we can remove this if and put the navItem in the correct slot above once fully released
-    navItems.splice(1, 0, {
-      path: '/guardian-directory',
-      label: 'Guardian Directory',
-    })
-  }
-
-  if (flags.landingPageIndex) {
-    navItems.push({ path: '/landing', label: 'Landing Pages' })
-  }
-
   const items = navItems.map((i) => (
     <NavLink
       href={i.path}

diff --git a/src/components/util/DraggableWidget/DraggableWidget.tsx b/src/components/util/DraggableWidget/DraggableWidget.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
 import { useSortable } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { useFlags } from 'launchdarkly-react-client-sdk'
 import { useMySpaceContext } from 'stores/myspaceContext'
 
 type DraggableWidgetProps = {
@@ -10,16 +9,8 @@ type DraggableWidgetProps = {
 }
 
 const DraggableWidget = ({ id, children }: DraggableWidgetProps) => {
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: id })
-
-  const { dragAndDropCollections } = useFlags()
+  const { listeners, setNodeRef, transform, transition, isDragging } =
+    useSortable({ id: id })
 
   const style = {
     transform: CSS.Translate.toString(transform),
@@ -33,12 +24,11 @@ const DraggableWidget = ({ id, children }: DraggableWidgetProps) => {
 
   return (
     <div ref={setNodeRef} style={{ ...style }}>
-      {disableDragAndDrop || !dragAndDropCollections ? (
+      {disableDragAndDrop ? (
         <div>{children}</div>
       ) : (
         <div
           {...listeners}
-          {...attributes}
           style={{
             cursor: isDragging ? 'grabbing' : 'grab',
           }}>

diff --git a/src/pages/guardian-directory.tsx b/src/pages/guardian-directory.tsx
@@ -1,6 +1,4 @@
 import { useEffect, useState } from 'react'
-import { useFlags } from 'launchdarkly-react-client-sdk'
-import { useRouter } from 'next/router'
 import { Button, Search } from '@trussworks/react-uswds'
 import LoadingWidget from 'components/LoadingWidget/LoadingWidget'
 import { withDefaultLayout } from 'layout/DefaultLayout/DefaultLayout'
@@ -12,8 +10,6 @@ import { GuardianDirectory as GuardianDirectoryType } from 'types'
 import { useGetGuardianDirectoryQuery } from 'operations/portal/queries/getGuardianDirectory.g'
 
 const GuardianDirectory = () => {
-  const flags = useFlags()
-  const router = useRouter()
   const [directory, setDirectory] = useState(Array<GuardianDirectoryType>)
   const { data: lastModifiedAt } = useGetLastModifiedAtQuery()
   const { data: guardianDirectoryData, loading: loadingGuardianData } =
@@ -62,12 +58,6 @@ const GuardianDirectory = () => {
     setSearchQuery(' ')
   }
 
-  // TODO: remove once released
-  // If guardian directory is off return 404
-  if (flags.guardianDirectory === false) {
-    router.replace('/404')
-  }
-
   return (
     <>
       <div className={styles.guardianDirectory}>

diff --git a/src/pages/search.tsx b/src/pages/search.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
 import { GridContainer, Grid } from '@trussworks/react-uswds'
-import { useFlags } from 'launchdarkly-react-client-sdk'
 import { client } from 'lib/keystoneClient'
 import { withArticleLayout } from 'layout/DefaultLayout/ArticleLayout'
 import PageHeader from 'components/PageHeader/PageHeader'
@@ -27,7 +26,6 @@ const Search = ({
 }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
   const { loading } = useUser()
   const { setSearchQuery } = useSearchContext()
-  const flags = useFlags()
 
   // If a query is passed in, set the searchQuery state to that value
   useEffect(() => {
@@ -78,7 +76,7 @@ const Search = ({
         <Grid row gap="lg">
           <Grid col="auto">
             <EPubsCard query={query} />
-            {flags?.searchPageFilter && <SearchFilter labels={labels} />}
+            <SearchFilter labels={labels} />
           </Grid>
 
           {results.length > 0 ? (

diff --git a/src/stores/launchDarklyLocal.ts b/src/stores/launchDarklyLocal.ts
@@ -5,10 +5,5 @@
  */
 export default {
   guardianIdealCarousel: true,
-  guardianDirectory: true,
-  featuredShortcuts: true,
-  searchPageFilter: true,
-  dragAndDropCollections: true,
-  weatherWidget: true,
-  landingPageIndex: true,
+  sitesAppsSortView: false,
 }