Merge pull request #22 from complexdatacollective/feature/docker-depl…

…oyment

Docker deployment

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

.eslintrc.cjs

@@ -25,6 +25,7 @@ const config = {
     'plugin:storybook/recommended',
     'prettier',
   ],
+  ignorePatterns: ['node_modules', 'lib', '*.stories.*', '*.test.*'],
   rules: {
     'no-process-env': 'error',
     'no-console': 'error',

.github/workflows/lint.yml

@@ -0,0 +1,55 @@
+name: Build
+
+on:
+  pull_request:
+    branches:
+      - '*'
+
+env:
+  SKIP_ENV_VALIDATION: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Generate prisma client
+        run: pnpm prisma generate
+
+      - uses: actions/cache@v3
+        name: Setup next cache
+        with:
+          path: |
+            ${{ env.STORE_PATH }}
+            ${{ github.workspace }}/.next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
+      - name: Run build
+        run: pnpm next build

.github/workflows/push.yml

@@ -0,0 +1,35 @@
+name: Build docker container
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+env:
+  SKIP_ENV_VALIDATION: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set env
+        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
+
+      - name: Build the production image
+        run: docker build -t fresco .
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Push the production image to the container registry
+        if: github.ref == 'refs/heads/master'
+        run: |
+          docker tag app ghcr.io/${{ github.repository }}:${{ env.RELEASE_VERSION }}
+          docker push ghcr.io/${{ github.repository }}:${{ env.RELEASE_VERSION }}

Dockerfile

@@ -0,0 +1,62 @@
+FROM node:18-alpine AS base
+RUN corepack enable
+ENV SKIP_ENV_VALIDATION=true
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+# Prisma stuff
+COPY prisma ./prisma
+# Install dependencies
+COPY package.json pnpm-lock.yaml* ./
+RUN pnpm install
+RUN pnpm prisma generate
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN pnpm run build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

app/(dashboard)/dashboard/_actions/importProtocol.ts

@@ -57,7 +57,7 @@ export const uploadProtocolAssets = async (protocol: NCProtocol, zip: Zip) => {
 
       const file = new Blob([blob], {
         type: `application/${fileExtension}`,
-      }) as FileEsque;
+      }) as File;
 
       data.append('files', file, `${asset.id}.${fileExtension}`);
     }),

app/(dashboard)/dashboard/_components/InterviewsTable/Columns.tsx

@@ -5,14 +5,14 @@ import type { Interview } from '@prisma/client';
 import { ActionsDropdown } from '~/components/DataTable/ActionsDropdown';
 import { Checkbox } from '~/components/ui/checkbox';
 import { DataTableColumnHeader } from '~/components/DataTable/ColumnHeader';
-
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '~/components/ui/tooltip';
 import { Settings } from 'lucide-react';
+import { DropdownMenuItem } from '~/components/ui/dropdown-menu';
 
 type InterviewWithoutNetwork = Omit<Interview, 'network'>;
 
@@ -139,9 +139,14 @@ export const InterviewColumns = (
           menuItems={[
             {
               label: 'Delete',
-              id: row.original.id,
-              idendtifier: row.original.id,
-              deleteItem: handleDelete,
+              row,
+              component: (
+                <DropdownMenuItem
+                  onClick={() => void handleDelete(row.original.id)}
+                >
+                  Edit
+                </DropdownMenuItem>
+              ),
             },
           ]}
         />

app/(dashboard)/dashboard/_components/InterviewsTable/InterviewsTable.tsx

@@ -47,14 +47,13 @@ export const InterviewsTable = () => {
       columns={InterviewColumns(handleDelete)}
       data={convertedData}
       filterColumnAccessorKey="id"
-      handleDeleteSelected={(data: InterviewWithoutNetwork[]) => {
-        deleteInterviews(data)
-          .then((result) => {
-            if (result.error) throw new Error(result.error);
-          })
-          .catch((error) => {
-            console.error(error);
-          });
+      handleDeleteSelected={async (data: InterviewWithoutNetwork[]) => {
+        try {
+          await deleteInterviews(data);
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error(error);
+        }
       }}
     />
   );

app/(dashboard)/dashboard/_components/NavigationBar.tsx

@@ -6,15 +6,16 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { cn } from '~/utils/shadcn';
 import UserMenu from './UserMenu';
-import { UrlObject } from 'url';
+import type { UrlObject } from 'url';
+import type { Route } from 'next';
 
 export const NavButton = ({
   children,
   href,
   isActive = false,
 }: {
   children: React.ReactNode;
-  href: UrlObject;
+  href: UrlObject | Route;
   isActive?: boolean;
 }) => {
   return (
@@ -51,7 +52,7 @@ export function NavigationBar() {
           Home
         </NavButton>
         <NavButton
-          href="/dashboard/protocols"
+          href="/dashboard"
           isActive={pathname === '/dashboard/protocols'}
         >
           Protocols

app/(dashboard)/dashboard/_components/ParticipantsTable/ParticipantsTable.tsx

@@ -28,6 +28,7 @@ export const ParticipantsTable = ({
     initialData,
     refetchOnMount: false,
     onError(error) {
+      // eslint-disable-next-line no-console
       console.error(error);
     },
   });

app/(dashboard)/dashboard/_components/ProtocolUploader.tsx

@@ -2,7 +2,7 @@
 import { useDropzone } from 'react-dropzone';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import type { FileWithPath } from 'react-dropzone';
-import { generateReactHelpers } from '~/utils/uploadthing/useUploadThing';
+import { generateReactHelpers } from '@uploadthing/react/hooks';
 import { useState, useCallback } from 'react';
 
 import { importProtocol } from '../_actions/importProtocol';
@@ -102,9 +102,8 @@ export default function ProtocolUploader({
     });
   };
 
-  const { startUpload } = useUploadThing({
-    endpoint: 'protocolUploader',
-    onClientUploadComplete: handleUploadComplete,
+  const { startUpload } = useUploadThing('protocolUploader', {
+    onClientUploadComplete: (res) => void handleUploadComplete(res),
     onUploadError: (error) => {
       setOpen(true);
       setDialogContent({
@@ -123,12 +122,6 @@ export default function ProtocolUploader({
         error: '',
       });
     },
-    onUploadProgress: (file, progress) => {
-      console.log(
-        '🚀 ~ file: ProtocolUploader.tsx:102 ~ ProtocolUploader ~ file>:progress',
-        `${file}>${progress}`,
-      );
-    },
   });
 
   const onDrop = useCallback(
@@ -141,6 +134,7 @@ export default function ProtocolUploader({
         });
 
         startUpload([file]).catch((e: Error) => {
+          // eslint-disable-next-line no-console
           console.log(e);
           setOpen(true);
           setDialogContent({
@@ -223,7 +217,7 @@ export default function ProtocolUploader({
           {!dialogContent.progress && !dialogContent.error && (
             <Form {...form}>
               <form
-                onSubmit={form.handleSubmit(onSubmit)}
+                onSubmit={() => void form.handleSubmit(onSubmit)}
                 className="w-full space-y-6"
               >
                 <div>

app/(dashboard)/dashboard/_components/ProtocolsTable/Columns.tsx

@@ -92,7 +92,7 @@ export const ProtocolColumns: ColumnDef<Protocol>[] = [
       </TooltipProvider>
     ),
     cell: () => {
-      return <ActionsDropdown menuItems={['Edit', 'Delete']} />;
+      return <ActionsDropdown />;
     },
   },
 ];