diff --git a/packages/app/src/main.tsx b/packages/app/src/main.tsx index f65f532..ad501bd 100644 --- a/packages/app/src/main.tsx +++ b/packages/app/src/main.tsx @@ -23,7 +23,6 @@ import ProfilePage from "./pages/profile.tsx"; import ProjectBase from "./pages/projects/project/base.tsx"; import ProjectIndex from "./pages/projects/project/index.tsx"; import ProjectManifests from "./pages/projects/project/manifests/index.tsx"; -import ProjectManifestsAdd from "./pages/projects/project/manifests/add.tsx.tsx"; import ProjectManifestsCliSetup from "./pages/projects/project/manifests/cliSetup.tsx"; import ProjectManifest from "./pages/projects/project/manifests/manifest.tsx"; import ProjectSettings from "./pages/projects/project/settings.tsx"; @@ -145,13 +144,13 @@ const router = createBrowserRouter([ } satisfies BreadcrumbHandle, children: [ { - path: "manifests/add", - Component: ProjectManifestsAdd, + path: "manifests/cliSetup", + Component: ProjectManifestsCliSetup, handle: { breadcrumb: { - title: "Add Manifest", + title: "CLI Setup", href: (params) => - `/projects/${params.projectId}/manifests/add`, + `/projects/${params.projectId}/manifests/add/cli`, }, } satisfies BreadcrumbHandle, }, @@ -162,6 +161,7 @@ const router = createBrowserRouter([ { index: true, element: }, { path: "manifests", + Component: ProjectManifests, handle: { breadcrumb: { title: "Manifests", @@ -169,24 +169,6 @@ const router = createBrowserRouter([ `/projects/${params.projectId}/manifests`, }, } satisfies BreadcrumbHandle, - children: [ - { - index: true, - Component: ProjectManifests, - }, - - { - path: "cliSetup", - Component: ProjectManifestsCliSetup, - handle: { - breadcrumb: { - title: "CLI Setup", - href: (params) => - `/projects/${params.projectId}/manifests/add/cli`, - }, - } satisfies BreadcrumbHandle, - }, - ], }, { path: "settings", diff --git a/packages/app/src/pages/projects/project/manifests/add.tsx.tsx b/packages/app/src/pages/projects/project/manifests/add.tsx.tsx deleted file mode 100644 index a5c100e..0000000 --- a/packages/app/src/pages/projects/project/manifests/add.tsx.tsx +++ /dev/null @@ -1,280 +0,0 @@ -import { useState } from "react"; -import { Link, useNavigate, useOutletContext } from "react-router"; -import { - Card, - CardContent, - CardDescription, - CardHeader, - CardTitle, -} from "../../../../components/shadcn/Card.tsx"; -import { Input } from "../../../../components/shadcn/Input.tsx"; -import { Button } from "../../../../components/shadcn/Button.tsx"; -import { ExternalLink, Loader, Terminal, Upload } from "lucide-react"; -import { toast } from "sonner"; -import { useCoreApi } from "../../../../contexts/CoreApi.tsx"; -import { z } from "zod"; -import { useForm } from "react-hook-form"; -import { zodResolver } from "@hookform/resolvers/zod"; -import { - Form, - FormControl, - FormDescription, - FormField, - FormItem, - FormLabel, - FormMessage, -} from "../../../../components/shadcn/Form.tsx"; -import { ManifestApiTypes } from "@stackcore/core/responses"; -import type { ProjectPageContext } from "../base.tsx"; -import { - Alert, - AlertDescription, - AlertTitle, -} from "../../../../components/shadcn/Alert.tsx"; -import { Badge } from "../../../../components/shadcn/Badge.tsx"; - -const formSchema = z.object({ - branch: z.string().optional(), - commitSha: z.string().optional(), - commitShaDate: z.string().optional(), - manifest: z.instanceof(File).refine( - (file) => file.type === "application/json", - { - message: "Only JSON files are allowed", - }, - ), -}); - -export default function ProjectManifestsAdd() { - const context = useOutletContext(); - const navigate = useNavigate(); - const coreApi = useCoreApi(); - - const [isBusy, setIsBusy] = useState(false); - - const form = useForm>({ - resolver: zodResolver(formSchema), - defaultValues: { - branch: undefined, - commitSha: undefined, - commitShaDate: undefined, - manifest: undefined, - }, - disabled: isBusy, - }); - - async function onSubmit(data: z.infer) { - setIsBusy(true); - try { - const manifestText = await data.manifest.text(); - const manifestJson = JSON.parse(manifestText); - - const payload: ManifestApiTypes.CreateManifestPayload = { - projectId: context.project.id, - branch: data.branch || null, - commitSha: data.commitSha || null, - commitShaDate: data.commitShaDate ? new Date(data.commitShaDate) : null, - manifest: manifestJson, - }; - - const { url, method, body } = ManifestApiTypes.prepareCreateManifest( - payload, - ); - - const response = await coreApi.handleRequest(url, method, body); - - if (!response.ok || response.status !== 201) { - const errorData = await response.json(); - throw new Error(errorData.error || "Failed to create manifest"); - } - - const createResponseBody = await response - .json() as ManifestApiTypes.CreateManifestResponse; - - toast.success("Manifest created successfully."); - - navigate( - `/projects/${context.project.id}/manifests/${createResponseBody.id}`, - ); - } catch (error) { - console.error(error); - toast.error("Failed to create manifest"); - } finally { - setIsBusy(false); - } - } - - return ( -
- {/* CLI Alternative */} - - - - - CLI Alternative - - -
- Prefer automation? Use our CLI tool instead -
- - Cost 1 credit per upload - - - - - - Command Line Interface - - You can also upload manifests programmatically using our CLI tool, - perfect for CI/CD pipelines. - - - - - - - - - {/* Upload Form */} - - - - - Upload Manifest - - -
- Upload a JSON manifest file for project: {context.project.name} -
- - Cost 1 credit per upload - - - - -
- - {/* Manifest File Upload */} - ( - - - Manifest File - - - { - const file = e.target.files?.[0]; - field.onChange(file); - }} - disabled={isBusy} - /> - - - Upload a JSON file containing your manifest data. Only - .json files are accepted. - - - - )} - /> - - {/* Metadata Fields */} -
- ( - - Branch - - - - - Git branch name (optional) - - - - )} - /> - - ( - - Commit SHA - - - - - Git commit SHA (optional) - - - - )} - /> - - ( - - Commit Date - - - - - Git commit date (optional) - - - - )} - /> -
- - {/* Submit Buttons */} -
- - -
- - -
- -
- ); -} diff --git a/packages/app/src/pages/projects/project/manifests/cliSetup.tsx b/packages/app/src/pages/projects/project/manifests/cliSetup.tsx index 5d42c82..3f97c2e 100644 --- a/packages/app/src/pages/projects/project/manifests/cliSetup.tsx +++ b/packages/app/src/pages/projects/project/manifests/cliSetup.tsx @@ -36,24 +36,32 @@ export default function ProjectManifestsCliSetup() { const cliCommands = [ { title: "Install the CLI", - command: "npm install -g @stackcore/cli", - description: "Install the StackCore CLI globally on your system", + command: "https://github.com/nanoapi-io/napi", + description: + "Follow the instructions to install napi CLI globally on your system", }, { title: "Login to your account", - command: "napi auth login", - description: "Authenticate with your StackCore account", + command: "napi login", + description: "Authenticate with your nanoapi account", + }, + { + title: "Initialize your project (if not already done)", + command: "napi init", + description: + `You will be prompted to select an existing project, select project "${context.project.name}"`, }, { title: "Generate the manifest", command: "napi manifest generate", - description: "Generate a manifest file with metadata", + description: "This will generate a manifest and push it to your project.", }, { - title: "Upload with commit info (optional)", + title: "Generate the manifest (in a CI/CD pipeline)", command: - `napi manifest push --project-id ${context.project.id} --file ./manifest.json --commit-sha $(git rev-parse HEAD) --branch $(git branch --show-current)`, - description: "Automatically include Git commit information", + "napi manifest generate --branch=${{ github.ref_name }} --commit-sha=${{ github.sha }} --commit-sha-date=${{ github.event_time }}", + description: + "This will generate a manifest and push it to your project without prompting.", }, ]; @@ -66,8 +74,8 @@ export default function ProjectManifestsCliSetup() { CLI Instructions - Upload manifests programmatically using our CLI tool for{" "} - {context.project.name} + Upload manifests programmatically using our CLI tool for your + project: {context.project.name} diff --git a/packages/app/src/pages/projects/project/manifests/index.tsx b/packages/app/src/pages/projects/project/manifests/index.tsx index eb67feb..a4c9932 100644 --- a/packages/app/src/pages/projects/project/manifests/index.tsx +++ b/packages/app/src/pages/projects/project/manifests/index.tsx @@ -213,7 +213,7 @@ export default function ProjectManifests() { onChange={(e) => setSearch(e.target.value)} className="max-w-sm" /> - +