Update `SurveyNotification` style for DS Nav (#22585)

* Hide the "DS nav" survey for users on the default variant

* Create and use `SurveyWidgetDsNav`

* Add link to SurveyWidgetDsNav button

* Revert SurveyNotification changes in the DS Nav mobile view

* Hide DS nav survey via JS rather than CSS

* Remove survey card in DS nav project dashboard mobile view in the short term

* Change sr-only to visually-hidden

* Fix typo

---------

Co-authored-by: Tim Down <158919+timdown@users.noreply.github.com>
GitOrigin-RevId: 6ff91637bcc8ad29c383627c7218f644a7b19d75

services/web/frontend/js/features/project-list/components/project-list-ds-nav.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next'
 import CurrentPlanWidget from './current-plan-widget/current-plan-widget'
 import NewProjectButton from './new-project-button'
 import ProjectListTable from './table/project-list-table'
-import SurveyWidget from './survey-widget'
 import UserNotifications from './notifications/user-notifications'
 import SearchForm from './search-form'
 import ProjectsDropdown from './dropdown/projects-dropdown'
@@ -96,7 +95,7 @@ export function ProjectListDsNav() {
                 </OLCol>
               </OLRow>
               <div className="project-list-sidebar-survey-wrapper d-md-none">
-                <SurveyWidget />
+                {/* Omit the survey card in mobile view for now */}
               </div>
               <div className="mt-1 d-md-none">
                 <div

services/web/frontend/js/features/project-list/components/sidebar/sidebar-ds-nav.tsx

@@ -4,7 +4,6 @@ import { Question, User } from '@phosphor-icons/react'
 import NewProjectButton from '../new-project-button'
 import SidebarFilters from './sidebar-filters'
 import AddAffiliation, { useAddAffiliation } from '../add-affiliation'
-import SurveyWidget from '../survey-widget'
 import { usePersistedResize } from '@/shared/hooks/use-resize'
 import { Dropdown } from 'react-bootstrap-5'
 import getMeta from '@/utils/meta'
@@ -17,6 +16,7 @@ import { UserProvider } from '@/shared/context/user-context'
 import { AccountMenuItems } from '@/features/ui/components/bootstrap-5/navbar/account-menu-items'
 import { useScrolled } from '@/features/project-list/components/sidebar/use-scroll'
 import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
+import { SurveyWidgetDsNav } from '@/features/project-list/components/survey-widget-ds-nav'
 
 function SidebarDsNav() {
   const { t } = useTranslation()
@@ -61,7 +61,7 @@ function SidebarDsNav() {
         )}
       >
         <div className="project-list-sidebar-survey-wrapper">
-          <SurveyWidget variant="light" />
+          <SurveyWidgetDsNav />
         </div>
         <div className="d-flex gap-3 mb-2">
           {helpItem && (

services/web/frontend/js/features/project-list/components/survey-widget-ds-nav.tsx

@@ -0,0 +1,54 @@
+import usePersistedState from '../../../shared/hooks/use-persisted-state'
+import getMeta from '../../../utils/meta'
+import { useCallback } from 'react'
+import classnames from 'classnames'
+import OLButton from '@/features/ui/components/ol/ol-button'
+import { useTranslation } from 'react-i18next'
+import { X } from '@phosphor-icons/react'
+
+export function SurveyWidgetDsNav() {
+  const { t } = useTranslation()
+  const survey = getMeta('ol-survey')
+  const [dismissedSurvey, setDismissedSurvey] = usePersistedState(
+    `dismissed-${survey?.name}`,
+    false
+  )
+
+  const dismissSurvey = useCallback(() => {
+    setDismissedSurvey(true)
+  }, [setDismissedSurvey])
+
+  if (!survey?.name || dismissedSurvey) {
+    return null
+  }
+
+  return (
+    <div className={classnames('user-notifications', `survey-${survey.name}`)}>
+      <div className="notification-entry">
+        <div role="alert" className="survey-notification">
+          <div className="notification-body">
+            <p className="fw-bold fs-6 pe-4">{survey.preText}</p>
+            <p>{survey.linkText}</p>
+            <OLButton
+              variant="secondary"
+              size="sm"
+              href={survey.url}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {t('take_survey')}
+            </OLButton>
+          </div>
+          <OLButton
+            variant="ghost"
+            className="user-notification-close"
+            onClick={() => dismissSurvey()}
+          >
+            <X size={16} onClick={() => dismissSurvey()} />
+            <span className="visually-hidden">{t('close')}</span>
+          </OLButton>
+        </div>
+      </div>
+    </div>
+  )
+}

services/web/frontend/js/features/project-list/components/survey-widget.tsx

@@ -3,11 +3,7 @@ import getMeta from '../../../utils/meta'
 import { useCallback } from 'react'
 import Close from '@/shared/components/close'
 
-export default function SurveyWidget({
-  variant = 'dark',
-}: {
-  variant?: 'light' | 'dark'
-}) {
+export default function SurveyWidget() {
   const survey = getMeta('ol-survey')
   const [dismissedSurvey, setDismissedSurvey] = usePersistedState(
     `dismissed-${survey?.name}`,
@@ -22,6 +18,12 @@ export default function SurveyWidget({
     return null
   }
 
+  // Short-term hard-coded special case: hide the "DS nav" survey for users on
+  // the default variant
+  if (survey?.name === 'ds-nav') {
+    return null
+  }
+
   return (
     <div className="user-notifications">
       <div className="notification-entry">
@@ -38,7 +40,7 @@ export default function SurveyWidget({
             </a>
           </div>
           <div className="notification-close notification-close-button-style">
-            <Close variant={variant} onDismiss={() => dismissSurvey()} />
+            <Close variant="dark" onDismiss={() => dismissSurvey()} />
           </div>
         </div>
       </div>

services/web/frontend/stylesheets/bootstrap-5/pages/project-list-ds-nav.scss

@@ -138,10 +138,21 @@
         background-color: var(--bg-light-secondary);
         color: var(--content-secondary);
         box-shadow: none;
+        border-radius: var(--border-radius-large);
+        position: relative;
 
-        button.close {
-          color: var(--content-secondary) !important;
+        .user-notification-close {
+          border: none;
           padding: 0;
+          background: none;
+          position: absolute;
+          top: var(--spacing-07);
+          right: var(--spacing-07);
+          color: inherit;
+        }
+
+        p {
+          margin-bottom: var(--spacing-03);
         }
       }