Merge pull request #86 from sbv-world-health-org-metrics/ajhenry/head…

…er-filters

Overhaul table to include filters and better sorting

who-metrics-ui/.eslintrc.js

@@ -63,6 +63,7 @@ const baseConfig = {
   },
   ignorePatterns: ["*__generated__*"],
   rules: {
+    "prettier/prettier": 0, // We use prettier for formatting instead of ESLint
     "import/no-unresolved": [
       "error",
       {

who-metrics-ui/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2
+}

who-metrics-ui/.vscode/launch.json

@@ -0,0 +1,28 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "serverReadyAction": {
+        "pattern": "- Local:.+(https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

who-metrics-ui/package.json

@@ -29,11 +29,11 @@
     "next-auth": "^4.19.2",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.31",
-    "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",
+    "react-tiny-popover": "^8.0.4",
     "server-only": "^0.0.1",
     "styled-components": "^5.3.11",
     "tailwindcss": "^3.2.7",
@@ -51,6 +51,7 @@
     "eslint-plugin-github": "^4.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-primer-react": "^3.0.0",
-    "eslint-plugin-react": "^7.32.2"
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "^3.2.4"
   }
 }

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

@@ -0,0 +1,63 @@
+'use client';
+
+import {
+  Tab,
+  TabGroup,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Text,
+  Title
+} from '@tremor/react';
+
+import logo from '@/images/who-logo-wide.svg';
+import { Box, useTheme as primerUseTheme } from '@primer/react';
+import Image from 'next/image';
+
+import { useTheme } from 'next-themes';
+import data from '../data/data.json';
+import RepositoriesTable from './RepositoriesTable';
+
+export const OrganizationSheet = () => {
+  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 h-full flex flex-col">
+      <Box
+        className="flex"
+        sx={{ flexDirection: 'row', gap: 4, alignItems: 'center', mb: 1 }}
+      >
+        <Image
+          className="block h-8 w-auto"
+          src={logo}
+          height={50}
+          width={150}
+          alt="World Health Organization logo"
+        />
+        <Title>{data.orgInfo.name} Open Source Dashboard</Title>
+      </Box>
+      <Text>
+        This project includes metrics about the Open Source repositories for the
+        {data.orgInfo.name}.
+      </Text>
+      <TabGroup className="mt-6 flex-1 flex flex-col">
+        <TabList>
+          <Tab>Repositories</Tab>
+        </TabList>
+        <TabPanels className="flex-1 flex flex-col">
+          <TabPanel className="flex-1">
+            <RepositoriesTable />
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </main>
+  );
+};