Skip to content

Commit 3e65062

Browse files
lumburovskalinalumburovskalina
authored
KernButtons shared components (#64)
* First group of buttons refactored * Refactored another group of buttons to kern button * Refacotred another group of buttons * More buttons refactored * Last group of buttons refactored * PR comments * PR comments * Submodules merge
1 parent c5f6fbb commit 3e65062

File tree

56 files changed

+810
-628
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+810
-628
lines changed

‎src/components/models-download/ModelsDownload.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ import { getModelProviderInfo } from "@/src/services/base/project";
1717
import { Application, CurrentPage } from "@/submodules/react-components/hooks/web-socket/constants";
1818
import { MODELS_DOWNLOAD_TABLE_COLUMNS, prepareTableBodyModelsDownload } from "@/src/util/table-preparations/models-download";
1919
import KernTable from "@/submodules/react-components/components/kern-table/KernTable";
20+
import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
21+
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
2022

2123
export default function ModelsDownload() {
2224
const router = useRouter();
@@ -59,10 +61,13 @@ export default function ModelsDownload() {
5961

6062
return (<div className="p-4 bg-gray-100 flex-1 flex flex-col h-[calc(100vh-4rem)] overflow-y-auto">
6163
<div className="flex flex-row items-center">
62-
<button onClick={() => router.back()} className="text-green-800 text-sm font-medium">
63-
<IconArrowLeft className="h-5 w-5 inline-block text-green-800" />
64-
<span className="leading-5">Go back</span>
65-
</button>
64+
<ButtonAsText
65+
text="Go back"
66+
onClick={() => router.back()}
67+
color="green"
68+
iconLeft={IconArrowLeft}
69+
iconColor="green"
70+
/>
6671
</div>
6772
<div className="mt-4 text-lg leading-6 text-gray-900 font-medium inline-block">
6873
Downloaded models
@@ -79,11 +84,11 @@ export default function ModelsDownload() {
7984
</div>
8085
<div className="grid grid-cols-1 lg:grid-cols-2 gap-2 mt-1 align-top">
8186
<div>
82-
<button onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
83-
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`}>
84-
<IconPlus className="h-4 w-4 mr-1" />
85-
Add new model
86-
</button>
87+
<KernButton
88+
text="Add new model"
89+
icon={IconPlus}
90+
onClick={() => dispatch(openModal(ModalEnum.ADD_MODEL_DOWNLOAD))}
91+
/>
8792
</div>
8893
</div>
8994
<AddModelDownloadModal />

‎src/components/projects/ButtonsContainer.tsx‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ModalUpload from "../shared/upload/ModalUpload";
1111
import SampleProjectsDropdown from "./SampleProjectsDropdown";
1212
import { useWebsocket } from "@/submodules/react-components/hooks/web-socket/useWebsocket";
1313
import { Application, CurrentPage, CurrentPageSubKey } from "@/submodules/react-components/hooks/web-socket/constants";
14+
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
1415

1516
const BASE_OPTIONS = { reloadOnFinish: false, deleteProjectOnFail: true, closeModalOnClick: false, isModal: true, navigateToProject: true, showBadPasswordMsg: null };
1617

@@ -37,19 +38,27 @@ export default function ButtonsContainer() {
3738
useWebsocket(orgId, Application.REFINERY, CurrentPage.PROJECTS, handleWebsocketNotification, null, CurrentPageSubKey.BUTTONS_CONTAINER);
3839

3940
return (
40-
user && user.role === UserRole.ENGINEER ? (<div>
41-
<button onClick={() => {
42-
dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
43-
router.push("/projects/new");
44-
}} 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">
45-
New project
46-
</button>
47-
<button onClick={() => {
48-
dispatch(openModal(ModalEnum.MODAL_UPLOAD));
49-
dispatch(setUploadFileType(UploadFileType.PROJECT));
50-
}} 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">
51-
Import snapshot
52-
</button>
41+
user && user.role === UserRole.ENGINEER ? (<div className="flex flex-row items-start gap-x-4 mt-4">
42+
<KernButton
43+
text='New project'
44+
buttonColor="blue"
45+
solidTheme={true}
46+
textColor="white"
47+
onClick={() => {
48+
dispatch(setUploadFileType(UploadFileType.RECORDS_NEW));
49+
router.push("/projects/new");
50+
}}
51+
/>
52+
<KernButton
53+
text="Import snapshot"
54+
buttonColor="blue"
55+
solidTheme={true}
56+
textColor="white"
57+
onClick={() => {
58+
dispatch(openModal(ModalEnum.MODAL_UPLOAD));
59+
dispatch(setUploadFileType(UploadFileType.PROJECT));
60+
}}
61+
/>
5362
<SampleProjectsDropdown />
5463
<ModalUpload uploadOptions={uploadOptions} />
5564
</div>) : (<></>)

‎src/components/projects/ProjectCard.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { NOT_AVAILABLE, UNKNOWN_USER } from "@/src/util/constants";
1111
import { IconArrowRight, IconX } from "@tabler/icons-react";
1212
import { TOOLTIPS_DICT } from "@/src/util/tooltip-constants";
1313
import { deleteProjectPost } from "@/src/services/base/project";
14+
import ButtonAsText from "@/submodules/react-components/components/kern-button/ButtonAsText";
1415

1516
export default function ProjectCard(props: ProjectCardProps) {
1617
const router = useRouter();
@@ -102,11 +103,15 @@ export default function ProjectCard(props: ProjectCardProps) {
102103
</div>}
103104
</div>
104105
<div>
105-
{props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT && <button onClick={manageProject}
106-
className="text-green-800 text-sm font-medium">
107-
<span className="leading-5">Continue project</span>
108-
<IconArrowRight className="h-5 w-5 inline-block text-green-800" />
109-
</button>}
106+
{props.project.status !== ProjectStatus.INIT_SAMPLE_PROJECT &&
107+
<ButtonAsText
108+
text="Continue project"
109+
onClick={manageProject}
110+
color="green"
111+
iconRight={IconArrowRight}
112+
iconColor="green"
113+
/>
114+
}
110115
</div>
111116
</div>
112117
</div>

‎src/components/projects/SampleProjectsDropdown.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
22
import { Menu, Transition } from '@headlessui/react'
3-
import { ChevronDownIcon } from '@heroicons/react/20/solid'
43
import { useRouter } from 'next/router';
54
import { useDispatch, useSelector } from 'react-redux';
65
import { selectAllProjects } from '@/src/reduxStore/states/project';
76
import { ModalButton, ModalEnum } from '@/src/types/shared/modal';
87
import { closeModal, openModal } from '@/src/reduxStore/states/modal';
98
import Modal from '../shared/modal/Modal';
10-
import { IconAlertTriangle, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
9+
import { IconAlertTriangle, IconArrowDown, IconFishHook, IconMessageCircle, IconNews, IconQuestionMark, IconScreenshot } from '@tabler/icons-react';
1110
import { setSearchGroupsStore } from '@/src/reduxStore/states/pages/data-browser';
1211
import { selectProjectIdSampleProject, setProjectIdSampleProject } from '@/src/reduxStore/states/tmp';
1312
import { createSampleProject } from '@/src/services/base/project';
13+
import KernButton from '@/submodules/react-components/components/kern-button/KernButton';
14+
import { ChevronDownIcon } from '@heroicons/react/20/solid';
1415

1516
const ACCEPT_BUTTON = { buttonCaption: "Create", closeAfterClick: false, useButton: true, disabled: true };
1617

@@ -74,12 +75,14 @@ export default function SampleProjectsDropdown() {
7475
return (
7576
<Menu as="div" className="relative inline-block text-left">
7677
<div>
77-
<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`}
78-
>
79-
Sample projects
80-
<ChevronDownIcon
81-
className="-mr-1 ml-2 h-5 w-5"
82-
aria-hidden="true"
78+
<Menu.Button>
79+
<KernButton
80+
text="Sample projects"
81+
icon={ChevronDownIcon}
82+
iconColor='white'
83+
buttonColor="blue"
84+
solidTheme={true}
85+
textColor="white"
8386
/>
8487
</Menu.Button>
8588
</div>
@@ -93,7 +96,7 @@ export default function SampleProjectsDropdown() {
9396
leaveFrom="transform opacity-100 scale-100"
9497
leaveTo="transform opacity-0 scale-95"
9598
>
96-
<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">
99+
<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">
97100
<div className="py-1">
98101
<Menu.Item>
99102
{({ active }) => (

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import useDebounce from "@/submodules/react-components/hooks/useHooks/useDebounc
3939
import useRefFor from "@/submodules/react-components/hooks/useRefFor";
4040
import { simpleDictCompare } from "@/submodules/javascript-functions/validations";
4141
import { LLM_CODE_TEMPLATE_EXAMPLES, LLM_CODE_TEMPLATE_OPTIONS } from "./LLM/llmTemplates";
42+
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
4243

4344
const EDITOR_OPTIONS = { theme: 'vs-light', language: 'python', readOnly: false };
4445

@@ -330,12 +331,14 @@ export default function AttributeCalculation() {
330331
<div className="w-full">
331332
<div className={`grid gap-4 ${isHeaderNormal ? 'grid-cols-2' : 'grid-cols-1'}`}>
332333
{isHeaderNormal && <div className="flex items-center mt-2">
333-
<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}>
334-
<button onClick={() => openName(true)} disabled={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}
335-
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}`}>
336-
Edit name
337-
</button>
338-
</Tooltip>
334+
<KernButton
335+
text="Edit name"
336+
disabled={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING}
337+
onClick={() => openName(true)}
338+
className="mr-3"
339+
tooltip={currentAttribute.state == AttributeState.USABLE || currentAttribute.state == AttributeState.RUNNING ? TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.CANNOT_EDIT_NAME : TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EDIT_NAME}
340+
tooltipPlacement="bottom"
341+
/>
339342
<div className="inline-block" onDoubleClick={() => openName(true)}>
340343
{(isNameOpen && currentAttribute.state != AttributeState.USABLE && currentAttribute.state != AttributeState.RUNNING)
341344
? (<input type="text" value={attributeName} onInput={(e: any) => setAttributeName(toPythonFunctionName(e.target.value))}

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

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { extendArrayElementsByUniqueId } from "@/submodules/javascript-functions
1515
import { getRecordByRecordId } from "@/src/services/base/project-setting";
1616
import { getSampleRecords } from "@/src/services/base/attribute";
1717
import { DataTypeEnum } from "@/src/types/shared/general";
18+
import KernButton from "@/submodules/react-components/components/kern-button/KernButton";
1819

1920
export default function ExecutionContainer(props: ExecutionContainerProps) {
2021
const projectId = useSelector(selectProjectId);
@@ -74,21 +75,27 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
7475
<LoadingIcon color="indigo" />
7576
</div>}
7677

77-
<Tooltip content={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS} color="invert" placement="bottom" className="ml-auto">
78-
<button onClick={calculateUserAttributeSampleRecords}
79-
disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || props.tokenizationProgress < 1 || props.checkUnsavedChanges}
80-
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">
81-
Run on 10
82-
</button>
83-
</Tooltip>
78+
<KernButton
79+
text='Run on 10'
80+
buttonColor="indigo"
81+
solidTheme={true}
82+
textColor="white"
83+
disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || props.tokenizationProgress < 1 || props.checkUnsavedChanges}
84+
onClick={calculateUserAttributeSampleRecords}
85+
tooltip={TOOLTIPS_DICT.ATTRIBUTE_CALCULATION.EXECUTE_10_RECORDS}
86+
className="ml-auto"
87+
/>
8488

85-
<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'}>
86-
<button onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
87-
disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
88-
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">
89-
Run
90-
</button>
91-
</Tooltip>
89+
<KernButton
90+
text='Run'
91+
buttonColor="indigo"
92+
solidTheme={true}
93+
textColor="white"
94+
disabled={props.currentAttribute.state == AttributeState.USABLE || props.currentAttribute.state == AttributeState.RUNNING || requestedSomething || checkIfAtLeastRunning || checkIfAtLeastQueued || props.tokenizationProgress < 1 || runOn10HasError || props.checkUnsavedChanges}
95+
onClick={() => dispatch(setModalStates(ModalEnum.EXECUTE_ATTRIBUTE_CALCULATION, { open: true, requestedSomething: requestedSomething }))}
96+
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'}
97+
className="ml-3"
98+
/>
9299
</div>
93100
</div>
94101

@@ -104,12 +111,13 @@ export default function ExecutionContainer(props: ExecutionContainerProps) {
104111
{String(record.value)}
105112
</div>
106113
<div className="flex items-center justify-center mr-5 ml-auto">
107-
<button onClick={() => {
108-
dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
109-
recordByRecordId(sampleRecords.recordIds[index]);
110-
}} 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">
111-
View
112-
</button>
114+
<KernButton
115+
text="View"
116+
onClick={() => {
117+
dispatch(setModalStates(ModalEnum.VIEW_RECORD_DETAILS, { open: true, recordIdx: index }));
118+
recordByRecordId(sampleRecords.recordIds[index]);
119+
}}
120+
/>
113121
</div>
114122
</div>
115123
</div>

0 commit comments

Comments
 (0)