ref(ui): Swap orgId/orgSlug in projectContext (#54605)

static/app/views/projects/projectContext.spec.tsx

@@ -40,8 +40,7 @@ describe('projectContext component', function () {
         loadingProjects={false}
         projects={[]}
         organization={org}
-        orgId={org.slug}
-        projectId={project.slug}
+        projectSlug={project.slug}
       >
         {null}
       </ProjectContext>
@@ -72,8 +71,7 @@ describe('projectContext component', function () {
         projects={[]}
         loadingProjects={false}
         organization={org}
-        orgId={org.slug}
-        projectId={project.slug}
+        projectSlug={project.slug}
       >
         {null}
       </ProjectContext>
@@ -100,8 +98,7 @@ describe('projectContext component', function () {
         projects={[]}
         loadingProjects={false}
         organization={org}
-        orgId={org.slug}
-        projectId="new-slug"
+        projectSlug="new-slug"
       >
         {null}
       </ProjectContext>
@@ -124,8 +121,7 @@ describe('projectContext component', function () {
         loadingProjects={false}
         projects={[]}
         organization={org}
-        orgId={org.slug}
-        projectId={project.slug}
+        projectSlug={project.slug}
       >
         {null}
       </ProjectContext>
@@ -149,8 +145,7 @@ describe('projectContext component', function () {
         loadingProjects={false}
         api={new MockApiClient()}
         projects={[project]}
-        orgId={org.slug}
-        projectId={project.slug}
+        projectSlug={project.slug}
       >
         {null}
       </ProjectContext>

static/app/views/projects/projectContext.tsx

@@ -34,9 +34,8 @@ type Props = {
   api: Client;
   children: ((props: ChildFuncProps) => React.ReactNode) | React.ReactNode;
   loadingProjects: boolean;
-  orgId: string;
   organization: Organization;
-  projectId: string;
+  projectSlug: string;
   projects: Project[];
   /**
    * If true, this will not change `state.loading` during `fetchData` phase
@@ -92,7 +91,7 @@ class ProjectContext extends Component<Props, State> {
   }
 
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.projectId === this.props.projectId) {
+    if (nextProps.projectSlug === this.props.projectSlug) {
       return;
     }
 
@@ -102,7 +101,7 @@ class ProjectContext extends Component<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props, _prevState: State) {
-    if (prevProps.projectId !== this.props.projectId) {
+    if (prevProps.projectSlug !== this.props.projectSlug) {
       this.fetchData();
     }
 
@@ -154,13 +153,12 @@ class ProjectContext extends Component<Props, State> {
   }
 
   identifyProject() {
-    const {projects, projectId} = this.props;
-    const projectSlug = projectId;
+    const {projects, projectSlug} = this.props;
     return projects.find(({slug}) => slug === projectSlug) || null;
   }
 
   async fetchData() {
-    const {orgId, projectId, skipReload} = this.props;
+    const {organization, projectSlug, skipReload} = this.props;
     // we fetch core access/information from the global organization data
     const activeProject = this.identifyProject();
     const hasAccess = activeProject && activeProject.hasAccess;
@@ -175,7 +173,7 @@ class ProjectContext extends Component<Props, State> {
     if (activeProject && hasAccess) {
       setActiveProject(null);
       const projectRequest = this.props.api.requestPromise(
-        `/projects/${orgId}/${projectId}/`
+        `/projects/${organization.slug}/${projectSlug}/`
       );
 
       try {
@@ -197,7 +195,7 @@ class ProjectContext extends Component<Props, State> {
         });
       }
 
-      fetchOrgMembers(this.props.api, orgId, [activeProject.id]);
+      fetchOrgMembers(this.props.api, organization.slug, [activeProject.id]);
 
       return;
     }
@@ -217,7 +215,9 @@ class ProjectContext extends Component<Props, State> {
     // *does not exist* or the project has not yet been added to the store.
     // Either way, make a request to check for existence of the project.
     try {
-      await this.props.api.requestPromise(`/projects/${orgId}/${projectId}/`);
+      await this.props.api.requestPromise(
+        `/projects/${organization.slug}/${projectSlug}/`
+      );
     } catch (error) {
       this.setState({
         loading: false,

static/app/views/settings/project/projectSettingsLayout.tsx

@@ -47,7 +47,7 @@ function InnerProjectSettingsLayout({
 
 function ProjectSettingsLayout({organization, params, ...props}: Props) {
   return (
-    <ProjectContext orgId={organization.slug} projectId={params.projectId}>
+    <ProjectContext projectSlug={params.projectId}>
       {({project}) => (
         <InnerProjectSettingsLayout {...{params, project, organization, ...props}} />
       )}

static/app/views/settings/projectGeneralSettings/index.spec.tsx

@@ -252,7 +252,7 @@ describe('projectGeneralSettings', function () {
     });
 
     render(
-      <ProjectContext orgId={org.slug} projectId={project.slug}>
+      <ProjectContext projectSlug={project.slug}>
         <ProjectGeneralSettings
           {...routerProps}
           routes={[]}
@@ -286,7 +286,7 @@ describe('projectGeneralSettings', function () {
     });
 
     render(
-      <ProjectContext orgId={org.slug} projectId={project.slug}>
+      <ProjectContext projectSlug={project.slug}>
         <ProjectGeneralSettings
           {...routerProps}
           routes={[]}
@@ -328,7 +328,7 @@ describe('projectGeneralSettings', function () {
       });
 
       render(
-        <ProjectContext orgId={org.slug} projectId={project.slug}>
+        <ProjectContext projectSlug={project.slug}>
           <ProjectGeneralSettings
             {...routerProps}
             routes={[]}