Fix Sites View Layout (& CI updates WIP)

.github/workflows/yarn_test.yaml

@@ -29,3 +29,21 @@ jobs:
       run: |
         cd apps/nowcasting-app
         yarn start & sleep 5 && yarn test --coverage --coverageDirectory=../..
+      env:
+        AUTH0_AUDIENCE: ${{ secrets.AUTH0_AUDIENCE }}
+        AUTH0_BASE_URL: ${{ secrets.AUTH0_BASE_URL }}
+        AUTH0_CLIENT_ID: ${{ secrets.AUTH0_CLIENT_ID }}
+        AUTH0_CLIENT_SECRET: ${{ secrets.AUTH0_CLIENT_SECRET }}
+        AUTH0_DOMAIN: ${{ secrets.AUTH0_DOMAIN }}
+        AUTH0_ISSUER_BASE_URL: ${{ secrets.AUTH0_ISSUER_BASE_URL }}
+        AUTH0_SCOPE: ${{ secrets.AUTH0_SCOPE }}
+        AUTH0_SECRET: ${{ secrets.AUTH0_SECRET }}
+        NEXT_PUBLIC_API_PREFIX: ${{ secrets.NEXT_PUBLIC_API_PREFIX }}
+        NEXT_PUBLIC_AUTH0_AUDIENCE: ${{ secrets.NEXT_PUBLIC_AUTH0_AUDIENCE }}
+        NEXT_PUBLIC_AUTH0_CLIENT_ID: ${{ secrets.NEXT_PUBLIC_AUTH0_CLIENT_ID }}
+        NEXT_PUBLIC_AUTH0_DOMAIN: ${{ secrets.NEXT_PUBLIC_AUTH0_DOMAIN }}
+        NEXT_PUBLIC_AUTH0_PASSWORD: ${{ secrets.NEXT_PUBLIC_AUTH0_PASSWORD }}
+        NEXT_PUBLIC_AUTH0_SCOPE: ${{ secrets.NEXT_PUBLIC_AUTH0_SCOPE }}
+        NEXT_PUBLIC_AUTH0_USERNAME: ${{ secrets.NEXT_PUBLIC_AUTH0_USERNAME }}
+
+

.husky/pre-commit

@@ -1,6 +1,15 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-cd apps/nowcasting-app
+cd apps/nowcasting-app || exit
 yarn lint
-yarn test
+
+# check if the server is already running and save the boolean result
+serverRunning=$(lsof -t -i :3002)
+# if the server is running, just run the tests and don't start the server
+if [ -z "$serverRunning" ]; then
+  yarn test
+else
+  # if the server isn't running, start it, run the tests, and then kill the server after the tests are done
+  yarn dev & yarn test && lsof -t -i :3002 | xargs kill
+fi

apps/nowcasting-app/components/charts/solar-site-view/solar-site-chart.tsx

@@ -324,30 +324,38 @@ const SolarSiteChart: FC<{
           </div>
         )}
 
-        <div className="flex-1 flex flex-col">
+        <div className="flex-1 flex flex-col overflow-y-scroll relative">
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.NATIONAL) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"National"}
             tableData={Array.from(aggregatedSitesData.national.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.REGION) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.REGION) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"Region"}
             tableData={Array.from(aggregatedSitesData.regions.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.GSP) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.GSP) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"GSP"}
             tableData={Array.from(aggregatedSitesData.gsps.values())}
           />
           <AggregatedDataTable
-            className={currentAggregation(AGGREGATION_LEVELS.SITE) ? "" : "hidden"}
+            className={`absolute inset-0 overflow-y-scroll pb-16 ${
+              currentAggregation(AGGREGATION_LEVELS.SITE) ? "z-10" : "z-0 opacity-0"
+            }`}
             title={"Sites"}
             tableData={Array.from(aggregatedSitesData.sites.values())}
           />
         </div>
       </div>
-      <div className="absolute bottom-0 left-0 right-0 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
+      <div className="absolute bottom-0 left-0 right-0 z-10 flex flex-none justify-between align-items:baseline px-4 text-xs tracking-wider text-ocf-gray-300 py-3 bg-mapbox-black-500 overflow-y-visible">
         <div
           className={`flex flex-col lg:flex-row flex-initial gap-x-6 justify-around max-w-2xl overflow-x-auto`}
         >

apps/nowcasting-app/components/charts/solar-site-view/solar-site-tables.tsx

@@ -29,7 +29,7 @@ import { formatISODateString } from "../../helpers/utils";
 const TableHeader: React.FC<{ text: string }> = ({ text }) => {
   return (
     <div
-      className="sticky flex flex-row bg-ocf-sites-100
+      className="sticky top-0 z-10 flex flex-row bg-ocf-sites-100
             justify-between"
     >
       <div className="ml-10 w-80">
@@ -81,7 +81,7 @@ const TableData: React.FC<TableDataProps> = ({ rows }) => {
 
   return (
     <>
-      <div className="flex-1 overflow-y-scroll">
+      <div className="flex-1">
         {rows?.sort(sortFn).map((site) => {
           const mostAccurateGeneration = site.actualPV || site.expectedPV;
           return (

apps/nowcasting-app/components/side-layout/index.tsx

@@ -46,7 +46,7 @@ const SideLayout: FC<SideLayoutProps> = ({
       >
         <div className={`min-h-full max-h-full flex flex-col overflow-y-scroll`}>{children}</div>
       </div>
-      <div className="absolute bottom-12 -right-4 h-10">
+      <div className="absolute bottom-12 -right-4 h-10 z-20">
         <ExpandButton isOpen={isOpen} onClick={() => setIsOpen((o) => !o)} />
       </div>