From 50ce122fca75f39cf96640e8b8f9ce4fd854bfcc Mon Sep 17 00:00:00 2001
From: alde <r.dybeck@gmail.com>
Date: Mon, 19 Apr 2021 15:07:20 -0400
Subject: [PATCH] Stop using React.FC, use CardHeader instead of Box
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .../CoverageHistoryChart.tsx                  | 108 ++++++++----------
 .../components/FileExplorer/CoverageRow.tsx   |   4 +-
 .../components/FileExplorer/FileContent.tsx   |   4 +-
 .../components/FileExplorer/FileExplorer.tsx  |  80 ++++++-------
 4 files changed, 87 insertions(+), 109 deletions(-)

diff --git a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
index 4f4f442315..f9927a17d3 100644
--- a/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
+++ b/plugins/code-coverage/src/components/CoverageHistoryChart/CoverageHistoryChart.tsx
@@ -19,9 +19,8 @@ import {
   Box,
   Card,
   CardContent,
+  CardHeader,
   makeStyles,
-  MenuItem,
-  Select,
   Typography,
 } from '@material-ui/core';
 import {
@@ -97,16 +96,10 @@ export const CoverageHistoryChart = () => {
 
   if (!valueHistory.history.length) {
     return (
-      <Box>
-        <Card>
-          <CardContent>
-            <Box mb={2} display="flex" justifyContent="space-between">
-              <Typography variant="h5">History</Typography>
-            </Box>
-            No coverage history found
-          </CardContent>
-        </Card>
-      </Box>
+      <Card>
+        <CardHeader title="History" />
+        <CardContent>No coverage history found</CardContent>
+      </Card>
     );
   }
 
@@ -128,58 +121,47 @@ export const CoverageHistoryChart = () => {
   const branchTrend = getTrendForCoverage('branch');
 
   return (
-    <Box>
-      <Card>
-        <CardContent>
-          <Box mb={2} display="flex" justifyContent="space-between">
-            <Typography variant="h5">History</Typography>
-            <Select>
-              <MenuItem>7</MenuItem>
-            </Select>
+    <Card>
+      <CardHeader title="History" />
+      <CardContent>
+        <Box px={6} display="flex">
+          <Box display="flex" mr={4}>
+            {getTrendIcon(lineTrend, classes)}
+            <Typography>
+              Current line: {latestCoverage.line.percentage}%<br />(
+              {Math.floor(lineTrend)}% change over {valueHistory.history.length}{' '}
+              builds)
+            </Typography>
           </Box>
-          <Box px={6} display="flex">
-            <Box display="flex" mr={4}>
-              {getTrendIcon(lineTrend, classes)}
-              <Typography>
-                Current line: {latestCoverage.line.percentage}%<br />(
-                {Math.floor(lineTrend)}% change over{' '}
-                {valueHistory.history.length} builds)
-              </Typography>
-            </Box>
-            <Box display="flex">
-              {getTrendIcon(branchTrend, classes)}
-              <Typography>
-                Current branch: {latestCoverage.branch.percentage}%<br />(
-                {Math.floor(branchTrend)}% change over{' '}
-                {valueHistory.history.length} builds)
-              </Typography>
-            </Box>
+          <Box display="flex">
+            {getTrendIcon(branchTrend, classes)}
+            <Typography>
+              Current branch: {latestCoverage.branch.percentage}%<br />(
+              {Math.floor(branchTrend)}% change over{' '}
+              {valueHistory.history.length} builds)
+            </Typography>
           </Box>
-          <ResponsiveContainer width="100%" height={300}>
-            <LineChart
-              data={valueHistory.history}
-              margin={{ right: 48, top: 32 }}
-            >
-              <CartesianGrid strokeDasharray="3 3" />
-              <XAxis dataKey="timestamp" />
-              <YAxis dataKey="line.percentage" />
-              <YAxis dataKey="branch.percentage" />
-              <Tooltip />
-              <Legend />
-              <Line
-                type="monotone"
-                dataKey="branch.percentage"
-                stroke="#8884d8"
-              />
-              <Line
-                type="monotone"
-                dataKey="line.percentage"
-                stroke="#82ca9d"
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </CardContent>
-      </Card>
-    </Box>
+        </Box>
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart
+            data={valueHistory.history}
+            margin={{ right: 48, top: 32 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="timestamp" />
+            <YAxis dataKey="line.percentage" />
+            <YAxis dataKey="branch.percentage" />
+            <Tooltip />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="branch.percentage"
+              stroke="#8884d8"
+            />
+            <Line type="monotone" dataKey="line.percentage" stroke="#82ca9d" />
+          </LineChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
   );
 };
diff --git a/plugins/code-coverage/src/components/FileExplorer/CoverageRow.tsx b/plugins/code-coverage/src/components/FileExplorer/CoverageRow.tsx
index b213ad05de..4af4fbbf4e 100644
--- a/plugins/code-coverage/src/components/FileExplorer/CoverageRow.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/CoverageRow.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React, { FC } from 'react';
+import React from 'react';
 
 // styles
 import { makeStyles } from '@material-ui/core';
@@ -65,7 +65,7 @@ type CodeRowProps = {
   lineContent: string;
   lineHits?: number | null;
 };
-const CodeRow: FC<CodeRowProps> = ({
+const CodeRow = ({
   lineNumber,
   lineContent,
   lineHits = null,
diff --git a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
index e4ade53f37..703489f587 100644
--- a/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/FileContent.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React from 'react';
 import { useApi } from '@backstage/core-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { useAsync } from 'react-use';
@@ -53,7 +53,7 @@ type FormattedLinesProps = {
   highlightedLines: string[];
   lineHits: Record<number, number>;
 };
-const FormattedLines: FC<FormattedLinesProps> = ({
+const FormattedLines = ({
   highlightedLines,
   lineHits,
 }: FormattedLinesProps) => {
diff --git a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
index da20ba0ed6..704edcdf15 100644
--- a/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
+++ b/plugins/code-coverage/src/components/FileExplorer/FileExplorer.tsx
@@ -26,9 +26,9 @@ import {
   Box,
   Card,
   CardContent,
+  CardHeader,
   Modal,
   Tooltip,
-  Typography,
 } from '@material-ui/core';
 import React, { Fragment, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';
@@ -244,46 +244,42 @@ export const FileExplorer = () => {
   }
 
   return (
-    <Box mt={8}>
-      <Card>
-        <CardContent>
-          <Box mb={2} display="flex" justifyContent="space-between">
-            <Typography variant="h5">Explore Files</Typography>
-          </Box>
-          <Box mb={2} display="flex">
-            {pathArray.map((pathElement, idx) => (
-              <Fragment key={pathElement || 'root'}>
-                <div
-                  role="button"
-                  tabIndex={idx}
-                  style={{
-                    color: `${idx !== lastPathElementIndex && 'lightblue'}`,
-                    cursor: `${idx !== lastPathElementIndex && 'pointer'}`,
-                  }}
-                  onKeyDown={() => moveUpIntoPath(pathElement)}
-                  onClick={() => moveUpIntoPath(pathElement)}
-                >
-                  {pathElement || 'root'}
-                </div>
-                <div>{'\u00A0/\u00A0'}</div>
-              </Fragment>
-            ))}
-          </Box>
-          <Table
-            emptyContent={<>No files found</>}
-            data={tableData || []}
-            columns={columns}
-          />
-          <Modal
-            open={modalOpen}
-            onClick={event => event.stopPropagation()}
-            onClose={() => setModalOpen(false)}
-            style={{ overflow: 'scroll' }}
-          >
-            <FileContent filename={curFile} coverage={fileCoverage} />
-          </Modal>
-        </CardContent>
-      </Card>
-    </Box>
+    <Card>
+      <CardHeader title="Explore Files" />
+      <CardContent>
+        <Box mb={2} display="flex">
+          {pathArray.map((pathElement, idx) => (
+            <Fragment key={pathElement || 'root'}>
+              <div
+                role="button"
+                tabIndex={idx}
+                style={{
+                  color: `${idx !== lastPathElementIndex && 'lightblue'}`,
+                  cursor: `${idx !== lastPathElementIndex && 'pointer'}`,
+                }}
+                onKeyDown={() => moveUpIntoPath(pathElement)}
+                onClick={() => moveUpIntoPath(pathElement)}
+              >
+                {pathElement || 'root'}
+              </div>
+              <div>{'\u00A0/\u00A0'}</div>
+            </Fragment>
+          ))}
+        </Box>
+        <Table
+          emptyContent={<>No files found</>}
+          data={tableData || []}
+          columns={columns}
+        />
+        <Modal
+          open={modalOpen}
+          onClick={event => event.stopPropagation()}
+          onClose={() => setModalOpen(false)}
+          style={{ overflow: 'scroll' }}
+        >
+          <FileContent filename={curFile} coverage={fileCoverage} />
+        </Modal>
+      </CardContent>
+    </Card>
   );
 };