refactor(RepositoryDetails):

Components/Breadcrumbs.jsx

@@ -0,0 +1,7 @@
+import {spacing} from "@material-ui/system";
+import styled from "styled-components";
+import {Breadcrumbs as MuiBreadcrumbs} from "@material-ui/core";
+
+export const Breadcrumbs = styled(MuiBreadcrumbs)(spacing);
+
+export default Breadcrumbs;

Components/Divider.jsx

@@ -0,0 +1,7 @@
+import {spacing} from "@material-ui/system";
+import {Divider as MuiDivider} from "@material-ui/core";
+import styled from "styled-components";
+
+export const Divider = styled(MuiDivider)(spacing);
+
+export default Divider;

Components/Paper.jsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import {Paper as MuiPaper} from "@material-ui/core";
+import {spacing} from "@material-ui/system";
+
+export const Paper = styled(MuiPaper)(spacing);
+
+export default Paper;

Components/index.js

@@ -0,0 +1,3 @@
+export {default as Paper} from "./Paper";
+export {default as Divider} from "./Divider";
+export {default as Breadcrumbs} from "./Breadcrumbs";

RepositoryDetails/Layout.jsx

@@ -0,0 +1,50 @@
+import {Grid, Link, Typography} from "@material-ui/core";
+import {Helmet} from "react-helmet";
+import {Link as RouterLink} from "react-router-dom";
+import {Breadcrumbs, Divider, Paper} from "../Components";
+import RepositoryInfo from "./RepositoryInfo";
+import SupersetChart from "../components/superset/SupersetChart";
+import SkeletonLoading from "./SkeletonLoading";
+
+const Layout = ({repository, selectedProject, reloadRepository, chartUrl}) => {
+    if (!repository) return <SkeletonLoading />;
+    return (
+        <>
+            <Helmet title={`Repository: ${repository.name}`} />
+            <Typography variant="h3" gutterBottom display="inline">
+                Repository: {repository.name}
+            </Typography>
+
+            <Breadcrumbs aria-label="Breadcrumb" mt={2}>
+                <Link component={RouterLink} to="/repositories">
+                    Repositories
+                </Link>
+
+                <Typography>{repository.name}</Typography>
+            </Breadcrumbs>
+
+            <Divider my={6} />
+
+            <Grid container spacing={6}>
+                <Grid item xs={12} xl={6}>
+                    <Paper p={6} mb={6}>
+                        <Typography variant="h4">Repository info</Typography>
+                        <RepositoryInfo
+                            project={selectedProject}
+                            repository={repository}
+                            onRepositoryUpdate={reloadRepository}
+                        />
+                    </Paper>
+                </Grid>
+                <Grid item xs={12} xl={6}>
+                    <Paper p={6} mb={6}>
+                        <Typography variant="h4">Languages</Typography>
+                        <SupersetChart chartUrl={chartUrl} />
+                    </Paper>
+                </Grid>
+            </Grid>
+        </>
+    );
+};
+
+export default Layout;

RepositoryDetails/RepositoryDetails.js

@@ -0,0 +1,33 @@
+import React from "react";
+import {useParams} from "react-router-dom";
+import {person_languages_url} from "../../utils/superset";
+import {useOne} from "../../context/OneContext";
+import {useProjectsRepositoriesRead} from "../../api-client/one-api";
+import Layout from "./Layout";
+
+const RepositoryDetails = () => {
+    const {selectedProject} = useOne();
+    const {id: repositoryId} = useParams();
+
+    const {data: repository, refetch: reloadRepository} =
+        useProjectsRepositoriesRead({
+            project_pk: selectedProject?.id,
+            repository_pk: repositoryId,
+            lazy: !selectedProject,
+        });
+
+    const chartUrl = repository
+        ? person_languages_url("repository", repository.name)
+        : undefined;
+
+    return (
+        <Layout
+            repository={repository}
+            selectedProject={selectedProject}
+            reloadRepository={reloadRepository}
+            chartUrl={chartUrl}
+        />
+    );
+};
+
+export default RepositoryDetails;

RepositoryDetails/RepositoryInfo.jsx

@@ -0,0 +1,20 @@
+import {Table, TableBody, TableCell, TableRow} from "@material-ui/core";
+import styled from "styled-components";
+
+const TableCellLabel = styled(TableCell)`
+    width: 200px;
+    text-align: right;
+`;
+
+const RepositoryInfo = ({repository}) => (
+    <Table>
+        <TableBody>
+            <TableRow>
+                <TableCellLabel variant="head">Name</TableCellLabel>
+                <TableCell>{repository.name}</TableCell>
+            </TableRow>
+        </TableBody>
+    </Table>
+);
+
+export default RepositoryInfo;

RepositoryDetails/SkeletonLoading.jsx

@@ -0,0 +1,6 @@
+//TODO: Skeleton loading to be implemented
+const SkeletonLoading = () => {
+    return <>Here will be skeleton loading for the repository details...</>;
+};
+
+export default SkeletonLoading;

RepositoryDetails/index.js

@@ -0,0 +1,3 @@
+import RepositoryDetails from "./RepositoryDetails";
+
+export default RepositoryDetails;