Stop using React.FC, use CardHeader instead of Box
Signed-off-by: Fredrik Adelöw <freben@gmail.com>
This commit is contained in:
alde
+45
-63
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user