Merge pull request #9 from code-kern-ai/release-updates

Release updates

Author: JWittmeyer

README.md

@@ -1,38 +1,7 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# refinery-ui [![Build Status](https://drone.dev.onetask.ai/api/badges/code-kern-ai/refinery-ui/status.svg?ref=refs/heads/dev)](https://drone.dev.kern.ai/code-kern-ai/refinery-ui)
+[![refinery repository](https://uploads-ssl.webflow.com/61e47fafb12bd56b40022a49/62c2f30f935f4d37dc864eeb_Kern%20refinery.png)](https://github.com/code-kern-ai/refinery)
 
-## Getting Started
+UI for [refinery](https://github.com/code-kern-ai/refinery). Used to interact with the whole system; to find out how to best work with the UI, check out our [docs](https://docs.kern.ai)
 
-First, run the development server:
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+If you like what we're working on, please leave a ⭐ for [refinery](https://github.com/code-kern-ai/refinery)!

src/components/models-download/ModelsDownload.tsx

@@ -11,13 +11,12 @@ import LoadingIcon from "../shared/loading/LoadingIcon";
 import { openModal, setModalStates } from "@/src/reduxStore/states/modal";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { selectIsManaged } from "@/src/reduxStore/states/general";
-import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
 import { CurrentPage } from "@/src/types/shared/general";
 import { timer } from "rxjs";
-import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import AddModelDownloadModal from "./AddModelDownloadModal";
 import DeleteModelDownloadModal from "./DeleteModelDownloadModal";
+import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
 export default function ModelsDownload() {
     const router = useRouter();
@@ -28,14 +27,8 @@ export default function ModelsDownload() {
 
     const [refetchModelsDownload] = useLazyQuery(GET_MODEL_PROVIDER_INFO, { fetchPolicy: 'network-only', nextFetchPolicy: 'cache-first' });
 
-    useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.MODELS_DOWNLOAD]), []);
-
     useEffect(() => {
         refetchModels();
-        WebSocketsService.subscribeToNotification(CurrentPage.MODELS_DOWNLOAD, {
-            whitelist: ['model_provider_download'],
-            func: handleWebsocketNotification
-        });
     }, []);
 
     function refetchModels() {
@@ -53,11 +46,9 @@ export default function ModelsDownload() {
         }
     }, []);
 
-    useEffect(() => {
-        WebSocketsService.updateFunctionPointer(null, CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification)
-    }, [handleWebsocketNotification]);
+    useWebsocket(CurrentPage.MODELS_DOWNLOAD, handleWebsocketNotification);
 
-    return (<div className="p-4 bg-gray-100 h-screen overflow-y-auto flex-1 flex flex-col">
+    return (<div className="p-4 bg-gray-100 flex-1 flex flex-col h-[calc(100vh-4rem)] overflow-y-auto">
         <div className="flex flex-row items-center">
             <button onClick={() => router.back()} className="text-green-800 text-sm font-medium">
                 <IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
@@ -157,15 +148,15 @@ export default function ModelsDownload() {
                     </table>
                 </div>
             </div>
-            <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
-                <div>
-                    <button onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
-                        disabled={!isManaged}
-                        className={`mr-1 inline-flex items-center px-2.5 py-2 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`}>
-                        <IconPlus className="h-4 w-4 mr-1" />
-                        Add new model
-                    </button>
-                </div>
+        </div>
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
+            <div>
+                <button onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
+                    disabled={!isManaged}
+                    className={`mr-1 inline-flex items-center px-2.5 py-2 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer disabled:cursor-not-allowed disabled:opacity-50`}>
+                    <IconPlus className="h-4 w-4 mr-1" />
+                    Add new model
+                </button>
             </div>
         </div>
         <AddModelDownloadModal />

src/components/projects/ButtonsContainer.tsx

@@ -9,9 +9,8 @@ import { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux"
 import ModalUpload from "../shared/upload/ModalUpload";
 import SampleProjectsDropdown from "./SampleProjectsDropdown";
-import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
-import { CurrentPage } from "@/src/types/shared/general";
-import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
+import { CurrentPage, CurrentPageSubKey } from "@/src/types/shared/general";
+import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
 const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: true, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
 
@@ -24,15 +23,6 @@ export default function ButtonsContainer() {
     const [uploadOptions, setUploadOptions] = useState<UploadOptions>(BASE_OPTIONS);
     const [showBadPasswordMsg, setShowBadPasswordMsg] = useState(false);
 
-    useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.PROJECTS]), []);
-
-    useEffect(() => {
-        WebSocketsService.subscribeToNotification(CurrentPage.PROJECTS, {
-            whitelist: ['bad_password'],
-            func: handleWebsocketNotification
-        });
-    }, []);
-
     useEffect(() => {
         setUploadOptions({ ...BASE_OPTIONS, showBadPasswordMsg: showBadPasswordMsg });
     }, [showBadPasswordMsg]);
@@ -43,9 +33,7 @@ export default function ButtonsContainer() {
         }
     }, []);
 
-    useEffect(() => {
-        WebSocketsService.updateFunctionPointer(null, CurrentPage.PROJECTS, handleWebsocketNotification)
-    }, [handleWebsocketNotification]);
+    useWebsocket(CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
 
     return (
         user && user.role === UserRole.ENGINEER ? (<div>

src/components/projects/ProjectCard.tsx

@@ -1,6 +1,6 @@
 import { selectIsAdmin, selectIsDemo, selectUser } from "@/src/reduxStore/states/general";
 import { closeModal, setModalStates } from "@/src/reduxStore/states/modal";
-import { removeFromAllProjectsById, setActiveProject } from "@/src/reduxStore/states/project";
+import { removeFromAllProjectsById } from "@/src/reduxStore/states/project";
 import { Project, ProjectCardProps, ProjectStatus } from "@/src/types/components/projects/projects-list";
 import { ModalEnum } from "@/src/types/shared/modal";
 import { isStringTrue } from "@/submodules/javascript-functions/general";

src/components/projects/ProjectsList.tsx

@@ -1,6 +1,5 @@
 import { selectInactiveOrganization, selectIsDemo, selectIsManaged, selectUser, setComments } from "@/src/reduxStore/states/general"
 import { selectAllProjects, setAllProjects } from "@/src/reduxStore/states/project";
-import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
 import { GET_OVERVIEW_STATS, GET_PROJECT_LIST } from "@/src/services/gql/queries/projects";
 import { Project, ProjectStatistics } from "@/src/types/components/projects/projects-list";
 import { CurrentPage } from "@/src/types/shared/general";
@@ -15,14 +14,12 @@ import { GET_CAN_CREATE_LOCAL_ORG } from "@/src/services/gql/queries/organizatio
 import { ADD_USER_TO_ORGANIZATION, CREATE_ORGANIZATION } from "@/src/services/gql/mutations/organizations";
 import style from "@/src/styles/components/projects/projects-list.module.css";
 import { useRouter } from "next/router";
-import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
 import AdminDeleteProjectModal from "./AdminDeleteProjectModal";
 import { setAllAttributes, setAllEmbeddings, setLabelingTasksAll } from "@/src/reduxStore/states/pages/settings";
 import { setOverviewFilters } from "@/src/reduxStore/states/tmp";
 import { setDataSlices, setFullSearchStore, setSearchGroupsStore } from "@/src/reduxStore/states/pages/data-browser";
-import { closeModal } from "@/src/reduxStore/states/modal";
-import { ModalEnum } from "@/src/types/shared/modal";
 import { SearchGroup } from "@/submodules/javascript-functions/enums/enums";
+import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
 export default function ProjectsList() {
     const router = useRouter();
@@ -44,13 +41,7 @@ export default function ProjectsList() {
     const [createOrgMut] = useMutation(CREATE_ORGANIZATION);
     const [addUserToOrgMut] = useMutation(ADD_USER_TO_ORGANIZATION);
 
-    useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.PROJECTS]), []);
-
     useEffect(() => {
-        WebSocketsService.subscribeToNotification(CurrentPage.PROJECTS, {
-            whitelist: ['project_created', 'project_deleted', 'project_update', 'file_upload'],
-            func: handleWebsocketNotification
-        });
         dispatch(setLabelingTasksAll(null));
         dispatch(setOverviewFilters(null));
         dispatch(setSearchGroupsStore(null));
@@ -59,7 +50,6 @@ export default function ProjectsList() {
         dispatch(setAllEmbeddings([]));
         dispatch(setDataSlices([]));
         dispatch(setComments(null));
-        dispatch(closeModal(ModalEnum.COMMENTS_SECTION));
     }, []);
 
     useEffect(() => {
@@ -120,9 +110,7 @@ export default function ProjectsList() {
         }
     }, []);
 
-    useEffect(() => {
-        WebSocketsService.updateFunctionPointer(null, CurrentPage.PROJECTS, handleWebsocketNotification)
-    }, [handleWebsocketNotification]);
+    useWebsocket(CurrentPage.PROJECTS, handleWebsocketNotification);
 
     return (
         <div>

src/components/projects/projectId/admin/ProjectAdmin.tsx

@@ -13,10 +13,9 @@ import { useDispatch, useSelector } from "react-redux";
 import NewPersonalToken from "./NewPersonalTokenModal";
 import DeletePersonalToken from "./DeletePersonalTokenModal";
 import { CurrentPage } from "@/src/types/shared/general";
-import { WebSocketsService } from "@/src/services/base/web-sockets/WebSocketsService";
 import { useRouter } from "next/router";
 import { selectIsAdmin } from "@/src/reduxStore/states/general";
-import { unsubscribeWSOnDestroy } from "@/src/services/base/web-sockets/web-sockets-helper";
+import { useWebsocket } from "@/src/services/base/web-sockets/useWebsocket";
 
 export default function ProjectAdmin() {
     const router = useRouter();
@@ -29,8 +28,6 @@ export default function ProjectAdmin() {
 
     const [refetchAccessTokens] = useLazyQuery(GET_ALL_PERSONAL_ACCESS_TOKENS, { fetchPolicy: "network-only" });
 
-    useEffect(unsubscribeWSOnDestroy(router, [CurrentPage.ADMIN_PAGE]), []);
-
     useEffect(() => {
         if (!projectId) return;
         refetchAccessTokensAndProcess();
@@ -41,11 +38,6 @@ export default function ProjectAdmin() {
             return;
         }
 
-        WebSocketsService.subscribeToNotification(CurrentPage.ADMIN_PAGE, {
-            projectId: projectId,
-            whitelist: ['pat'],
-            func: handleWebsocketNotification
-        });
     }, [projectId]);
 
     function refetchAccessTokensAndProcess() {
@@ -64,19 +56,16 @@ export default function ProjectAdmin() {
         }
     }, [accessTokens]);
 
-    useEffect(() => {
-        if (!projectId) return;
-        WebSocketsService.updateFunctionPointer(projectId, CurrentPage.ADMIN_PAGE, handleWebsocketNotification)
-    }, [handleWebsocketNotification, projectId]);
+    useWebsocket(CurrentPage.ADMIN_PAGE, handleWebsocketNotification, projectId);
 
     return (<>
         {accessTokens && <div className="p-4 bg-gray-100 h-full overflow-y-auto flex-1 flex flex-col">
             <div className="text-lg leading-6 text-gray-900 font-medium inline-block w-full">
                 <label>Personal Access Tokens</label>
             </div>
             <div className="mt-1">
-                <div className="text-sm leading-5 font-medium text-gray-700 inline-block">Manage project-based personal access tokens used to interact with refineries commercial proxy.</div>
-                <div className="inline-block min-w-full align-middle">
+                <div className="text-sm leading-5 font-medium text-gray-700 inline-block">Manage project-based personal access tokens used to interact with Refinery’s commercial proxy.</div>
+                <div className="mt-2 inline-block min-w-full align-middle">
                     <div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
                         <table className="min-w-full divide-y divide-gray-300">
                             <thead className="bg-gray-50">
@@ -108,7 +97,7 @@ export default function ProjectAdmin() {
                                 {accessTokens.map((token: PersonalAccessToken, index: number) => (<tr key={token.id} className={`${index % 2 != 0 ? 'bg-gray-50' : 'bg-white'}`}>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.name}</td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.scope}</td>
-                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdAt}</td>
+                                    <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdBy}</td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.createdAt}</td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.expiresAt}</td>
                                     <td className="whitespace-nowrap text-center px-3 py-2 text-sm text-gray-500">{token.lastUsed}</td>
@@ -126,7 +115,7 @@ export default function ProjectAdmin() {
                 <Tooltip content={TOOLTIPS_DICT.ADMIN_PAGE.NEW_ACCESS_TOKEN} color="invert" placement="right">
                     <button onClick={() => dispatch(openModal(ModalEnum.NEW_PERSONAL_TOKEN))}
                         className="inline-flex items-center px-2.5 py-1.5 border border-gray-300 shadow-sm text-xs font-semibold rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none cursor-pointer">
-                        <IconPlus size={20} />
+                        <IconPlus className="mr-1" size={20} />
                         Add token
                     </button>
                 </Tooltip>