Merge pull request #209 from Merit-Systems/json/app-settings

Update app settings pages

Author: jasonhedman

echo-control/package.json

@@ -67,8 +67,10 @@
     "@trpc/react-query": "^11.4.4",
     "@trpc/server": "^11.4.4",
     "@types/mdx": "^2.0.13",
+    "@vercel/analytics": "^1.5.0",
     "@vercel/blob": "^0.25.1",
     "@vercel/otel": "^1.13.0",
+    "@vercel/speed-insights": "^1.2.0",
     "autonumeric": "^4.10.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

echo-control/prisma/migrations/20250825165312_update_github_links/migration.sql

@@ -0,0 +1,17 @@
+/*
+  Warnings:
+
+  - Added the required column `githubUrl` to the `github_links` table without a default value. This is not possible if the table is not empty.
+  - Changed the type of `githubId` on the `github_links` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+  - Changed the type of `githubType` on the `github_links` table. No cast exists, the column would be dropped and recreated, which cannot be done if there is data, since the column is required.
+
+*/
+-- CreateEnum
+CREATE TYPE "GithubType" AS ENUM ('user', 'repo');
+
+-- AlterTable
+ALTER TABLE "github_links" ADD COLUMN     "githubUrl" TEXT NOT NULL,
+DROP COLUMN "githubId",
+ADD COLUMN     "githubId" INTEGER NOT NULL,
+DROP COLUMN "githubType",
+ADD COLUMN     "githubType" "GithubType" NOT NULL;

echo-control/src/app/(app)/@authenticated/(home)/(home)/page.tsx

@@ -8,6 +8,10 @@ import { auth } from '@/auth';
 export default async function DashboardPage() {
   const session = await auth();
 
+  if (!session?.user) {
+    return null;
+  }
+
   return (
     <div>
       <Heading

echo-control/src/app/(app)/@authenticated/_components/keys/generate-key.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Check, Copy, Info } from 'lucide-react';
+import { Info } from 'lucide-react';
 
 import { toast } from 'sonner';
 
@@ -19,6 +19,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { api } from '@/trpc/client';
+import { CopyButton } from '@/components/ui/copy-button';
 
 interface Props {
   generateApiKey: (name?: string) => Promise<string>;
@@ -35,7 +36,7 @@ export const GenerateApiKey: React.FC<Props> = ({
 }) => {
   const [name, setName] = useState<string>();
 
-  const { isCopied, copyToClipboard } = useCopyToClipboard(() => {
+  const { copyToClipboard } = useCopyToClipboard(() => {
     toast.success('Copied to clipboard');
   });
 
@@ -52,18 +53,7 @@ export const GenerateApiKey: React.FC<Props> = ({
             <p className="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm no-scrollbar pr-2">
               {apiKey}
             </p>
-            <Button
-              onClick={() => copyToClipboard(apiKey)}
-              variant="outline"
-              className="shrink-0 size-fit p-2"
-              size="icon"
-            >
-              {isCopied ? (
-                <Check className="size-3" />
-              ) : (
-                <Copy className="size-3" />
-              )}
-            </Button>
+            <CopyButton text={apiKey} toastMessage="Copied to clipboard" />
           </div>
         </div>
 

echo-control/src/app/(app)/@authenticated/_components/layout/nav/index.tsx

@@ -10,6 +10,7 @@ import { Route } from 'next';
 interface Tab<T extends string> {
   label: string;
   href: Route<T>;
+  subRoutes?: string[];
 }
 
 interface Props<T extends string = string> {
@@ -60,7 +61,9 @@ export const Nav = <T extends string>({ tabs }: Props<T>) => {
                   }
                 }}
               >
-                <MotionTab href={tab.href}>{tab.label}</MotionTab>
+                <MotionTab href={tab.href} subRoutes={tab.subRoutes}>
+                  {tab.label}
+                </MotionTab>
               </Link>
             </div>
           ))}

echo-control/src/app/(app)/@authenticated/_components/layout/nav/motion-tab.tsx

@@ -7,13 +7,16 @@ import { forwardRef } from 'react';
 interface Props {
   href: string;
   children: React.ReactNode;
+  subRoutes?: string[];
 }
 
 export const MotionTab = forwardRef<HTMLLIElement, Props>(
-  ({ href, children }, ref) => {
+  ({ href, children, subRoutes }, ref) => {
     const pathname = usePathname();
 
-    const isSelected = pathname === href;
+    const isSelected =
+      pathname === href ||
+      (subRoutes && subRoutes.some(route => pathname === route));
 
     return (
       <motion.li key={href} ref={ref}>

echo-control/src/app/(app)/@authenticated/app/[id]/(overview)/_components/setup/recipient-details.tsx

@@ -28,7 +28,7 @@ const tabsTriggerClassName =
 interface Props {
   githubLink: {
     type: GithubType;
-    githubUrl: string;
+    githubUrl: string | null;
   } | null;
   appId: string;
 }

echo-control/src/app/(app)/@authenticated/app/[id]/layout.tsx

@@ -21,6 +21,11 @@ export default async function AuthenticatedAppLayout({
           {
             label: 'Settings',
             href: `/app/${id}/settings`,
+            subRoutes: [
+              `/app/${id}/settings/general`,
+              `/app/${id}/settings/monetization`,
+              `/app/${id}/settings/security`,
+            ],
           },
         ]}
       />

echo-control/src/app/(app)/@authenticated/app/[id]/settings/(general)/_components/description.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { Textarea } from '@/components/ui/textarea';
+
+import { AppField } from './field';
+
+export const AppDescription = () => {
+  return (
+    <AppField name="description">
+      {field => <Textarea {...field} placeholder="My App" />}
+    </AppField>
+  );
+};

echo-control/src/app/(app)/@authenticated/app/[id]/settings/(general)/_components/field.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { ControllerRenderProps, useFormContext } from 'react-hook-form';
+
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from '@/components/ui/form';
+import { updateAppSchema } from '@/services/apps/owner';
+
+interface Props {
+  name: keyof typeof updateAppSchema.shape;
+  children: (field: ControllerRenderProps) => React.ReactNode;
+}
+
+export const AppField: React.FC<Props> = ({ name, children }) => {
+  const form = useFormContext();
+
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormControl>{children(field)}</FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};