Merge pull request #71 from sbv-world-health-org-metrics/update-dev-s…

…teps

Add Repositories Table

Makefile

@@ -40,4 +40,8 @@ metrics:
 
 test-go:
 	@echo "==> running Go tests <=="
-	CGO_ENABLED=1 go test -p 64 -race ./backend/...
+	CGO_ENABLED=1 cd backend && go test -p 64 -race ./...
+
+dev:
+	@echo "==> Generating data"
+	cd backend && go build -o ./bin/metrics ./cmd && cd .. && ./backend/bin/metrics && cd who-metrics-ui && npm i && npm run dev

README.md

@@ -62,11 +62,6 @@ Issue Project  [here](https://github.com/github/SI-skills-based-volunteering/iss
 
 ## Development in Codespaces
 
-### UI
-
-1. Run `cd who-metrics-ui && npm i`
-2. Run `npm run dev`
-
 <!-- TODO: Add min requirements and deployment steps -->
 ### Backend
 
@@ -81,3 +76,12 @@ make build
 ```
 
 This will generate a new `data.json` file in the UI directory which can be imported directly as part of the static build.
+
+### UI
+
+Run `make dev` to develop in the UI. This will:
+
+1. Build the backend project using the steps above
+1. Generate a new `data.json` file with the required data inside the frontend directory
+1. Run the Next development server
+

dev.vscode.env.example

@@ -1 +1,2 @@
-GITHUB_GRAPHQL_TOKEN="TOKEN"
+GRAPHQL_TOKEN="<YOUR TOKEN HERE>"
+ORGANIZATION_NAME="your_organization"

who-metrics-ui/.eslintrc.js

@@ -225,6 +225,7 @@ module.exports = {
       rules: {
         "i18n-text/no-en": "off",
         "filenames/match-regex": [2, "^[A-Z][a-zA-Z]+(.[a-z0-9-]+)?$"],
+        "import/extensions": "off",
       },
     },
     {

who-metrics-ui/package.json

@@ -32,6 +32,7 @@
     "prettier": "^2.8.4",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-data-grid": "^7.0.0-beta.41",
     "react-dom": "^18.2.0",
     "server-only": "^0.0.1",
     "styled-components": "^5.3.11",

who-metrics-ui/src/components/DashboardExample.tsx

@@ -1,61 +1,22 @@
 "use client";
 
 import {
-  Card,
-  Grid,
   Title,
   Text,
   Tab,
   TabList,
   TabGroup,
   TabPanel,
   TabPanels,
-  DeltaType,
 } from "@tremor/react";
 
-import { Box } from "@primer/react";
+import { Box, useTheme as primerUseTheme } from "@primer/react";
 import Image from "next/image";
 import logo from "@/images/who-logo-wide.svg";
-import { ChartView } from "./";
 
-import KpiCard from "./KpiCard";
-import { PerformanceHistoryTable } from "./PerformanceHistoryTable";
-
-type Kpi = {
-  title: string;
-  metric: string;
-  progress: number;
-  target: string;
-  delta: string;
-  deltaType: DeltaType;
-};
-
-const kpiData: Kpi[] = [
-  {
-    title: "Sales",
-    metric: "$ 12,699",
-    progress: 15.9,
-    target: "$ 80,000",
-    delta: "13.2%",
-    deltaType: "moderateIncrease",
-  },
-  {
-    title: "Profit",
-    metric: "$ 45,564",
-    progress: 36.5,
-    target: "$ 125,000",
-    delta: "23.9%",
-    deltaType: "increase",
-  },
-  {
-    title: "Customers",
-    metric: "1,072",
-    progress: 53.6,
-    target: "2,000",
-    delta: "10.1%",
-    deltaType: "moderateDecrease",
-  },
-];
+import RepositoriesTable from "./RepositoriesTable";
+import Data from "../data/data.json";
+import { useTheme } from "next-themes";
 
 export type DailyPerformance = {
   date: string;
@@ -92,6 +53,16 @@ export const performance: DailyPerformance[] = [
 ];
 
 export const DashboardExample = () => {
+  const { theme, systemTheme } = useTheme();
+  const { setColorMode } = primerUseTheme();
+  if (theme === "light" || theme === "dark" || theme === "auto") {
+    setColorMode(theme);
+  }
+
+  if (theme === "system" && systemTheme) {
+    setColorMode(systemTheme);
+  }
+
   return (
     <main className="px-18 py-18">
       <Box
@@ -103,39 +74,21 @@ export const DashboardExample = () => {
           src={logo}
           height={50}
           width={150}
-          alt="who logo"
+          alt="World Health Organization logo"
         />
-        <Title>Dashboard</Title>
+        <Title>{Data.orgInfo.name} Open Source Dashboard</Title>
       </Box>
-      <Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text>
+      <Text>
+        This project includes metrics about the Open Source repositories for the
+        {Data.orgInfo.name}.
+      </Text>
       <TabGroup className="mt-6">
         <TabList>
-          <Tab>Overview</Tab>
-          <Tab>Detail</Tab>
+          <Tab>Repositories</Tab>
         </TabList>
         <TabPanels>
           <TabPanel>
-            <Grid numItemsLg={3} className="mt-6 gap-6">
-              {kpiData.map((item) => (
-                <KpiCard
-                  key={item.title}
-                  title={item.title}
-                  metric={item.metric}
-                  progress={item.progress}
-                  target={item.target}
-                  delta={item.delta}
-                  deltaType={item.deltaType}
-                />
-              ))}
-            </Grid>
-            <div className="mt-6">
-              <Card>
-                <ChartView />
-              </Card>
-            </div>
-          </TabPanel>
-          <TabPanel>
-            <PerformanceHistoryTable />
+            <RepositoriesTable />
           </TabPanel>
         </TabPanels>
       </TabGroup>