diff --git a/src/index.test.tsx b/__tests__/jest/index.test.tsx similarity index 96% rename from src/index.test.tsx rename to __tests__/jest/index.test.tsx index bbb300b0..bc1c4223 100644 --- a/src/index.test.tsx +++ b/__tests__/jest/index.test.tsx @@ -2,9 +2,9 @@ import ReactDOM from "react-dom"; import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; import { fireEvent, screen, act } from "@testing-library/react"; -import { ProvideAuth, UserInterface } from "./index"; -import { user, config } from "../examples/samples"; -import { UserAccess } from "./interfaces"; +import { user, config } from "../../examples/samples"; +import { UserAccess } from "../../src/interfaces"; +import { ProvideAuth, UserInterface } from "../../src/index"; let container: HTMLDivElement; const getComponent = (userAccess: UserAccess, tierID: number): JSX.Element => ( diff --git a/examples/index.tsx b/examples/index.tsx index f50ef0a0..327f51c3 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -17,6 +17,9 @@ ReactDOM.render( user={user} services={config.services} showAppBar + launchDocs={() => + window.open("https://docs.gliff.app/", "_blank") + } /> } /> diff --git a/examples/samples.ts b/examples/samples.ts index c8e713c3..b4e40f2b 100644 --- a/examples/samples.ts +++ b/examples/samples.ts @@ -1,10 +1,10 @@ import { UserAccess, + Plugin, PluginType, Product, Progress, - IPluginIn, -} from "@/interfaces"; +} from "../src/interfaces"; import type { Services } from "../src"; export const user = { @@ -107,25 +107,33 @@ export const config = { key: "key key key", email: "1234@trustedservice.gliff.app", }), - getPlugins: (data): Promise => + getPlugins: (data): Promise => Promise.resolve([ { username: "1234@trustedservice.gliff.app", type: PluginType.Python, name: "python-plugin", + author: "mike's team", url: "https://ts.gliff.app", + description: "", products: Product.ALL, enabled: false, collection_uids: [{ uid: "1", is_invite_pending: true }], - } as IPluginIn, + origin_id: null, + is_public: false, + } as Plugin, { type: PluginType.Javascript, name: "js-plugin", + author: "jane's team", url: "https://plugin.gliff.app", + description: "", products: Product.CURATE, enabled: true, collection_uids: [], - } as IPluginIn, + origin_id: 2, + is_public: null, + } as Plugin, ]), updatePlugin: (data): Promise => Promise.resolve(1), deletePlugin: (data): Promise => Promise.resolve(1), @@ -134,7 +142,6 @@ export const config = { 1: { total: 12, complete: 1 }, 2: { total: 0, complete: 0 }, }), - launchDocs: (): Promise => Promise.resolve(), downloadDemoData: (): Promise => Promise.resolve("2"), } as Services, }; diff --git a/src/api.ts b/src/api.ts index 71299bd9..96027534 100644 --- a/src/api.ts +++ b/src/api.ts @@ -30,7 +30,6 @@ interface Services { deletePlugin: APIRoute | ServiceFunction; updatePlugin: APIRoute | ServiceFunction; getAnnotationProgress: APIRoute | ServiceFunction; - launchDocs: APIRoute | ServiceFunction; downloadDemoData: APIRoute | ServiceFunction; } diff --git a/src/components/PageSelector.tsx b/src/components/PageSelector.tsx index 2c63772b..de8c96c5 100644 --- a/src/components/PageSelector.tsx +++ b/src/components/PageSelector.tsx @@ -1,7 +1,6 @@ -import { ButtonGroup } from "@mui/material"; -import { ReactElement } from "react"; +import { ReactElement, ReactNode } from "react"; import { Link, useLocation, useResolvedPath } from "react-router-dom"; -import { IconButton, icons } from "@gliff-ai/style"; +import { IconButton, ButtonGroup, icons, MuiCard } from "@gliff-ai/style"; import { User, UserAccess } from "@/interfaces"; const pageIcons: { [name: string]: string } = { @@ -32,7 +31,12 @@ function NavLink({ name }: { name: string }): ReactElement { ); } -export function PageSelector({ user }: { user: User }): ReactElement { +interface Props { + user: User; + ZooDialog: ReactNode; +} + +export function PageSelector({ user, ZooDialog }: Props): ReactElement { let links; const isOwnerOrMember = @@ -50,6 +54,9 @@ export function PageSelector({ user }: { user: User }): ReactElement { return (
))} + {ZooDialog && ( + span > button": { + minWidth: "57px !important", + }, + }} + > + {ZooDialog} + + )}
); } diff --git a/src/components/index.ts b/src/components/index.ts index f70f6263..7360b7cf 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -2,8 +2,8 @@ export { PageSelector } from "./PageSelector"; export { EditProjectDialog } from "./projects/EditProjectDialog"; export { CreateProjectDialog } from "./projects/CreateProjectDialog"; export { ProgressBar } from "./ProgressBar"; -export { AddPluginDialog } from "@/components/plugins/AddPluginDialog"; -export { EditPluginDialog } from "@/components/plugins/EditPluginDialog"; -export { DeletePluginDialog } from "@/components/plugins/DeletePluginDialog"; -export { Notepad } from "@/components/Notepad"; -export * from "@/components/table"; +export { AddPluginDialog } from "./plugins/AddPluginDialog"; +export { EditPluginDialog } from "./plugins/EditPluginDialog"; +export { DeletePluginDialog } from "./plugins/DeletePluginDialog"; +export { Notepad } from "./Notepad"; +export * from "./table"; diff --git a/src/components/plugins/AddPluginDialog.tsx b/src/components/plugins/AddPluginDialog.tsx index 47ccd568..6c94f4bc 100644 --- a/src/components/plugins/AddPluginDialog.tsx +++ b/src/components/plugins/AddPluginDialog.tsx @@ -13,11 +13,12 @@ import { Box, Divider, } from "@gliff-ai/style"; -import { IPluginOut, Product, PluginType, Project } from "@/interfaces"; +import { Plugin, Product, PluginType, Project } from "@/interfaces"; import { ServiceFunctions } from "@/api"; import { FormLabelControl } from "./FormLabelControl"; import { ProductsRadioForm } from "./ProductsRadioForm"; import { ProjectsAutocomplete } from "./ProjectsAutocomplete"; +import { Notepad } from "../Notepad"; const marginTop = { marginTop: "15px" }; const divider = { width: "500px !important", margin: "12px -20px !important" }; @@ -33,15 +34,19 @@ interface Props { services: ServiceFunctions; setError: (error: string) => void; getPlugins: () => void; + launchDocs: () => Window | null; } -const defaultPlugin = { +const defaultPlugin: Plugin = { type: PluginType.Javascript, + origin_id: null, name: "", + description: "", url: "", products: Product.ALL, enabled: false, collection_uids: [] as string[], + is_public: false, }; export function AddPluginDialog({ @@ -49,12 +54,13 @@ export function AddPluginDialog({ setError, projects, getPlugins, + launchDocs, }: Props): ReactElement { const [closeDialog, setCloseDialog] = useState(false); const [key, setKey] = useState(null); const [creating, setCreating] = useState(false); const [dialogPage, setDialogPage] = useState(DialogPage.pickPluginType); - const [newPlugin, setNewPlugin] = useState(defaultPlugin); + const [newPlugin, setNewPlugin] = useState(defaultPlugin); const [validUrl, setValidUrl] = useState(true); useEffect(() => { @@ -79,7 +85,7 @@ export function AddPluginDialog({ if (!projects) return null; - const addPluginToProjects = async (plugin: IPluginOut, email: string) => { + const addPluginToProjects = async (plugin: Plugin, email: string) => { await Promise.allSettled( plugin.collection_uids.map(async (projectUid) => { try { @@ -96,7 +102,10 @@ export function AddPluginDialog({ const createPlugin = async (): Promise => { try { - const result = (await services.createPlugin({ ...newPlugin })) as { + const result = (await services.createPlugin({ + ...newPlugin, + url: newPlugin.url.replace(/\/$/, ""), // remove trailing slash + })) as { key: string; email: string; } | null; @@ -126,7 +135,7 @@ export function AddPluginDialog({ ) => { - setNewPlugin((p) => ({ ...p, type: e.target.value } as IPluginOut)); + setNewPlugin((p) => ({ ...p, type: e.target.value } as Plugin)); }} >

What type of plug-in do you want to register?

@@ -163,7 +172,7 @@ export function AddPluginDialog({