Home Explore Help
Sign In
SMusatov
/
sentry
mirror of https://github.com/getsentry/sentry
1
0
Fork 0
Files
Browse Source

ref(js): Move Sidebar component to OrganizationDetails (#63998)

Trying to break up this component so that I can give these better names.
The `OrganizationLayout` component's real responsibility is to make sure
the organization is loaded before rendering children. Ideally, we can
rename it to something better and have the `OrganizationDetails` be
renamed to `OrganizationLayout`
Evan Purkhiser 1 year ago
parent
2987f05a5d
commit
668a544638
2 changed files with 18 additions and 28 deletions
Split View Show Diff Stats
  1. 5 1
      static/app/views/organizationDetails/index.tsx
  2. 13 27
      static/app/views/organizationLayout.tsx

+ 5 - 1
static/app/views/organizationDetails/index.tsx
View File 

@@ -1,4 +1,6 @@
 
+import Sidebar from 'sentry/components/sidebar';
 
 import useRouteAnalyticsHookSetup from 'sentry/utils/routeAnalytics/useRouteAnalyticsHookSetup';
 
+import useOrganization from 'sentry/utils/useOrganization';
 
 import OrganizationLayout from 'sentry/views/organizationLayout';
 
 
 import Body from './body';
 
@@ -9,9 +11,11 @@ interface Props {
 
 
 function OrganizationDetails({children}: Props) {
 
   useRouteAnalyticsHookSetup();
 
+  const organization = useOrganization({allowNull: true});
 
 
   return (
 
-    <OrganizationLayout includeSidebar>
 
+    <OrganizationLayout>
 
+      <Sidebar organization={organization ?? undefined} />
 
       <Body>{children}</Body>
 
     </OrganizationLayout>
 
   );

+ 13 - 27
static/app/views/organizationLayout.tsx
View File 

@@ -1,4 +1,3 @@
 
-import {Fragment} from 'react';
 
 import styled from '@emotion/styled';
 
 
 import {Alert} from 'sentry/components/alert';
 
@@ -6,7 +5,6 @@ import HookOrDefault from 'sentry/components/hookOrDefault';
 
 import LoadingError from 'sentry/components/loadingError';
 
 import LoadingTriangle from 'sentry/components/loadingTriangle';
 
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 
-import Sidebar from 'sentry/components/sidebar';
 
 import {ORGANIZATION_FETCH_ERROR_TYPES} from 'sentry/constants';
 
 import {t} from 'sentry/locale';
 
 import OrganizationStore from 'sentry/stores/organizationStore';
 
@@ -17,10 +15,6 @@ import {useEnsureOrganization} from './organizationContext';
 
 
 interface OrganizationLayoutProps {
 
   children: React.ReactNode;
 
-  /**
 
-   * Render the sidebar when possible if enabled
 
-   */
 
-  includeSidebar: boolean;
 
 }
 
 
 const OrganizationHeader = HookOrDefault({
 
@@ -30,7 +24,7 @@ const OrganizationHeader = HookOrDefault({
 
 /**
 
  * Renders the organization page layout
 
  */
 
-function OrganizationLayout({includeSidebar, children}: OrganizationLayoutProps) {
 
+function OrganizationLayout({children}: OrganizationLayoutProps) {
 
   const {organization, loading, error, errorType} = useLegacyStore(OrganizationStore);
 
   useEnsureOrganization();
 
 
@@ -38,22 +32,12 @@ function OrganizationLayout({includeSidebar, children}: OrganizationLayoutProps)
 
     return <LoadingTriangle>{t('Loading data for your organization.')}</LoadingTriangle>;
 
   }
 
 
-  const mainBody = (
 
-    <SentryDocumentTitle noSuffix title={organization?.name ?? 'Sentry'}>
 
-      <div className="app">
 
-        {organization && <OrganizationHeader organization={organization} />}
 
-        {includeSidebar && <Sidebar organization={organization ?? undefined} />}
 
-        {children}
 
-      </div>
 
-    </SentryDocumentTitle>
 
-  );
 
-
 
   if (error) {
 
     const errorBody =
 
       errorType === ORGANIZATION_FETCH_ERROR_TYPES.ORG_NO_ACCESS ? (
 
-        // We can still render when an org can't be loaded due to 401. The
 
-        // backend will handle redirects when this is a problem.
 
-        mainBody
 
+        <Alert type="error" data-test-id="org-access-error">
 
+          {t('You do not have access to this organization.')}
 
+        </Alert>
 
       ) : errorType === ORGANIZATION_FETCH_ERROR_TYPES.ORG_NOT_FOUND ? (
 
         <Alert type="error" data-test-id="org-loading-error">
 
           {t('The organization you were looking for was not found.')}
 
@@ -62,15 +46,17 @@ function OrganizationLayout({includeSidebar, children}: OrganizationLayoutProps)
 
         <LoadingError />
 
       );
 
 
-    return (
 
-      <Fragment>
 
-        {includeSidebar && <Sidebar organization={organization ?? undefined} />}
 
-        <ErrorWrapper>{errorBody}</ErrorWrapper>
 
-      </Fragment>
 
-    );
 
+    return <ErrorWrapper>{errorBody}</ErrorWrapper>;
 
   }
 
 
-  return mainBody;
 
+  return (
 
+    <SentryDocumentTitle noSuffix title={organization?.name ?? 'Sentry'}>
 
+      <div className="app">
 
+        {organization && <OrganizationHeader organization={organization} />}
 
+        {children}
 
+      </div>
 
+    </SentryDocumentTitle>
 
+  );
 
 }
 
 
 const ErrorWrapper = styled('div')`