feat(ui): Add guide on the new project selector (#57213)

static/app/components/assistant/getGuidesContent.tsx

@@ -188,27 +188,18 @@ export default function getGuidesContent(orgSlug: string | null): GuidesContent
       ],
     },
     {
-      guide: 'new_page_filters',
-      requiredTargets: ['new_page_filter_button'],
-      expectedTargets: ['new_page_filter_pin'],
-      dateThreshold: new Date('2022-04-05'),
+      guide: 'new_project_filter',
+      requiredTargets: ['new_project_filter'],
+      dateThreshold: new Date('2023-09-29'),
       steps: [
         {
-          title: t('Selection filters here now'),
-          target: 'new_page_filter_button',
+          title: t('Improved project selector'),
+          target: 'new_project_filter',
           description: t(
-            "Selection filters were at the top of the page. Now they're here. Because this is what's getting filtered. Obvi."
+            'Rather than the prior "lock" experience, we now remember your selections across pages so you don\'t have to.'
           ),
           nextText: t('Sounds good'),
         },
-        {
-          title: t('Pin your filters'),
-          target: 'new_page_filter_pin',
-          description: t(
-            "Want to keep the same filters between searches and sessions? Click this button. Don't want to? Don't click this button."
-          ),
-          nextText: t('Got it'),
-        },
       ],
     },
     {

static/app/components/organizations/projectPageFilter/trigger.tsx

@@ -1,6 +1,7 @@
 import {forwardRef} from 'react';
 import styled from '@emotion/styled';
 
+import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import Badge from 'sentry/components/badge';
 import DropdownButton, {DropdownButtonProps} from 'sentry/components/dropdownButton';
 import PlatformList from 'sentry/components/platformList';
@@ -75,25 +76,27 @@ function BaseProjectPageFilterTrigger(
     : value.length - projectsToShow.length;
 
   return (
-    <DropdownButton
-      {...props}
-      ref={forwardedRef}
-      icon={
-        <TriggerIconWrap>
-          {!ready || isAllProjectsSelected || isMyProjectsSelected ? (
-            <IconProject />
-          ) : (
-            <PlatformList
-              platforms={projectsToShow.map(p => p.platform ?? 'other').reverse()}
-            />
-          )}
-          {desynced && <DesyncedFilterIndicator role="presentation" />}
-        </TriggerIconWrap>
-      }
-    >
-      <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
-      {remainingCount > 0 && <StyledBadge text={`+${remainingCount}`} />}
-    </DropdownButton>
+    <GuideAnchor target="new_project_filter" position="bottom" disabled={!ready}>
+      <DropdownButton
+        {...props}
+        ref={forwardedRef}
+        icon={
+          <TriggerIconWrap>
+            {!ready || isAllProjectsSelected || isMyProjectsSelected ? (
+              <IconProject />
+            ) : (
+              <PlatformList
+                platforms={projectsToShow.map(p => p.platform ?? 'other').reverse()}
+              />
+            )}
+            {desynced && <DesyncedFilterIndicator role="presentation" />}
+          </TriggerIconWrap>
+        }
+      >
+        <TriggerLabel>{ready ? label : t('Loading\u2026')}</TriggerLabel>
+        {remainingCount > 0 && <StyledBadge text={`+${remainingCount}`} />}
+      </DropdownButton>
+    </GuideAnchor>
   );
 }
 

static/app/components/organizations/projectSelector/index.tsx

@@ -3,8 +3,6 @@ import {ClassNames} from '@emotion/react';
 import styled from '@emotion/styled';
 import sortBy from 'lodash/sortBy';
 
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
-import {MenuActions} from 'sentry/components/deprecatedDropdownMenu';
 import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
 import PageFilterPinButton from 'sentry/components/organizations/pageFilters/pageFilterPinButton';
 import {ALL_ACCESS_PROJECTS} from 'sentry/constants/pageFilters';
@@ -24,7 +22,6 @@ export type ProjectSelectorProps = {
    * Used to render a custom dropdown button for the DropdownAutoComplete
    */
   customDropdownButton: (config: {
-    actions: MenuActions;
     isOpen: boolean;
     selectedProjects: Project[];
   }) => React.ReactElement;
@@ -267,13 +264,11 @@ function ProjectSelector({
           virtualizedLabelHeight={theme.headerSelectorLabelHeight}
           inputActions={
             <InputActions>
-              <GuideAnchor target="new_page_filter_pin" position="bottom">
-                <PageFilterPinButton
-                  organization={organization}
-                  filter="projects"
-                  size="xs"
-                />
-              </GuideAnchor>
+              <PageFilterPinButton
+                organization={organization}
+                filter="projects"
+                size="xs"
+              />
             </InputActions>
           }
           menuFooter={({actions}) => (
@@ -318,9 +313,7 @@ function ProjectSelector({
           allowActorToggle
           closeOnSelect
         >
-          {({actions, isOpen}) =>
-            customDropdownButton({actions, selectedProjects: selected, isOpen})
-          }
+          {({isOpen}) => customDropdownButton({selectedProjects: selected, isOpen})}
         </StyledDropdownAutocomplete>
       )}
     </ClassNames>

static/app/components/projectPageFilter.tsx

@@ -4,7 +4,6 @@ import isEqual from 'lodash/isEqual';
 import partition from 'lodash/partition';
 
 import {updateProjects} from 'sentry/actionCreators/pageFilters';
-import GuideAnchor from 'sentry/components/assistant/guideAnchor';
 import Badge from 'sentry/components/badge';
 import PageFilterDropdownButton from 'sentry/components/organizations/pageFilters/pageFilterDropdownButton';
 import PageFilterPinIndicator from 'sentry/components/organizations/pageFilters/pageFilterPinIndicator';
@@ -132,7 +131,6 @@ function OldProjectPageFilter({
   const nonMemberProjects = isSuperuser || isOrgAdmin ? otherProjects : [];
 
   const customProjectDropdown: ProjectSelectorProps['customDropdownButton'] = ({
-    actions,
     selectedProjects,
     isOpen,
   }) => {
@@ -162,24 +160,18 @@ function OldProjectPageFilter({
     );
 
     return (
-      <GuideAnchor
-        target="new_page_filter_button"
-        position="bottom"
-        onStepComplete={actions.open}
+      <PageFilterDropdownButton
+        isOpen={isOpen}
+        highlighted={desyncedFilters.has('projects')}
+        data-test-id="page-filter-project-selector"
+        disabled={disabled}
+        icon={<PageFilterPinIndicator filter="projects">{icon}</PageFilterPinIndicator>}
       >
-        <PageFilterDropdownButton
-          isOpen={isOpen}
-          highlighted={desyncedFilters.has('projects')}
-          data-test-id="page-filter-project-selector"
-          disabled={disabled}
-          icon={<PageFilterPinIndicator filter="projects">{icon}</PageFilterPinIndicator>}
-        >
-          <TitleContainer>{title}</TitleContainer>
-          {selectedProjects.length > projectsToShow.length && (
-            <StyledBadge text={`+${selectedProjects.length - projectsToShow.length}`} />
-          )}
-        </PageFilterDropdownButton>
-      </GuideAnchor>
+        <TitleContainer>{title}</TitleContainer>
+        {selectedProjects.length > projectsToShow.length && (
+          <StyledBadge text={`+${selectedProjects.length - projectsToShow.length}`} />
+        )}
+      </PageFilterDropdownButton>
     );
   };
 

static/app/stores/guideStore.spec.tsx

@@ -50,20 +50,6 @@ describe('GuideStore', function () {
     expect(GuideStore.getState().currentGuide).toEqual(null);
   });
 
-  it('should expect anchors to appear in expectedTargets', function () {
-    data = [{guide: 'new_page_filters', seen: false}];
-
-    GuideStore.registerAnchor('new_page_filter_button');
-    GuideStore.fetchSucceeded(data);
-    expect(GuideStore.getState().currentStep).toEqual(0);
-    expect(GuideStore.getState().currentGuide?.guide).toEqual('new_page_filters');
-
-    GuideStore.registerAnchor('new_page_filter_button');
-
-    // Will not prune steps that don't have anchors
-    expect(GuideStore.getState().currentGuide?.steps).toHaveLength(2);
-  });
-
   it('should force show a guide with #assistant', function () {
     data = [
       {