Move Metrics component to Relay Hooks (#508)

Author: fkorotkov

schema.gql

@@ -343,7 +343,7 @@ scalar Int
 type MetricsChart {
   title: String!
   points: [TimePoint]!
-  dataUnits: String!
+  dataUnits: String
 }
 
 input MetricsQueryParameters {

src/App.tsx

@@ -6,6 +6,7 @@ import { createTheme, StyledEngineProvider, Theme, ThemeProvider } from '@mui/ma
 import CirrusFavicon from './components/common/CirrusFavicon';
 import { CssBaseline } from '@mui/material';
 import { useRecoilValue } from 'recoil';
+import * as Sentry from '@sentry/react';
 
 declare module '@mui/styles/defaultTheme' {
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -22,7 +23,9 @@ export default function App(): JSX.Element {
       <ThemeProvider theme={theme}>
         <CirrusFavicon />
         <CssBaseline />
-        <Routes />
+        <Sentry.ErrorBoundary>
+          <Routes />
+        </Sentry.ErrorBoundary>
       </ThemeProvider>
     </StyledEngineProvider>
   );

src/components/common/AccountSwitch.tsx

@@ -44,7 +44,11 @@ const AccountsSwitch = ({ viewer }: AccountSwitchProps) => {
       </Button>
       <Menu anchorEl={menuAnchorEl} open={menuOpen} onClose={handleMenuClose}>
         {viewer.relatedOwners.map(viewer => {
-          return <MenuItem onClick={e => handleMenuItemClick(e, viewer.name)}>{viewer.name}</MenuItem>;
+          return (
+            <MenuItem key={viewer.name} onClick={e => handleMenuItemClick(e, viewer.name)}>
+              {viewer.name}
+            </MenuItem>
+          );
         })}
       </Menu>
     </>

src/components/metrics/MetricsChart.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { graphql } from 'babel-plugin-relay/macro';
 import Typography from '@mui/material/Typography';
 import { makeStyles } from '@mui/styles';
-import { createFragmentContainer } from 'react-relay';
+import { useFragment } from 'react-relay';
 import 'react-vis/dist/style.css';
 import { FlexibleWidthXYPlot, Hint, LineSeries, VerticalGridLines, XAxis, YAxis } from 'react-vis';
 import Chip from '@mui/material/Chip';
 import { formatDuration } from '../../utils/time';
-import { MetricsChart_chart } from './__generated__/MetricsChart_chart.graphql';
+import { MetricsChart_chart$key } from './__generated__/MetricsChart_chart.graphql';
 
 const useStyles = makeStyles(theme => {
   return {
@@ -16,7 +16,7 @@ const useStyles = makeStyles(theme => {
 });
 
 interface Props {
-  chart: MetricsChart_chart;
+  chart: MetricsChart_chart$key;
 }
 
 function intervals(intervalIncrement, maxValue) {
@@ -29,32 +29,48 @@ function intervals(intervalIncrement, maxValue) {
   return result;
 }
 
-function MetricsChart(props: Props) {
+export default function MetricsChart(props: Props) {
   let [hoveredPointIndex, setHoveredPointIndex] = useState(null);
-  let { chart } = props;
   let classes = useStyles();
+  let chart = useFragment(
+    graphql`
+      fragment MetricsChart_chart on MetricsChart {
+        title
+        dataUnits
+        points {
+          date {
+            year
+            month
+            day
+          }
+          value
+        }
+      }
+    `,
+    props.chart,
+  );
 
   function _onNearestX(value, { index }) {
     setHoveredPointIndex(index);
   }
 
   function formatValue(value) {
-    if (props.chart.dataUnits === 'seconds') {
+    if (chart.dataUnits === 'seconds') {
       return formatDuration(value);
     }
     return value;
   }
 
   function intermediateValues() {
-    let points = props.chart.points || [];
+    let points = chart.points || [];
     let maxValue = 0;
     for (let point of points) {
       if (maxValue < point.value) {
         maxValue = point.value;
       }
     }
 
-    if (props.chart.dataUnits === 'seconds') {
+    if (chart.dataUnits === 'seconds') {
       if (maxValue < 60) return null;
       // 10 minutes
       if (maxValue < 10 * 60) return intervals(60, maxValue);
@@ -118,20 +134,3 @@ function MetricsChart(props: Props) {
     </div>
   );
 }
-
-export default createFragmentContainer(MetricsChart, {
-  chart: graphql`
-    fragment MetricsChart_chart on MetricsChart {
-      title
-      dataUnits
-      points {
-        date {
-          year
-          month
-          day
-        }
-        value
-      }
-    }
-  `,
-});

src/components/metrics/RepositoryMetricsCharts.tsx

@@ -1,41 +1,27 @@
 import React from 'react';
 
-import { QueryRenderer } from 'react-relay';
+import { useLazyLoadQuery } from 'react-relay';
 import { graphql } from 'babel-plugin-relay/macro';
-
-import environment from '../../createRelayEnvironment';
 import MetricsChart from './MetricsChart';
-import CirrusLinearProgress from '../common/CirrusLinearProgress';
-import { RepositoryMetricsChartsQuery } from './__generated__/RepositoryMetricsChartsQuery.graphql';
+import {
+  RepositoryMetricsChartsQuery,
+  RepositoryMetricsChartsQueryVariables,
+} from './__generated__/RepositoryMetricsChartsQuery.graphql';
 
-const RepositoryMetricsCharts = props => (
-  <QueryRenderer<RepositoryMetricsChartsQuery>
-    environment={environment}
-    variables={{
-      repositoryId: props.repositoryId,
-      parameters: props.parameters,
-    }}
-    query={graphql`
+export default function RepositoryMetricsCharts(props: RepositoryMetricsChartsQueryVariables) {
+  const response = useLazyLoadQuery<RepositoryMetricsChartsQuery>(
+    graphql`
       query RepositoryMetricsChartsQuery($repositoryId: ID!, $parameters: MetricsQueryParameters!) {
         repository(id: $repositoryId) {
           metrics(parameters: $parameters) {
             ...MetricsChart_chart
           }
         }
       }
-    `}
-    render={({ error, props }) => {
-      if (error) {
-        console.log(error);
-      }
-      if (!props) {
-        return <CirrusLinearProgress />;
-      }
-      let metrics = props.repository.metrics || [];
-      let chartComponents = metrics.map((chart, index) => <MetricsChart key={index} chart={chart} />);
-      return <div>{chartComponents}</div>;
-    }}
-  />
-);
-
-export default RepositoryMetricsCharts;
+    `,
+    props,
+  );
+  let metrics = response.repository.metrics || [];
+  let chartComponents = metrics.map((chart, index) => <MetricsChart key={index} chart={chart} />);
+  return <div>{chartComponents}</div>;
+}