feat(workflow): Remove projects-page-redesign checks from frontend for GA (#34064)

* feat(workflow): Remove projects-page-redesign checks from frontend for GA

Remove projects-page-redesign-checks from the frontend for GA.

FIXES WOR-1785

* update acceptance test

* fix resources section

static/app/views/projectsDashboard/index.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import {Fragment, useEffect, useMemo, useState} from 'react';
 import LazyLoad from 'react-lazyload';
 import {RouteComponentProps} from 'react-router';
 import styled from '@emotion/styled';
@@ -9,9 +9,7 @@ import uniqBy from 'lodash/uniqBy';
 
 import {Client} from 'sentry/api';
 import Button from 'sentry/components/button';
-import IdBadge from 'sentry/components/idBadge';
 import * as Layout from 'sentry/components/layouts/thirds';
-import Link from 'sentry/components/links/link';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import NoProjectMessage from 'sentry/components/noProjectMessage';
@@ -32,7 +30,6 @@ import TeamFilter from 'sentry/views/alerts/rules/teamFilter';
 
 import ProjectCard from './projectCard';
 import Resources from './resources';
-import TeamSection from './teamSection';
 import {getTeamParams} from './utils';
 
 type Props = {
@@ -43,23 +40,15 @@ type Props = {
   teams: TeamWithProjects[];
 } & RouteComponentProps<{orgId: string}, {}>;
 
-function Dashboard({
-  teams,
-  params,
-  organization,
-  loadingTeams,
-  error,
-  router,
-  location,
-}: Props) {
+function Dashboard({teams, organization, loadingTeams, error, router, location}: Props) {
   useEffect(() => {
     return function cleanup() {
       ProjectsStatsStore.reset();
     };
   }, []);
   const [projectQuery, setProjectQuery] = useState('');
-  const debouncedSearchQuery = useCallback(
-    debounce(handleSearch, DEFAULT_DEBOUNCE_DURATION),
+  const debouncedSearchQuery = useMemo(
+    () => debounce(handleSearch, DEFAULT_DEBOUNCE_DURATION),
     []
   );
 
@@ -73,18 +62,11 @@ function Dashboard({
 
   const canCreateProjects = organization.access.includes('project:admin');
   const canJoinTeam = organization.access.includes('team:read');
-  const hasTeamAdminAccess = organization.access.includes('team:admin');
   const hasProjectAccess = organization.access.includes('project:read');
-  const hasProjectRedesign = organization.features.includes('projects-page-redesign');
 
   const selectedTeams = new Set(getTeamParams(location ? location.query.team : ''));
-  const filteredTeams = teams.filter(team =>
-    hasProjectRedesign ? selectedTeams.has(team.id) : team.projects.length
-  );
+  const filteredTeams = teams.filter(team => selectedTeams.has(team.id));
 
-  if (!hasProjectRedesign) {
-    filteredTeams.sort((team1, team2) => team1.slug.localeCompare(team2.slug));
-  }
   const filteredTeamProjects = uniqBy(
     flatten((filteredTeams ?? teams).map(team => team.projects)),
     'id'
@@ -133,23 +115,21 @@ function Dashboard({
             </Title>
             <Layout.HeaderActions>
               <ButtonContainer>
-                {hasProjectRedesign && (
-                  <Button
-                    icon={<IconUser size="xs" />}
-                    title={
-                      canJoinTeam
-                        ? undefined
-                        : t('You do not have permission to join a team.')
-                    }
-                    disabled={!canJoinTeam}
-                    to={`/settings/${organization.slug}/teams/`}
-                    data-test-id="join-team"
-                  >
-                    {t('Join a Team')}
-                  </Button>
-                )}
                 <Button
-                  priority={hasProjectRedesign ? 'primary' : 'default'}
+                  icon={<IconUser size="xs" />}
+                  title={
+                    canJoinTeam
+                      ? undefined
+                      : t('You do not have permission to join a team.')
+                  }
+                  disabled={!canJoinTeam}
+                  to={`/settings/${organization.slug}/teams/`}
+                  data-test-id="join-team"
+                >
+                  {t('Join a Team')}
+                </Button>
+                <Button
+                  priority="primary"
                   disabled={!canCreateProjects}
                   title={
                     !canCreateProjects
@@ -165,66 +145,39 @@ function Dashboard({
               </ButtonContainer>
             </Layout.HeaderActions>
           </ProjectsHeader>
-          <Body hasProjectRedesign={hasProjectRedesign}>
+          <Body>
             <Layout.Main fullWidth>
-              {hasProjectRedesign && (
-                <SearchAndSelectorWrapper>
-                  <TeamFilter
-                    selectedTeams={selectedTeams}
-                    handleChangeFilter={handleChangeFilter}
-                    fullWidth
-                    showIsMemberTeams
-                    showMyTeamsAndUnassigned={false}
-                    showMyTeamsDescription
-                  />
-                  <StyledSearchBar
-                    defaultQuery=""
-                    placeholder={t('Search for projects by name')}
-                    onChange={debouncedSearchQuery}
-                    query={projectQuery}
-                  />
-                </SearchAndSelectorWrapper>
-              )}
-              {hasProjectRedesign ? (
-                <LazyLoad once debounce={50} height={300} offset={300}>
-                  <ProjectCards>
-                    {sortProjects(filteredProjects).map(project => (
-                      <ProjectCard
-                        data-test-id={project.slug}
-                        key={project.slug}
-                        project={project}
-                        hasProjectAccess={hasProjectAccess}
-                      />
-                    ))}
-                  </ProjectCards>
-                </LazyLoad>
-              ) : (
-                filteredTeams.map((team, index) => (
-                  <LazyLoad key={team.slug} once debounce={50} height={300} offset={300}>
-                    <TeamSection
-                      orgId={params.orgId}
-                      team={team}
-                      showBorder={index !== teams.length - 1}
-                      title={
-                        hasTeamAdminAccess ? (
-                          <TeamLink
-                            to={`/settings/${organization.slug}/teams/${team.slug}/`}
-                          >
-                            <IdBadge team={team} avatarSize={22} />
-                          </TeamLink>
-                        ) : (
-                          <IdBadge team={team} avatarSize={22} />
-                        )
-                      }
-                      projects={sortProjects(team.projects)}
-                      access={new Set(organization.access)}
+              <SearchAndSelectorWrapper>
+                <TeamFilter
+                  selectedTeams={selectedTeams}
+                  handleChangeFilter={handleChangeFilter}
+                  fullWidth
+                  showIsMemberTeams
+                  showMyTeamsAndUnassigned={false}
+                  showMyTeamsDescription
+                />
+                <StyledSearchBar
+                  defaultQuery=""
+                  placeholder={t('Search for projects by name')}
+                  onChange={debouncedSearchQuery}
+                  query={projectQuery}
+                />
+              </SearchAndSelectorWrapper>
+              <LazyLoad once debounce={50} height={300} offset={300}>
+                <ProjectCards>
+                  {sortProjects(filteredProjects).map(project => (
+                    <ProjectCard
+                      data-test-id={project.slug}
+                      key={project.slug}
+                      project={project}
+                      hasProjectAccess={hasProjectAccess}
                     />
-                  </LazyLoad>
-                ))
-              )}
-              {showResources && <Resources organization={organization} />}
+                  ))}
+                </ProjectCards>
+              </LazyLoad>
             </Layout.Main>
           </Body>
+          {showResources && <Resources organization={organization} />}
         </Fragment>
       )}
     </Fragment>
@@ -237,11 +190,6 @@ const OrganizationDashboard = (props: Props) => (
   </OrganizationDashboardWrapper>
 );
 
-const TeamLink = styled(Link)`
-  display: flex;
-  align-items: center;
-`;
-
 const ProjectsHeader = styled(Layout.Header)`
   border-bottom: none;
   align-items: end;
@@ -284,15 +232,9 @@ const StyledSearchBar = styled(SearchBar)`
   }
 `;
 
-const Body = styled(Layout.Body)<{hasProjectRedesign: boolean}>`
+const Body = styled(Layout.Body)`
   padding-top: ${space(2)} !important;
   background-color: ${p => p.theme.surface100};
-
-  ${p =>
-    !p.hasProjectRedesign &&
-    `
-    padding: 0 !important;
-  `}
 `;
 
 const ProjectCards = styled('div')`

static/app/views/projectsDashboard/teamSection.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-
-import PageHeading from 'sentry/components/pageHeading';
-import space from 'sentry/styles/space';
-import {Project, Scope, Team} from 'sentry/types';
-
-import ProjectCard from './projectCard';
-import TeamMembers from './teamMembers';
-
-type Props = {
-  access: Set<Scope>;
-  orgId: string;
-  projects: Project[];
-  showBorder: boolean;
-  team: Team;
-  title: React.ReactNode;
-};
-
-const TeamSection = ({team, projects, title, showBorder, orgId, access}: Props) => {
-  const hasTeamAccess = access.has('team:read');
-  const hasProjectAccess = access.has('project:read');
-
-  return (
-    <TeamSectionWrapper data-test-id="team" showBorder={showBorder}>
-      <TeamTitleBar>
-        <TeamName>{title}</TeamName>
-        {hasTeamAccess && team && <TeamMembers teamId={team.slug} orgId={orgId} />}
-      </TeamTitleBar>
-      <ProjectCards>
-        {projects.map(project => (
-          <ProjectCard
-            data-test-id={project.slug}
-            key={project.slug}
-            project={project}
-            hasProjectAccess={hasProjectAccess}
-          />
-        ))}
-      </ProjectCards>
-    </TeamSectionWrapper>
-  );
-};
-
-const ProjectCards = styled('div')`
-  display: grid;
-  grid-template-columns: minmax(100px, 1fr);
-  gap: ${space(3)};
-
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
-    grid-template-columns: repeat(2, minmax(100px, 1fr));
-  }
-
-  @media (min-width: ${p => p.theme.breakpoints[3]}) {
-    grid-template-columns: repeat(3, minmax(100px, 1fr));
-  }
-`;
-
-const TeamSectionWrapper = styled('div')<{showBorder: boolean}>`
-  border-bottom: ${p => (p.showBorder ? '1px solid ' + p.theme.border : 0)};
-  padding: 0 ${space(4)} ${space(4)};
-`;
-
-const TeamTitleBar = styled('div')`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${space(3)} 0 ${space(2)};
-`;
-
-const TeamName = styled(PageHeading)`
-  font-size: 20px;
-  line-height: 24px; /* We need this so that header doesn't flicker when lazy loading because avatarList height > this */
-`;
-
-export default TeamSection;

tests/acceptance/test_dashboard.py

@@ -78,25 +78,6 @@ class DashboardTest(AcceptanceTestCase, SnubaTestCase):
         self.browser.wait_until(".echarts-for-react path", timeout=100000)
         self.browser.snapshot("org dash one issue")
 
-    def test_rename_team_and_navigate_back(self):
-        self.create_sample_event()
-        self.browser.get(self.path)
-        self.browser.wait_until_not('[data-test-id="loading-indicator"]')
-        self.browser.click('[data-test-id="badge-display-name"]')
-        self.browser.wait_until_not('[data-test-id="loading-indicator"]')
-        self.browser.click(".nav-tabs li:nth-child(4) a")
-        self.browser.wait_until('input[name="slug"]')
-        self.browser.element('input[name="slug"]').send_keys("-new-slug")
-        self.browser.click('[aria-label="Save"]')
-        self.browser.wait_until_not('[aria-label="Save"]')
-        self.browser.wait_until('[data-test-id="toast-success"]')
-
-        # Go to projects
-        self.browser.click(f'[href="/organizations/{self.organization.slug}/projects/"]')
-        self.browser.wait_until_not('[data-test-id="loading-indicator"]')
-
-        assert self.browser.element('[data-test-id="badge-display-name"]').text == "#foo-new-slug"
-
 
 class EmptyDashboardTest(AcceptanceTestCase):
     def setUp(self):

tests/js/spec/views/projectsDashboard/index.spec.jsx

@@ -78,7 +78,6 @@ describe('ProjectsDashboard', function () {
       );
 
       expect(wrapper.find('Button[data-test-id="create-project"]').exists()).toBe(true);
-      expect(wrapper.find('TeamSection').exists()).toBe(true);
       expect(wrapper.find('Resources').exists()).toBe(true);
     });
   });
@@ -112,7 +111,6 @@ describe('ProjectsDashboard', function () {
 
       expect(wrapper.find('Button[data-test-id="create-project"]').exists()).toBe(true);
       expect(wrapper.find('NoProjectMessage').exists()).toBe(false);
-      expect(wrapper.find('TeamSection').exists()).toBe(true);
       expect(wrapper.find('Resources').exists()).toBe(false);
     });