CV2-5978 convert DrawerNavigation to relay modern

src/app/components/drawer/DrawerNavigation.js

@@ -1,29 +1,19 @@
 import React from 'react';
 import Relay from 'react-relay/classic';
+import { QueryRenderer, graphql } from 'react-relay/compat';
+import Drawer from '@material-ui/core/Drawer';
 import DrawerRail from './DrawerRail';
-import DrawerNavigationComponent from './DrawerNavigationComponent';
-import FindPublicTeamRoute from '../../relay/FindPublicTeamRoute';
-import teamPublicFragment from '../../relay/teamPublicFragment';
-
-const DrawerNavigationContainer = Relay.createContainer(DrawerNavigationComponent, {
-  fragments: {
-    team: () => teamPublicFragment,
-  },
-});
-
-const DrawerRailContainer = Relay.createContainer(DrawerRail, {
-  fragments: {
-    team: () => teamPublicFragment,
-  },
-});
+import ErrorBoundary from '../error/ErrorBoundary';
+import DrawerContent from './index.js';
+import styles from './Drawer.module.css';
 
 const getBooleanPref = (key, fallback) => {
   const inStore = window.storage.getValue(key);
   if (inStore === null) return fallback;
   return (inStore === 'true'); // we are testing against the string value of 'true' because `localStorage` only stores string values, and casts `true` as `'true'`
 };
 
-const DrawerNavigation = (props) => {
+const DrawerNavigation = (parentProps) => {
   const [drawerOpen, setDrawerOpen] = React.useState(getBooleanPref('drawer.isOpen', true));
   const [drawerType, setDrawerType] = React.useState('tipline');
 
@@ -33,44 +23,58 @@ const DrawerNavigation = (props) => {
     }
   }, [drawerType]);
 
-  if (props.teamSlug) {
-    const { teamSlug } = props;
-
-    const route = new FindPublicTeamRoute({ teamSlug });
+  if (parentProps.teamSlug) {
+    const { teamSlug } = parentProps;
 
     return (
       <>
-        <Relay.RootContainer
-          Component={DrawerRailContainer}
-          renderFetched={
-            data => (<DrawerRailContainer
-              drawerOpen={drawerOpen}
-              drawerType={drawerType}
-              onDrawerOpenChange={setDrawerOpen}
-              onDrawerTypeChange={setDrawerType}
-              {...props}
-              {...data}
-            />)
-          }
-          route={route}
-        />
-        <Relay.RootContainer
-          Component={DrawerNavigationContainer}
-          renderFetched={
-            data => (<DrawerNavigationContainer
-              drawerOpen={drawerOpen}
-              drawerType={drawerType}
-              {...props}
-              {...data}
-            />)
-          }
-          route={route}
-        />
+        <ErrorBoundary component="DrawerNavigation">
+          <QueryRenderer
+            environment={Relay.Store}
+            query={graphql`
+              query DrawerNavigationQuery($teamSlug: String!) {
+                find_public_team(slug: $teamSlug) {
+                  ...DrawerRail_team
+                }
+              }
+            `}
+            render={({ error, props }) => {
+              if (!error && props) {
+                return (
+                  <>
+                    <DrawerRail
+                      currentUserIsMember={parentProps.currentUserIsMember}
+                      drawerOpen={drawerOpen}
+                      drawerType={drawerType}
+                      team={props.find_public_team}
+                      onDrawerOpenChange={setDrawerOpen}
+                      onDrawerTypeChange={setDrawerType}
+                    />
+                    <Drawer
+                      anchor="left"
+                      className={[styles.drawer, drawerOpen ? styles.drawerOpen : styles.drawerClosed].join(' ')}
+                      open={Boolean(drawerOpen)}
+                      variant="persistent"
+                    >
+                      {parentProps.currentUserIsMember ? (
+                        <DrawerContent drawerType={drawerType} />
+                      ) : null }
+                    </Drawer>
+                  </>
+                );
+              }
+              return null;
+            }}
+            variables={{
+              teamSlug,
+            }}
+          />
+        </ErrorBoundary>
       </>
     );
   }
 
-  return <><DrawerRail {...props} /><DrawerNavigationComponent {...props} /></>;
+  return <><DrawerRail {...parentProps} /></>;
 };
 
 export default DrawerNavigation;

src/app/components/drawer/DrawerRail.js

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 import { injectIntl, defineMessages } from 'react-intl';
+import { createFragmentContainer, graphql } from 'react-relay/compat';
 import cx from 'classnames/bind';
 import Tooltip from '../cds/alerts-and-prompts/Tooltip';
 import TeamAvatar from '../team/TeamAvatar';
@@ -147,7 +148,7 @@ const DrawerRail = ({
                 <div className={styles.railIconLink}>
                   <ChevronLeftIcon />
                 </div>
-                <TeamAvatar className={styles.teamLogo} size="44px" team={team} />
+                <TeamAvatar className={styles.teamLogo} size="44px" team={{ avatar: team.avatar }} />
               </button>
             </Tooltip>
             <ContentFilterControls />
@@ -303,4 +304,10 @@ DrawerRail.propTypes = {
   onDrawerTypeChange: PropTypes.func.isRequired,
 };
 
-export default injectIntl(DrawerRail);
+export default createFragmentContainer(injectIntl(DrawerRail), graphql`
+  fragment DrawerRail_team on PublicTeam {
+    slug
+    private
+    avatar
+  }
+`);