5c723d9b44
* Role based access control * Fix build + checkstyle * Refactoring, some bug fixes, review fixes * Compile permission value patterns * Make the resource a enum instead of a string * Refactoring * Make clusters required * Fix formatting * switch the switch case to a smart switch case * Get rid of topic analysis actions * Rename endpoints, fix an issue * Return a flag indicating if rbac is on and a username * Fix yaml indent in editorconfig * Fix github & cognito role name fetching * Fix case matching for actions * Update readme * Add an endpoint to determine if a user can create a resource * Fix tests (I hope so) * Fix tests * Use spring configs instead of a separate file, rename endpoints * Add "ALL" action Get rid of unnecessary cache, save groups into spring auth Review fixes * Make "all" action case-insensitive * Role based access control / FrontEnd (#2933) * Initial modifications and mocking the For the RoleAccess * fix the Suspense issue in the components , comment the Tests to implement later * minor test comment * Roles and configuration and santization of data * initialize RoleCheck hook * make the App test file visible + minor modification in the permission hook * Structure the data so the Burger header toggle does not rerender the whole application * add tests to the NavBar and the Page container , add tests * NavBar and PageContainer bug fixes * Roles Testing code modification * covering Topics create button Actions, and Schema create button Actions * minor typescript code modifications for the cluster required parameter in the rolesHelper * minor typescript code modifications for the cluster required parameter in the rolesHelper * minor code modification to describe the Permission tests more clearly * Produce message Permissions with Tests Suites for Topic * Add Schema Edit Permission with tests * Minor role changes * Add ActionButton Component to handle the Button with tooltip * Add ActionButton Component to handle the Button with tooltip * Add Action Button to every Button create Action * ActionButton add test suites * usePermission code modification to include regular expressions * Abstract Actions Component for code repetition, add Configs Edit button Permission + add the tests suites to it. * Schema Remove functionality Permission and Test Suites + creation of the ActionDropdownItem for Actions * Topic Edit Clear and delete Topic , Permissions with test suites * ActionsCell For Topic Message Overview for permissions with tests suites * Connector Delete , Consumer Groups Permission + writing test suites * Add Permissions to the Topics ActionCell * Topic Table Permissions Tests Suites * Headless Logic for the Permission Part * add documentation for the headless Part of the permission + add modification of the data version 2 for efficient algorithmic lookup * replace modify data logic and isPermitted function to have faster access to the data * Add Permission helpers tests suites * usePermission hook test suites * BatchActionsBar add Permissions + minor modification in TopicTable tests suites * Statistics and Metrics code Permission + add test suites * Recreate Topic Permissions in the Topic page, add tests suites * Actions for the Connector components * Messages NavLink View Permission * Test suites messages code modifications * Permissions comment code modifications * Replacing the Mock Data With the actual code * Add ActionNavLink test suites * BatchActionsBar code smell modifications * maximizing the permissions tests suites * maximizing the permissions tests suites * maximizing the permissions tests suites * Tooltip code refactoring and fix the positions issue * permissions increase the tests coverage * add user info at the navigation header and tests suites * Add Global Schema Selector Permissions with test suites * Roles minor code removal * Change the Action Component form hook mixin approach to declarative props approach * add isPermitted function for multiple Actions , adding tests suites for this particular case * remove redundant Permissions test blocks from the components * remove redundant Permissions test blocks from the components * Action Buttons test suites' coverage + generalizing the code of the Actions * add invalid Permission check in Action Components tests suites * Modularization of Actions Components * Modularization of Actions Components by adding DropDownAction to it. * Reflect the BE Changes to the UI , by changing the default behavior or the testing of roles. * Reflect the BE Changes to the UI , by changing the default behavior or the testing of roles. * Get rid of not necessary usePermission mocks * Modifications in the UserInfo data , to consider the UI without any login functionality * minor code modifications in the BatchActionBar component * change the Query key for the user info * change the default message for the tooltip * Fix the Create Role Access for Topics and Schemas * ListPage Connector create permissions * add Headless logic for Create Permission with test suites. + add react hook render-er * Create Button ActionButton logic implementation * Remove Code smells , by removing the duplications * increase the test suites for isPermittedToCreate logic * increase the test suites for isPermittedToCreate logic * Change the UserResourceType Enum with the new value * Apply New Resource Creation validation, for Topic, Schema, Connector * Apply New Resource Creation validation, for Topic, Schema, Connector * minor code refactor modifications * minor code modification in the topics useCreate hook * Async Validation for all the Create Pages * caching test for optimal performance in async validation schemas * Reverting the Front End Validation * Reverting the Front End Validation * Authorization API minor syntax modifications * fix SmokeTests Co-authored-by: Roman Zabaluev <rzabaluev@provectus.com> Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com> Co-authored-by: Mgrdich <46796009+Mgrdich@users.noreply.github.com> Co-authored-by: VladSenyuta <vlad.senyuta@gmail.com>
592 lines
12 KiB
TypeScript
592 lines
12 KiB
TypeScript
const Colors = {
|
|
neutral: {
|
|
'0': '#FFFFFF',
|
|
'3': '#f9fafa',
|
|
'4': '#f0f0f0',
|
|
'5': '#F1F2F3',
|
|
'10': '#E3E6E8',
|
|
'15': '#D5DADD',
|
|
'20': '#C7CED1',
|
|
'25': '#C4C4C4',
|
|
'30': '#ABB5BA',
|
|
'40': '#8F9CA3',
|
|
'50': '#73848C',
|
|
'60': '#5C6970',
|
|
'70': '#454F54',
|
|
'80': '#2F3639',
|
|
'90': '#171A1C',
|
|
'100': '#000',
|
|
},
|
|
transparency: {
|
|
'10': 'rgba(10, 10, 10, 0.1)',
|
|
'20': 'rgba(0, 0, 0, 0.1)',
|
|
'50': 'rgba(34, 41, 47, 0.5)',
|
|
},
|
|
green: {
|
|
'10': '#D6F5E0',
|
|
'15': '#C2F0D1',
|
|
'30': '#85E0A3',
|
|
'40': '#5CD685',
|
|
'60': '#29A352',
|
|
},
|
|
brand: {
|
|
'5': '#E8E8FC',
|
|
'10': '#D1D1FA',
|
|
'15': '#B8BEF9',
|
|
'20': '#A3A3F5',
|
|
'50': '#4C4CFF',
|
|
'60': '#1717CF',
|
|
'70': '#1414B8',
|
|
},
|
|
red: {
|
|
'10': '#FAD1D1',
|
|
'20': '#F5A3A3',
|
|
'50': '#E51A1A',
|
|
'55': '#CF1717',
|
|
'60': '#B81414',
|
|
},
|
|
yellow: {
|
|
'10': '#FFEECC',
|
|
'20': '#FFDD57',
|
|
},
|
|
blue: {
|
|
'10': '#e3f2fd',
|
|
'20': '#bbdefb',
|
|
'30': '#90caf9',
|
|
'40': '#64b5f6',
|
|
'45': '#5865F2',
|
|
'50': '#5B67E3',
|
|
},
|
|
};
|
|
|
|
const theme = {
|
|
link: {
|
|
color: Colors.brand[50],
|
|
hoverColor: Colors.brand[60],
|
|
},
|
|
hr: {
|
|
backgroundColor: Colors.neutral[5],
|
|
},
|
|
code: {
|
|
backgroundColor: Colors.neutral[5],
|
|
color: Colors.red[55],
|
|
},
|
|
list: {
|
|
label: {
|
|
color: Colors.neutral[50],
|
|
},
|
|
meta: {
|
|
color: Colors.neutral[30],
|
|
},
|
|
},
|
|
progressBar: {
|
|
backgroundColor: Colors.neutral[3],
|
|
compleatedColor: Colors.green[40],
|
|
borderColor: Colors.neutral[10],
|
|
},
|
|
layout: {
|
|
backgroundColor: Colors.neutral[0],
|
|
minWidth: '1200px',
|
|
navBarWidth: '201px',
|
|
navBarHeight: '53px',
|
|
rightSidebarWidth: '70vw',
|
|
filtersSidebarWidth: '300px',
|
|
|
|
stuffColor: Colors.neutral[5],
|
|
stuffBorderColor: Colors.neutral[10],
|
|
overlay: {
|
|
backgroundColor: Colors.neutral[50],
|
|
},
|
|
socialLink: {
|
|
color: Colors.neutral[20],
|
|
},
|
|
},
|
|
pageHeading: {
|
|
height: '64px',
|
|
dividerColor: Colors.neutral[30],
|
|
backLink: {
|
|
color: {
|
|
normal: Colors.brand[70],
|
|
hover: Colors.brand[60],
|
|
},
|
|
},
|
|
},
|
|
panelColor: Colors.neutral[0],
|
|
connectEditWarning: Colors.yellow[10],
|
|
dropdown: {
|
|
backgroundColor: Colors.neutral[0],
|
|
borderColor: Colors.neutral[5],
|
|
shadow: Colors.transparency[20],
|
|
item: {
|
|
color: {
|
|
danger: Colors.red[60],
|
|
},
|
|
backgroundColor: {
|
|
default: Colors.neutral[0],
|
|
hover: Colors.neutral[5],
|
|
},
|
|
},
|
|
},
|
|
ksqlDb: {
|
|
query: {
|
|
editor: {
|
|
readonly: {
|
|
background: Colors.neutral[3],
|
|
selection: {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
cursor: {
|
|
color: 'transparent',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
heading: {
|
|
h1: {
|
|
color: Colors.neutral[90],
|
|
},
|
|
h3: {
|
|
color: Colors.neutral[50],
|
|
fontSize: '14px',
|
|
},
|
|
base: {
|
|
fontFamily: 'Inter, sans-serif',
|
|
fontStyle: 'normal',
|
|
fontWeight: 500,
|
|
color: Colors.neutral[100],
|
|
},
|
|
variants: {
|
|
1: {
|
|
fontSize: '20px',
|
|
lineHeight: '32px',
|
|
},
|
|
2: {
|
|
fontSize: '20px',
|
|
lineHeight: '32px',
|
|
},
|
|
3: {
|
|
fontSize: '16px',
|
|
lineHeight: '24px',
|
|
fontWeight: 400,
|
|
marginBottom: '16px',
|
|
},
|
|
4: {
|
|
fontSize: '14px',
|
|
lineHeight: '20px',
|
|
fontWeight: 500,
|
|
},
|
|
5: {
|
|
fontSize: '12px',
|
|
lineHeight: '16px',
|
|
},
|
|
6: {
|
|
fontSize: '12px',
|
|
lineHeight: '16px',
|
|
},
|
|
},
|
|
},
|
|
lastestVersionItem: {
|
|
metaDataLabel: {
|
|
color: Colors.neutral[50],
|
|
},
|
|
},
|
|
alert: {
|
|
color: {
|
|
error: Colors.red[10],
|
|
success: Colors.green[10],
|
|
warning: Colors.yellow[10],
|
|
info: Colors.neutral[10],
|
|
loading: Colors.neutral[10],
|
|
blank: Colors.neutral[10],
|
|
custom: Colors.neutral[10],
|
|
},
|
|
shadow: Colors.transparency[20],
|
|
},
|
|
circularAlert: {
|
|
color: {
|
|
error: Colors.red[50],
|
|
success: Colors.green[40],
|
|
warning: Colors.yellow[10],
|
|
info: Colors.neutral[10],
|
|
},
|
|
},
|
|
button: {
|
|
primary: {
|
|
backgroundColor: {
|
|
normal: Colors.brand[5],
|
|
hover: Colors.brand[10],
|
|
active: Colors.brand[20],
|
|
disabled: Colors.neutral[5],
|
|
},
|
|
color: Colors.neutral[90],
|
|
invertedColors: {
|
|
normal: Colors.brand[50],
|
|
hover: Colors.brand[60],
|
|
active: Colors.brand[60],
|
|
},
|
|
},
|
|
secondary: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[5],
|
|
hover: Colors.neutral[10],
|
|
active: Colors.neutral[15],
|
|
},
|
|
color: Colors.neutral[90],
|
|
isActiveColor: Colors.neutral[0],
|
|
invertedColors: {
|
|
normal: Colors.neutral[50],
|
|
hover: Colors.neutral[70],
|
|
active: Colors.neutral[90],
|
|
},
|
|
},
|
|
danger: {
|
|
backgroundColor: {
|
|
normal: Colors.red[50],
|
|
hover: Colors.red[55],
|
|
active: Colors.red[60],
|
|
disabled: Colors.red[20],
|
|
},
|
|
color: Colors.neutral[90],
|
|
invertedColors: {
|
|
normal: Colors.brand[50],
|
|
hover: Colors.brand[60],
|
|
active: Colors.brand[60],
|
|
},
|
|
},
|
|
height: {
|
|
S: '24px',
|
|
M: '32px',
|
|
L: '40px',
|
|
},
|
|
fontSize: {
|
|
S: '14px',
|
|
M: '14px',
|
|
L: '16px',
|
|
},
|
|
border: {
|
|
normal: Colors.neutral[50],
|
|
hover: Colors.neutral[70],
|
|
active: Colors.neutral[90],
|
|
},
|
|
},
|
|
menu: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[0],
|
|
hover: Colors.neutral[3],
|
|
active: Colors.neutral[5],
|
|
},
|
|
color: {
|
|
normal: Colors.neutral[50],
|
|
hover: Colors.neutral[70],
|
|
active: Colors.brand[70],
|
|
isOpen: Colors.neutral[90],
|
|
},
|
|
statusIconColor: {
|
|
online: Colors.green[40],
|
|
offline: Colors.red[50],
|
|
initializing: Colors.yellow[20],
|
|
},
|
|
chevronIconColor: Colors.neutral[50],
|
|
},
|
|
version: {
|
|
currentVersion: {
|
|
color: Colors.neutral[30],
|
|
},
|
|
symbolWrapper: {
|
|
color: Colors.neutral[30],
|
|
},
|
|
},
|
|
schema: {
|
|
backgroundColor: {
|
|
tr: Colors.neutral[5],
|
|
div: Colors.neutral[0],
|
|
},
|
|
},
|
|
modal: {
|
|
backgroundColor: Colors.neutral[0],
|
|
border: {
|
|
top: Colors.neutral[5],
|
|
bottom: Colors.neutral[5],
|
|
contrast: Colors.neutral[30],
|
|
},
|
|
overlay: Colors.transparency[10],
|
|
shadow: Colors.transparency[20],
|
|
deletionTextColor: Colors.neutral[70],
|
|
},
|
|
table: {
|
|
actionBar: {
|
|
backgroundColor: Colors.neutral[0],
|
|
},
|
|
th: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[0],
|
|
},
|
|
color: {
|
|
sortable: Colors.neutral[30],
|
|
normal: Colors.neutral[60],
|
|
hover: Colors.brand[50],
|
|
active: Colors.brand[50],
|
|
},
|
|
previewColor: {
|
|
normal: Colors.brand[50],
|
|
},
|
|
},
|
|
td: {
|
|
color: {
|
|
normal: Colors.neutral[90],
|
|
},
|
|
},
|
|
tr: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[0],
|
|
hover: Colors.neutral[5],
|
|
},
|
|
},
|
|
link: {
|
|
color: {
|
|
normal: Colors.neutral[90],
|
|
hover: Colors.neutral[50],
|
|
active: Colors.neutral[90],
|
|
},
|
|
},
|
|
expander: {
|
|
normal: Colors.brand[50],
|
|
hover: Colors.brand[20],
|
|
disabled: Colors.neutral[10],
|
|
},
|
|
},
|
|
primaryTab: {
|
|
height: '41px',
|
|
color: {
|
|
normal: Colors.neutral[50],
|
|
hover: Colors.neutral[90],
|
|
active: Colors.neutral[90],
|
|
disabled: Colors.neutral[30],
|
|
},
|
|
borderColor: {
|
|
normal: 'transparent',
|
|
hover: 'transparent',
|
|
active: Colors.brand[50],
|
|
nav: Colors.neutral[10],
|
|
},
|
|
},
|
|
secondaryTab: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[0],
|
|
hover: Colors.neutral[5],
|
|
active: Colors.neutral[10],
|
|
},
|
|
color: {
|
|
normal: Colors.neutral[50],
|
|
hover: Colors.neutral[90],
|
|
active: Colors.neutral[90],
|
|
},
|
|
},
|
|
select: {
|
|
backgroundColor: {
|
|
normal: Colors.neutral[0],
|
|
hover: Colors.neutral[10],
|
|
active: Colors.neutral[10],
|
|
},
|
|
color: {
|
|
normal: Colors.neutral[90],
|
|
hover: Colors.neutral[90],
|
|
active: Colors.neutral[90],
|
|
disabled: Colors.neutral[30],
|
|
},
|
|
borderColor: {
|
|
normal: Colors.neutral[30],
|
|
hover: Colors.neutral[50],
|
|
active: Colors.neutral[70],
|
|
disabled: Colors.neutral[10],
|
|
},
|
|
optionList: {
|
|
scrollbar: {
|
|
backgroundColor: Colors.neutral[30],
|
|
},
|
|
},
|
|
},
|
|
input: {
|
|
borderColor: {
|
|
normal: Colors.neutral[30],
|
|
hover: Colors.neutral[50],
|
|
focus: Colors.neutral[70],
|
|
disabled: Colors.neutral[10],
|
|
},
|
|
color: {
|
|
placeholder: {
|
|
normal: Colors.neutral[30],
|
|
readOnly: Colors.neutral[30],
|
|
},
|
|
disabled: Colors.neutral[30],
|
|
readOnly: Colors.neutral[90],
|
|
},
|
|
backgroundColor: {
|
|
readOnly: Colors.neutral[5],
|
|
},
|
|
error: Colors.red[50],
|
|
icon: {
|
|
color: Colors.neutral[70],
|
|
},
|
|
label: {
|
|
color: Colors.neutral[70],
|
|
},
|
|
},
|
|
textArea: {
|
|
borderColor: {
|
|
normal: Colors.neutral[30],
|
|
hover: Colors.neutral[50],
|
|
focus: Colors.neutral[70],
|
|
disabled: Colors.neutral[10],
|
|
},
|
|
color: {
|
|
placeholder: {
|
|
normal: Colors.neutral[30],
|
|
focus: {
|
|
normal: 'transparent',
|
|
readOnly: Colors.neutral[30],
|
|
},
|
|
},
|
|
disabled: Colors.neutral[30],
|
|
readOnly: Colors.neutral[90],
|
|
},
|
|
backgroundColor: {
|
|
readOnly: Colors.neutral[5],
|
|
},
|
|
},
|
|
tag: {
|
|
backgroundColor: {
|
|
green: Colors.green[10],
|
|
gray: Colors.neutral[5],
|
|
yellow: Colors.yellow[10],
|
|
white: Colors.neutral[10],
|
|
red: Colors.red[10],
|
|
blue: Colors.blue[10],
|
|
},
|
|
color: Colors.neutral[90],
|
|
},
|
|
switch: {
|
|
unchecked: Colors.brand[20],
|
|
checked: Colors.brand[50],
|
|
circle: Colors.neutral[0],
|
|
disabled: Colors.neutral[10],
|
|
},
|
|
pageLoader: {
|
|
borderColor: Colors.brand[50],
|
|
borderBottomColor: Colors.neutral[0],
|
|
},
|
|
metrics: {
|
|
backgroundColor: Colors.neutral[5],
|
|
indicator: {
|
|
backgroundColor: Colors.neutral[0],
|
|
titleColor: Colors.neutral[50],
|
|
warningTextColor: Colors.red[50],
|
|
lightTextColor: Colors.neutral[30],
|
|
},
|
|
filters: {
|
|
color: {
|
|
icon: Colors.neutral[90],
|
|
normal: Colors.neutral[50],
|
|
},
|
|
},
|
|
},
|
|
scrollbar: {
|
|
trackColor: {
|
|
normal: Colors.neutral[0],
|
|
active: Colors.neutral[5],
|
|
},
|
|
thumbColor: {
|
|
normal: Colors.neutral[0],
|
|
active: Colors.neutral[50],
|
|
},
|
|
},
|
|
consumerTopicContent: {
|
|
backgroundColor: Colors.neutral[5],
|
|
},
|
|
topicFormLabel: {
|
|
color: Colors.neutral[50],
|
|
},
|
|
topicMetaData: {
|
|
backgroundColor: Colors.neutral[5],
|
|
color: {
|
|
label: Colors.neutral[50],
|
|
value: Colors.neutral[80],
|
|
meta: Colors.neutral[30],
|
|
},
|
|
liderReplica: {
|
|
color: Colors.green[60],
|
|
},
|
|
},
|
|
dangerZone: {
|
|
borderColor: Colors.neutral[10],
|
|
color: {
|
|
title: Colors.red[50],
|
|
warningMessage: Colors.neutral[50],
|
|
},
|
|
},
|
|
configList: {
|
|
color: Colors.neutral[30],
|
|
},
|
|
tooltip: {
|
|
bg: Colors.neutral[70],
|
|
text: Colors.neutral[0],
|
|
},
|
|
topicsList: {
|
|
color: {
|
|
normal: Colors.neutral[90],
|
|
hover: Colors.neutral[50],
|
|
active: Colors.neutral[90],
|
|
},
|
|
backgroundColor: {
|
|
hover: Colors.neutral[5],
|
|
active: Colors.neutral[10],
|
|
},
|
|
},
|
|
icons: {
|
|
closeIcon: Colors.neutral[30],
|
|
deleteIcon: Colors.red[20],
|
|
warningIcon: Colors.yellow[20],
|
|
messageToggleIcon: {
|
|
normal: Colors.brand[50],
|
|
hover: Colors.brand[20],
|
|
active: Colors.brand[60],
|
|
},
|
|
verticalElipsisIcon: Colors.neutral[50],
|
|
liveIcon: {
|
|
circleBig: Colors.red[10],
|
|
circleSmall: Colors.red[50],
|
|
},
|
|
newFilterIcon: Colors.brand[50],
|
|
closeModalIcon: Colors.neutral[25],
|
|
savedIcon: Colors.brand[50],
|
|
dropdownArrowIcon: Colors.neutral[30],
|
|
git: {
|
|
hover: Colors.neutral[70],
|
|
active: Colors.neutral[90],
|
|
},
|
|
discord: {
|
|
hover: Colors.brand[15],
|
|
active: Colors.blue[45],
|
|
},
|
|
},
|
|
viewer: {
|
|
wrapper: Colors.neutral[3],
|
|
},
|
|
savedFilterDivider: {
|
|
color: Colors.neutral[15],
|
|
},
|
|
editFilterText: {
|
|
color: Colors.brand[50],
|
|
},
|
|
statictics: {
|
|
createdAtColor: Colors.neutral[50],
|
|
},
|
|
errorPage: {
|
|
text: Colors.blue[45],
|
|
},
|
|
};
|
|
|
|
export type ThemeType = typeof theme;
|
|
|
|
export default theme;
|