KernButtons shared components

src/components/models-download/ModelsDownload.tsx

@@ -17,6 +17,8 @@ import { getModelProviderInfo } from "@/src/services/base/project";
 import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
 import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@/src/util/table-preparations/models-download";
 import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
+import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
+import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 
 export default function ModelsDownload() {
     const router = useRouter();
@@ -59,10 +61,13 @@ export default function ModelsDownload() {
 
     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" />
-                <span className="leading-5">Go back</span>
-            </button>
+            <ButtonAsText
+                text="Go back"
+                onClick={() => router.back()}
+                color="green"
+                iconLeft={IconArrowLeft}
+                iconColor="green"
+            />
         </div>
         <div className="mt-4 text-lg leading-6 text-gray-900 font-medium inline-block">
             Downloaded models
@@ -79,11 +84,11 @@ export default function ModelsDownload() {
         </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))}
-                    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>
+                <KernButton
+                    text="Add new model"
+                    icon={IconPlus}
+                    onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
+                />
             </div>
         </div>
         <AddModelDownloadModal />

src/components/projects/ButtonsContainer.tsx

@@ -11,6 +11,7 @@ import ModalUpload from "../shared/upload/ModalUpload";
 import SampleProjectsDropdown from "./SampleProjectsDropdown";
 import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
 import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
+import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 
 const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: false, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
 
@@ -37,19 +38,27 @@ export default function ButtonsContainer() {
     useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
 
     return (
-        user && user.role === UserRole.ENGINEER ? (<div>
-            <button onClick={() => {
-                dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
-                router.push("/projects/new");
-            }} className="bg-blue-700 text-white text-xs font-semibold px-4 py-2.5 rounded-md mt-6 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                New project
-            </button>
-            <button onClick={() => {
-                dispatch(openModal(ModalEnum.MODAL_UPLOAD));
-                dispatch(setUploadFileType(UploadFileType.PROJECT));
-            }} className="bg-blue-700 text-white text-xs font-semibold ml-6 mt-6 mr-6 xs:mr-0 px-4 py-2.5 rounded-md cursor-pointer hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
-                Import snapshot
-            </button>
+        user && user.role === UserRole.ENGINEER ? (<div className="flex flex-row items-start gap-x-4 mt-4">
+            <KernButton
+                text='New project'
+                buttonColor="blue"
+                solidTheme={true}
+                textColor="white"
+                onClick={() => {
+                    dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
+                    router.push("/projects/new");
+                }}
+            />
+            <KernButton
+                text="Import snapshot"
+                buttonColor="blue"
+                solidTheme={true}
+                textColor="white"
+                onClick={() => {
+                    dispatch(openModal(ModalEnum.MODAL_UPLOAD));
+                    dispatch(setUploadFileType(UploadFileType.PROJECT));
+                }}
+            />
             <SampleProjectsDropdown />
             <ModalUpload uploadOptions={uploadOptions} />
         </div>) : (<></>)

src/components/projects/ProjectCard.tsx

@@ -11,6 +11,7 @@ import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
 import { IconArrowRight, IconX } from "@tabler/icons-react";
 import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
 import { deleteProjectPost } from "@/src/services/base/project";
+import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
 
 export default function ProjectCard(props: ProjectCardProps) {
     const router = useRouter();
@@ -102,11 +103,15 @@ export default function ProjectCard(props: ProjectCardProps) {
                             </div>}
                         </div>
                         <div>
-                            {props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT && <button onClick={manageProject}
-                                className="text-green-800 text-sm font-medium">
-                                <span className="leading-5">Continue project</span>
-                                <IconArrowRight className="h-5 w-5 inline-block text-green-800" />
-                            </button>}
+                            {props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT &&
+                                <ButtonAsText
+                                    text="Continue project"
+                                    onClick={manageProject}
+                                    color="green"
+                                    iconRight={IconArrowRight}
+                                    iconColor="green"
+                                />
+                            }
                         </div>
                     </div>
                 </div>

src/components/projects/SampleProjectsDropdown.tsx

@@ -1,16 +1,17 @@
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Menu, Transition } from '@headlessui/react'
-import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import { useRouter } from 'next/router';
 import { useDispatch, useSelector } from 'react-redux';
 import { selectAllProjects } from '@/src/reduxStore/states/project';
 import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
 import { closeModal, openModal } from '@/src/reduxStore/states/modal';
 import Modal from '../shared/modal/Modal';
-import { IconAlertTriangle, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
+import { IconAlertTriangle, IconArrowDown, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
 import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
 import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
 import { createSampleProject } from '@/src/services/base/project';
+import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 
 const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
 
@@ -74,12 +75,14 @@ export default function SampleProjectsDropdown() {
     return (
         <Menu as="div" className="relative inline-block text-left">
             <div>
-                <Menu.Button className={`inline-flex justify-between items-center bg-blue-700 text-white text-xs font-semibold ml-6 mt-6 mr-6 xs:mr-0 px-4 py-2 rounded-md cursor-pointer hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500`}
-                >
-                    Sample projects
-                    <ChevronDownIcon
-                        className="-mr-1 ml-2 h-5 w-5"
-                        aria-hidden="true"
+                <Menu.Button>
+                    <KernButton
+                        text="Sample projects"
+                        icon={ChevronDownIcon}
+                        iconColor='white'
+                        buttonColor="blue"
+                        solidTheme={true}
+                        textColor="white"
                     />
                 </Menu.Button>
             </div>
@@ -93,7 +96,7 @@ export default function SampleProjectsDropdown() {
                 leaveFrom="transform opacity-100 scale-100"
                 leaveTo="transform opacity-0 scale-95"
             >
-                <Menu.Items className="absolute w-max z-10 mt-2 small:max-h-72 small:overflow-y-auto origin-top-left rounded-md ml-6 bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <Menu.Items className="absolute w-max z-10 mt-2 small:max-h-72 small:overflow-y-auto origin-top-left rounded-md bg-white shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none">
                     <div className="py-1">
                         <Menu.Item>
                             {({ active }) => (

src/components/projects/projectId/attributes/attributeId/AttributeCalculations.tsx

@@ -39,6 +39,7 @@ import useDebounce from "@/submodules/react-components/hooks/useHooks/useDebounc
 import useRefFor from "@/submodules/react-components/hooks/useRefFor";
 import { simpleDictCompare } from "@/submodules/javascript-functions/validations";
 import { LLM_CODE_TEMPLATE_EXAMPLES, LLM_CODE_TEMPLATE_OPTIONS } from "./LLM/llmTemplates";
+import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 
 const EDITOR_OPTIONS = { theme: 'vs-light', language: 'python', readOnly: false };
 
@@ -330,12 +331,14 @@ export default function AttributeCalculation() {
             <div className="w-full">
                 <div className={`grid gap-4 ${isHeaderNormal ? 'grid-cols-2' : 'grid-cols-1'}`}>
                     {isHeaderNormal && <div className="flex items-center mt-2">
-                        <Tooltip color="invert" placement="bottom" content={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING ? TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.CANNOT_EDIT_NAME : TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EDIT_NAME}>
-                            <button onClick={() => openName(true)} disabled={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}
-                                className={`flex-shrink-0 bg-white text-gray-700 text-xs font-semibold mr-3 px-4 py-2 rounded-md border border-gray-300 block float-left hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}`}>
-                                Edit name
-                            </button>
-                        </Tooltip>
+                        <KernButton
+                            text="Edit name"
+                            disabled={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}
+                            onClick={() => openName(true)}
+                            className="mr-3"
+                            tooltip={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING ? TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.CANNOT_EDIT_NAME : TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EDIT_NAME}
+                            tooltipPlacement="bottom"
+                        />
                         <div className="inline-block" onDoubleClick={() => openName(true)}>
                             {(isNameOpen && currentAttribute.state != AttributeState.USABLE && currentAttribute.state != AttributeState.RUNNING)
                                 ? (<input type="text" value={attributeName} onInput={(e: any) => setAttributeName(toPythonFunctionName(e.target.value))}

src/components/projects/projectId/attributes/attributeId/ExecutionContainer.tsx

@@ -15,6 +15,7 @@ import { extendArrayElementsByUniqueId } from "@/submodules/javascript-functions
 import { getRecordByRecordId } from "@/src/services/base/project-setting";
 import { getSampleRecords } from "@/src/services/base/attribute";
 import { DataTypeEnum } from "@/src/types/shared/general";
+import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
 
 export default function ExecutionContainer(props: ExecutionContainerProps) {
     const projectId = useSelector(selectProjectId);
@@ -74,21 +75,27 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                     <LoadingIcon color="indigo" />
                 </div>}
 
-                <Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS} color="invert" placement="bottom" className="ml-auto">
-                    <button onClick={calculateUserAttributeSampleRecords}
-                        disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || props.tokenizationProgress < 1 || props.checkUnsavedChanges}
-                        className="bg-white text-gray-700 text-xs font-semibold px-4 py-2 rounded-md border whitespace-nowrap border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
-                        Run on 10
-                    </button>
-                </Tooltip>
+                <KernButton
+                    text='Run on 10'
+                    buttonColor="indigo"
+                    solidTheme={true}
+                    textColor="white"
+                    disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || props.tokenizationProgress < 1 || props.checkUnsavedChanges}
+                    onClick={calculateUserAttributeSampleRecords}
+                    tooltip={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS}
+                    className="ml-auto"
+                />
 
-                <Tooltip color="invert" placement="bottom" content={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}>
-                    <button onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
-                        disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
-                        className="bg-indigo-700 text-white text-xs leading-4 font-semibold px-4 py-2 rounded-md cursor-pointer ml-3 hover:bg-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed">
-                        Run
-                    </button>
-                </Tooltip>
+                <KernButton
+                    text='Run'
+                    buttonColor="indigo"
+                    solidTheme={true}
+                    textColor="white"
+                    disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
+                    onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
+                    tooltip={props.currentAttribute.state == AttributeState.USABLE ? 'Attribute is already in use' : requestedSomething ? 'Test is running' : checkIfAtLeastRunning ? 'Another attribute is running' : checkIfAtLeastQueued ? 'Another attribute is queued for execution' : props.tokenizationProgress < 1 ? 'Tokenization is in progress' : runOn10HasError ? 'Run on 10 records has an error' : 'Execute the attribute on all records'}
+                    className="ml-3"
+                />
             </div>
         </div>
 
@@ -104,12 +111,13 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
                                             {String(record.value)}
                                         </div>
                                         <div className="flex items-center justify-center mr-5 ml-auto">
-                                            <button onClick={() => {
-                                                dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
-                                                recordByRecordId(sampleRecords.recordIds[index]);
-                                            }} className="bg-white text-gray-700 text-xs font-semibold px-4 py-1 rounded border border-gray-300 cursor-pointer hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 inline-block">
-                                                View
-                                            </button>
+                                            <KernButton
+                                                text="View"
+                                                onClick={() => {
+                                                    dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
+                                                    recordByRecordId(sampleRecords.recordIds[index]);
+                                                }}
+                                            />
                                         </div>
                                     </div>
                                 </div>