ref(js): Remove organization.projects from MissingProjectMembership (#28750)

static/app/components/projects/missingProjectMembership.tsx

@@ -18,30 +18,23 @@ import EmptyMessage from 'app/views/settings/components/emptyMessage';
 type Props = {
   api: Client;
   organization: Organization;
-  projectSlug?: string;
+  project?: Project | null;
 };
 
 type State = {
   loading: boolean;
   error: boolean;
   team: string | null;
-  project?: Project;
+  project?: Project | null;
 };
 
 class MissingProjectMembership extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    const {organization, projectSlug} = this.props;
-    const project = organization.projects?.find(p => p.slug === projectSlug);
-
-    this.state = {
-      loading: false,
-      error: false,
-      project,
-      team: '',
-    };
-  }
+  state: State = {
+    loading: false,
+    error: false,
+    project: this.props.project,
+    team: '',
+  };
 
   joinTeam(teamSlug: string) {
     this.setState({
@@ -213,6 +206,4 @@ const DisabledLabel = styled('div')`
   overflow: hidden;
 `;
 
-export {MissingProjectMembership};
-
 export default withApi(MissingProjectMembership);

static/app/views/organizationGroupDetails/groupDetails.tsx

@@ -442,7 +442,7 @@ class GroupDetails extends React.Component<Props, State> {
     const {projects, location} = this.props;
     const projectId = location.query.project;
 
-    const projectSlug = projects.find(proj => proj.id === projectId)?.slug;
+    const project = projects.find(proj => proj.id === projectId);
 
     switch (this.state.errorType) {
       case ERROR_TYPES.GROUP_NOT_FOUND:
@@ -454,7 +454,7 @@ class GroupDetails extends React.Component<Props, State> {
         return (
           <MissingProjectMembership
             organization={this.props.organization}
-            projectSlug={projectSlug}
+            project={project}
           />
         );
       default:

static/app/views/projectDetail/projectDetail.tsx

@@ -188,10 +188,7 @@ class ProjectDetail extends AsyncView<Props, State> {
 
     return (
       <PageContent>
-        <MissingProjectMembership
-          organization={organization}
-          projectSlug={project.slug}
-        />
+        <MissingProjectMembership organization={organization} project={project} />
       </PageContent>
     );
   }

static/app/views/projects/projectContext.tsx

@@ -239,7 +239,9 @@ class ProjectContext extends Component<Props, State> {
   }
 
   renderBody() {
+    const {children, organization} = this.props;
     const {error, errorType, loading, project} = this.state;
+
     if (loading) {
       return (
         <div className="loading-full-layout">
@@ -249,8 +251,6 @@ class ProjectContext extends Component<Props, State> {
     }
 
     if (!error && project) {
-      const {children} = this.props;
-
       return typeof children === 'function' ? children({project}) : children;
     }
 
@@ -269,10 +269,7 @@ class ProjectContext extends Component<Props, State> {
         // out into a reusable missing access error component
         return (
           <ErrorWrapper>
-            <MissingProjectMembership
-              organization={this.props.organization}
-              projectSlug={project?.slug}
-            />
+            <MissingProjectMembership organization={organization} project={project} />
           </ErrorWrapper>
         );
       default: