feat(performance): Split out teams in key transactions with no access (#26460)

Teams without access to the project cannot key the transaction. This splits them
out under a separate header and disables them.

static/app/actionCreators/performance.tsx

@@ -73,7 +73,7 @@ export function toggleKeyTransaction(
   api: Client,
   isKeyTransaction: boolean,
   orgId: string,
-  projects: Readonly<number[]>,
+  projects: string[],
   transactionName: string,
   teamIds?: string[] // TODO(txiao): make this required
 ): Promise<undefined> {

static/app/components/performance/teamKeyTransaction.tsx

@@ -1,8 +1,7 @@
-import {Component, ComponentClass, ReactPortal} from 'react';
+import {Component, ComponentClass, Fragment, ReactPortal} from 'react';
 import ReactDOM from 'react-dom';
 import {Manager, Popper, Reference} from 'react-popper';
 import styled from '@emotion/styled';
-import partition from 'lodash/partition';
 import * as PopperJS from 'popper.js';
 
 import MenuHeader from 'app/components/actions/menuHeader';
@@ -12,7 +11,7 @@ import MenuItem from 'app/components/menuItem';
 import {TeamSelection} from 'app/components/performance/teamKeyTransactionsManager';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
-import {Team} from 'app/types';
+import {Project, Team} from 'app/types';
 import {defined} from 'app/utils';
 import {MAX_TEAM_KEY_TRANSACTIONS} from 'app/utils/performance/constants';
 
@@ -21,21 +20,13 @@ export type TitleProps = Partial<ReturnType<GetActorPropsFn>> & {
   disabled?: boolean;
 };
 
-function canKeyForTeam(team: Team, keyedTeams: Set<string>, counts: Map<string, number>) {
-  const isChecked = keyedTeams.has(team.id);
-  if (isChecked) {
-    return true;
-  }
-  return (counts.get(team.id) ?? 0) < MAX_TEAM_KEY_TRANSACTIONS;
-}
-
 type Props = {
   isLoading: boolean;
   error: string | null;
   title: ComponentClass<TitleProps>;
   handleToggleKeyTransaction: (selection: TeamSelection) => void;
   teams: Team[];
-  project: number;
+  project: Project;
   transactionName: string;
   keyedTeams: Set<string> | null;
   counts: Map<string, number> | null;
@@ -103,64 +94,107 @@ class TeamKeyTransaction extends Component<Props, State> {
     return enabled ? handleToggleKeyTransaction(selection) : undefined;
   };
 
+  partitionTeams(counts: Map<string, number>, keyedTeams: Set<string>) {
+    const {teams, project} = this.props;
+
+    const enabledTeams: Team[] = [];
+    const disabledTeams: Team[] = [];
+    const noAccessTeams: Team[] = [];
+
+    const projectTeams = new Set(project.teams.map(({id}) => id));
+    for (const team of teams) {
+      if (!projectTeams.has(team.id)) {
+        noAccessTeams.push(team);
+      } else if (
+        keyedTeams.has(team.id) ||
+        (counts.get(team.id) ?? 0) < MAX_TEAM_KEY_TRANSACTIONS
+      ) {
+        enabledTeams.push(team);
+      } else {
+        disabledTeams.push(team);
+      }
+    }
+
+    return {
+      enabledTeams,
+      disabledTeams,
+      noAccessTeams,
+    };
+  }
+
   renderMenuContent(counts: Map<string, number>, keyedTeams: Set<string>) {
     const {teams, project, transactionName} = this.props;
 
-    const [enabledTeams, disabledTeams] = partition(teams, team =>
-      canKeyForTeam(team, keyedTeams, counts)
+    const {enabledTeams, disabledTeams, noAccessTeams} = this.partitionTeams(
+      counts,
+      keyedTeams
     );
 
     const isMyTeamsEnabled = enabledTeams.length > 0;
     const myTeamsHandler = this.toggleSelection(isMyTeamsEnabled, {
-      type: 'my teams',
       action: enabledTeams.length === keyedTeams.size ? 'unkey' : 'key',
+      teamIds: enabledTeams.map(({id}) => id),
       project,
       transactionName,
     });
 
+    const hasTeamsWithAccess = enabledTeams.length + disabledTeams.length > 0;
+
     return (
       <DropdownContent>
-        <DropdownMenuHeader first>
-          {t('My Teams')}
-          <ActionItem>
-            <CheckboxFancy
-              isDisabled={!isMyTeamsEnabled}
-              isChecked={teams.length === keyedTeams.size}
-              isIndeterminate={teams.length > keyedTeams.size && keyedTeams.size > 0}
-              onClick={myTeamsHandler}
-            />
-          </ActionItem>
-        </DropdownMenuHeader>
-        {enabledTeams.map(team => (
-          <TeamKeyTransactionItem
-            key={team.slug}
-            team={team}
-            isKeyed={keyedTeams.has(team.id)}
-            disabled={false}
-            onSelect={this.toggleSelection(true, {
-              type: 'id',
-              action: keyedTeams.has(team.id) ? 'unkey' : 'key',
-              teamId: team.id,
-              project,
-              transactionName,
-            })}
-          />
-        ))}
-        {disabledTeams.map(team => (
-          <TeamKeyTransactionItem
-            key={team.slug}
-            team={team}
-            isKeyed={keyedTeams.has(team.id)}
-            disabled
-            onSelect={this.toggleSelection(true, {
-              type: 'id',
-              action: keyedTeams.has(team.id) ? 'unkey' : 'key',
-              teamId: team.id,
-              project,
-              transactionName,
-            })}
-          />
-        ))}
+        {hasTeamsWithAccess && (
+          <Fragment>
+            <DropdownMenuHeader first>
+              {t('My Teams with Access')}
+              <ActionItem>
+                <CheckboxFancy
+                  isDisabled={!isMyTeamsEnabled}
+                  isChecked={teams.length === keyedTeams.size}
+                  isIndeterminate={teams.length > keyedTeams.size && keyedTeams.size > 0}
+                  onClick={myTeamsHandler}
+                />
+              </ActionItem>
+            </DropdownMenuHeader>
+            {enabledTeams.map(team => (
+              <TeamKeyTransactionItem
+                key={team.slug}
+                team={team}
+                isKeyed={keyedTeams.has(team.id)}
+                disabled={false}
+                onSelect={this.toggleSelection(true, {
+                  action: keyedTeams.has(team.id) ? 'unkey' : 'key',
+                  teamIds: [team.id],
+                  project,
+                  transactionName,
+                })}
+              />
+            ))}
+            {disabledTeams.map(team => (
+              <TeamKeyTransactionItem
+                key={team.slug}
+                team={team}
+                isKeyed={keyedTeams.has(team.id)}
+                disabled
+                onSelect={this.toggleSelection(true, {
+                  action: keyedTeams.has(team.id) ? 'unkey' : 'key',
+                  teamIds: [team.id],
+                  project,
+                  transactionName,
+                })}
+              />
+            ))}
+          </Fragment>
+        )}
+        {noAccessTeams.length > 0 && (
+          <Fragment>
+            <DropdownMenuHeader first={!hasTeamsWithAccess}>
+              {t('My Teams without Access')}
+            </DropdownMenuHeader>
+            {noAccessTeams.map(team => (
+              <TeamKeyTransactionItem key={team.slug} team={team} disabled />
+            ))}
+          </Fragment>
+        )}
       </DropdownContent>
     );
   }
@@ -229,9 +263,9 @@ class TeamKeyTransaction extends Component<Props, State> {
 
 type ItemProps = {
   team: Team;
-  isKeyed: boolean;
   disabled: boolean;
-  onSelect: () => void;
+  isKeyed?: boolean;
+  onSelect?: () => void;
 };
 
 function TeamKeyTransactionItem({team, isKeyed, disabled, onSelect}: ItemProps) {
@@ -243,9 +277,9 @@ function TeamKeyTransactionItem({team, isKeyed, disabled, onSelect}: ItemProps)
       stopPropagation
     >
       <MenuItemContent>
-        {team.name}
+        {team.slug}
         <ActionItem>
-          {disabled ? (
+          {!defined(isKeyed) ? null : disabled ? (
             t('Max %s', MAX_TEAM_KEY_TRANSACTIONS)
           ) : (
             <CheckboxFancy isChecked={isKeyed} />
@@ -330,7 +364,7 @@ const DropdownMenuHeader = styled(MenuHeader)<{first?: boolean}>`
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: ${space(1.5)} ${space(2)};
+  padding: ${space(1)} ${space(2)};
 
   background: ${p => p.theme.backgroundSecondary};
   ${p => p.first && 'border-radius: 2px'};

static/app/components/performance/teamKeyTransactionsManager.tsx

@@ -7,23 +7,15 @@ import {
 } from 'app/actionCreators/performance';
 import {Client} from 'app/api';
 import {t} from 'app/locale';
-import {Organization, Team} from 'app/types';
+import {Organization, Project, Team} from 'app/types';
 import withApi from 'app/utils/withApi';
 
-export type SelectionBase = {
+export type TeamSelection = {
   action: 'key' | 'unkey';
-  project: number;
+  project: Project;
   transactionName: string;
+  teamIds: string[];
 };
-export type MyTeamSelection = SelectionBase & {type: 'my teams'};
-export type TeamIdSelection = SelectionBase & {type: 'id'; teamId: string};
-export type TeamSelection = MyTeamSelection | TeamIdSelection;
-
-export function isMyTeamSelection(
-  selection: TeamSelection
-): selection is MyTeamSelection {
-  return selection.type === 'my teams';
-}
 
 export type TeamKeyTransactionManagerChildrenProps = {
   teams: Team[];
@@ -154,13 +146,9 @@ class UnwrappedProvider extends Component<Props> {
   handleToggleKeyTransaction = async (selection: TeamSelection) => {
     const {api, organization} = this.props;
     const {teamKeyTransactions} = this.state;
-    const {action, project, transactionName} = selection;
+    const {action, project, transactionName, teamIds} = selection;
     const isKeyTransaction = action === 'unkey';
 
-    const {teamIds} = isMyTeamSelection(selection)
-      ? this.toggleKeyTransactionForMyTeams()
-      : this.toggleKeyTransactionForTeam(selection);
-
     const teamIdSet = new Set(teamIds);
 
     const newTeamKeyTransactions = teamKeyTransactions.map(({team, count, keyed}) => {
@@ -174,7 +162,7 @@ class UnwrappedProvider extends Component<Props> {
           count: count - 1,
           keyed: keyed.filter(
             keyTransaction =>
-              keyTransaction.project_id !== String(project) ||
+              keyTransaction.project_id !== project.id ||
               keyTransaction.transaction !== transactionName
           ),
         };
@@ -185,7 +173,7 @@ class UnwrappedProvider extends Component<Props> {
           keyed: [
             ...keyed,
             {
-              project_id: String(project),
+              project_id: project.id,
               transaction: transactionName,
             },
           ],
@@ -198,7 +186,7 @@ class UnwrappedProvider extends Component<Props> {
         api,
         isKeyTransaction,
         organization.slug,
-        [project],
+        [project.id],
         transactionName,
         teamIds
       );
@@ -210,22 +198,6 @@ class UnwrappedProvider extends Component<Props> {
     }
   };
 
-  toggleKeyTransactionForMyTeams() {
-    const {teams} = this.props;
-
-    return {
-      teamIds: teams.filter(({isMember}) => isMember).map(({id}) => id),
-    };
-  }
-
-  toggleKeyTransactionForTeam(selection: TeamIdSelection) {
-    const {teamId} = selection;
-
-    return {
-      teamIds: [teamId],
-    };
-  }
-
   render() {
     const {teams} = this.props;
     const {isLoading, error} = this.state;

static/app/utils/discover/keyTransactionField.tsx

@@ -34,13 +34,13 @@ class KeyTransactionField extends Component<Props, State> {
     };
   }
 
-  getProjectId(): number | null {
+  getProjectId(): string | null {
     const {projects, projectSlug} = this.props;
     const project = projects.find(proj => proj.slug === projectSlug);
     if (!project) {
       return null;
     }
-    return parseInt(project.id, 10);
+    return project.id;
   }
 
   toggleKeyTransactionHandler = () => {

static/app/utils/discover/teamKeyTransactionField.tsx

@@ -33,7 +33,7 @@ type BaseProps = {
 
 type Props = BaseProps &
   TeamKeyTransactionManager.TeamKeyTransactionManagerChildrenProps & {
-    project: number;
+    project: Project;
     transactionName: string;
   };
 
@@ -45,7 +45,7 @@ function TeamKeyTransactionField({
   transactionName,
   ...props
 }: Props) {
-  const keyedTeams = getKeyedTeams(String(project), transactionName);
+  const keyedTeams = getKeyedTeams(project.id, transactionName);
 
   return (
     <TeamKeyTransaction
@@ -74,12 +74,11 @@ function TeamKeyTransactionFieldWrapper({
   ...props
 }: WrapperProps) {
   const project = projects.find(proj => proj.slug === projectSlug);
-  const projectId = project ? parseInt(project.id, 10) : null;
 
   // All these fields need to be defined in order to toggle a team key
   // transaction. Since they are not defined, just render a plain star
   // with no interactions.
-  if (!defined(projectId) || !defined(transactionName)) {
+  if (!defined(project) || !defined(transactionName)) {
     return <TitleStar keyedTeamsCount={Number(isKeyTransaction)} />;
   }
 
@@ -88,7 +87,7 @@ function TeamKeyTransactionFieldWrapper({
       {results => (
         <TeamKeyTransactionField
           isKeyTransaction={isKeyTransaction}
-          project={projectId}
+          project={project}
           transactionName={transactionName}
           {...props}
           {...results}

static/app/views/performance/transactionSummary/keyTransactionButton.tsx

@@ -99,7 +99,7 @@ class KeyTransactionButton extends Component<Props, State> {
   toggleKeyTransactionHandler = () => {
     const {eventView, api, organization, transactionName} = this.props;
     const {isKeyTransaction} = this.state;
-    const projects = eventView.project as number[];
+    const projects = eventView.project.map(String);
 
     trackAnalyticsEvent({
       eventName: 'Performance Views: Key Transaction toggle',

static/app/views/performance/transactionSummary/teamKeyTransactionButton.tsx

@@ -8,8 +8,10 @@ import TeamKeyTransactionComponent, {
 import * as TeamKeyTransactionManager from 'app/components/performance/teamKeyTransactionsManager';
 import {IconStar} from 'app/icons';
 import {t, tn} from 'app/locale';
-import {Organization, Team} from 'app/types';
+import {Organization, Project, Team} from 'app/types';
+import {defined} from 'app/utils';
 import EventView from 'app/utils/discover/eventView';
+import withProjects from 'app/utils/withProjects';
 import withTeams from 'app/utils/withTeams';
 
 /**
@@ -40,7 +42,7 @@ type BaseProps = {
 
 type Props = BaseProps &
   TeamKeyTransactionManager.TeamKeyTransactionManagerChildrenProps & {
-    project: number;
+    project: Project;
   };
 
 function TeamKeyTransactionButton({
@@ -50,7 +52,7 @@ function TeamKeyTransactionButton({
   transactionName,
   ...props
 }: Props) {
-  const keyedTeams = getKeyedTeams(String(project), transactionName);
+  const keyedTeams = getKeyedTeams(project.id, transactionName);
   return (
     <TeamKeyTransactionComponent
       counts={counts}
@@ -65,19 +67,26 @@ function TeamKeyTransactionButton({
 
 type WrapperProps = BaseProps & {
   eventView: EventView;
+  projects: Project[];
 };
 
 function TeamKeyTransactionButtonWrapper({
   eventView,
   organization,
   teams,
+  projects,
   ...props
 }: WrapperProps) {
   if (eventView.project.length !== 1) {
     return <TitleButton disabled keyedTeamsCount={0} />;
   }
 
-  const projectId = eventView.project[0];
+  const projectId = String(eventView.project[0]);
+  const project = projects.find(proj => proj.id === projectId);
+  if (!defined(project)) {
+    return <TitleButton disabled keyedTeamsCount={0} />;
+  }
+
   const userTeams = teams.filter(({isMember}) => isMember);
 
   return (
@@ -91,7 +100,7 @@ function TeamKeyTransactionButtonWrapper({
         {results => (
           <TeamKeyTransactionButton
             organization={organization}
-            project={projectId}
+            project={project}
             {...props}
             {...results}
           />
@@ -105,4 +114,4 @@ const StyledButton = styled(Button)`
   width: 180px;
 `;
 
-export default withTeams(TeamKeyTransactionButtonWrapper);
+export default withTeams(withProjects(TeamKeyTransactionButtonWrapper));

tests/js/spec/utils/discover/teamKeyTransactionField.spec.jsx

@@ -13,11 +13,11 @@ async function clickTeamKeyTransactionDropdown(wrapper) {
 
 describe('TeamKeyTransactionField', function () {
   const organization = TestStubs.Organization();
-  const project = TestStubs.Project();
   const teams = [
     TestStubs.Team({id: '1', slug: 'team1', name: 'Team 1'}),
     TestStubs.Team({id: '2', slug: 'team2', name: 'Team 2'}),
   ];
+  const project = TestStubs.Project({teams});
 
   beforeEach(function () {
     MockApiClient.clearMockResponses();
@@ -69,7 +69,7 @@ describe('TeamKeyTransactionField', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
       expect(entry.find('CheckboxFancy').props().isChecked).toBeTruthy();
     });
   });
@@ -121,7 +121,7 @@ describe('TeamKeyTransactionField', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
     });
     expect(entries.at(0).find('CheckboxFancy').props().isChecked).toBeTruthy();
     expect(entries.at(1).find('CheckboxFancy').props().isChecked).toBeFalsy();
@@ -171,7 +171,7 @@ describe('TeamKeyTransactionField', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
       expect(entry.find('CheckboxFancy').props().isChecked).toBeFalsy();
     });
   });
@@ -415,4 +415,53 @@ describe('TeamKeyTransactionField', function () {
 
     expect(deleteTeamKeyTransactionsMock).toHaveBeenCalledTimes(1);
   });
+
+  it('should render teams without access separately', async function () {
+    const myTeams = [...teams, TestStubs.Team({id: '3', slug: 'team3', name: 'Team 3'})];
+    TeamStore.loadInitialData(myTeams);
+
+    MockApiClient.addMockResponse({
+      method: 'GET',
+      url: `/organizations/${organization.slug}/key-transactions-list/`,
+      body: myTeams.map(({id}) => ({
+        team: id,
+        count: 0,
+        keyed: [],
+      })),
+    });
+
+    const wrapper = mountWithTheme(
+      <TeamKeyTransactionManager.Provider
+        organization={organization}
+        teams={myTeams}
+        selectedTeams={['myteams']}
+      >
+        <TeamKeyTransactionField
+          isKeyTransaction
+          organization={organization}
+          projectSlug={project.slug}
+          transactionName="transaction"
+        />
+      </TeamKeyTransactionManager.Provider>
+    );
+    await tick();
+    wrapper.update();
+
+    clickTeamKeyTransactionDropdown(wrapper);
+
+    const headers = wrapper.find('DropdownMenuHeader');
+    expect(headers.length).toEqual(2);
+    expect(headers.at(0).text()).toEqual('My Teams with Access');
+    expect(headers.at(1).text()).toEqual('My Teams without Access');
+
+    const entries = wrapper.find('DropdownMenuItem');
+    expect(entries.length).toEqual(3);
+    entries.forEach((entry, i) => {
+      expect(entry.text()).toEqual(myTeams[i].slug);
+    });
+    expect(entries.at(0).find('CheckboxFancy').exists()).toBeTruthy();
+    expect(entries.at(1).find('CheckboxFancy').exists()).toBeTruthy();
+    // this team does not have access so there is no checkbox
+    expect(entries.at(2).find('CheckboxFancy').exists()).toBeFalsy();
+  });
 });

tests/js/spec/views/performance/transactionSummary/teamKeyTransactionButton.spec.jsx

@@ -1,5 +1,6 @@
 import {mountWithTheme} from 'sentry-test/enzyme';
 
+import ProjectsStore from 'app/stores/projectsStore';
 import TeamStore from 'app/stores/teamStore';
 import EventView from 'app/utils/discover/eventView';
 import {MAX_TEAM_KEY_TRANSACTIONS} from 'app/utils/performance/constants';
@@ -13,11 +14,11 @@ async function clickTeamKeyTransactionDropdown(wrapper) {
 
 describe('TeamKeyTransactionButton', function () {
   const organization = TestStubs.Organization({features: ['performance-view']});
-  const project = TestStubs.Project();
   const teams = [
     TestStubs.Team({id: '1', slug: 'team1', name: 'Team 1'}),
     TestStubs.Team({id: '2', slug: 'team2', name: 'Team 2'}),
   ];
+  const project = TestStubs.Project({teams});
   const eventView = new EventView({
     id: '1',
     name: 'my query',
@@ -33,6 +34,7 @@ describe('TeamKeyTransactionButton', function () {
 
   beforeEach(function () {
     MockApiClient.clearMockResponses();
+    ProjectsStore.loadInitialData([project]);
     TeamStore.loadInitialData(teams);
   });
 
@@ -48,12 +50,15 @@ describe('TeamKeyTransactionButton', function () {
         })),
       },
       {
-        predicate: (_, options) =>
-          options.method === 'GET' &&
-          options.query.project.length === 1 &&
-          options.query.project[0] === project.id &&
-          options.query.team.length === 1 &&
-          options.query.team[0] === 'myteams',
+        predicate: (_, options) => {
+          return (
+            options.method === 'GET' &&
+            options.query.project.length === 1 &&
+            options.query.project[0] === project.id &&
+            options.query.team.length === 1 &&
+            options.query.team[0] === 'myteams'
+          );
+        },
       }
     );
 
@@ -104,7 +109,7 @@ describe('TeamKeyTransactionButton', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
       expect(entry.find('CheckboxFancy').props().isChecked).toBeTruthy();
     });
   });
@@ -146,7 +151,7 @@ describe('TeamKeyTransactionButton', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
     });
     expect(entries.at(0).find('CheckboxFancy').props().isChecked).toBeTruthy();
     expect(entries.at(1).find('CheckboxFancy').props().isChecked).toBeFalsy();
@@ -185,7 +190,7 @@ describe('TeamKeyTransactionButton', function () {
     const entries = wrapper.find('DropdownMenuItem');
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
       expect(entry.find('CheckboxFancy').props().isChecked).toBeFalsy();
     });
   });
@@ -435,7 +440,7 @@ describe('TeamKeyTransactionButton', function () {
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
       expect(entry.props().disabled).toBeTruthy();
-      expect(entry.text()).toEqual(`${teams[i].name}Max ${MAX_TEAM_KEY_TRANSACTIONS}`);
+      expect(entry.text()).toEqual(`${teams[i].slug}Max ${MAX_TEAM_KEY_TRANSACTIONS}`);
     });
   });
 
@@ -472,7 +477,7 @@ describe('TeamKeyTransactionButton', function () {
     expect(entries.length).toBe(2);
     entries.forEach((entry, i) => {
       expect(entry.props().disabled).toBeFalsy();
-      expect(entry.text()).toEqual(teams[i].name);
+      expect(entry.text()).toEqual(teams[i].slug);
       expect(entry.find('CheckboxFancy').props().isChecked).toBeTruthy();
     });
   });