diff --git a/.github/workflows/bump-meshery-version.yml b/.github/workflows/bump-meshery-version.yml index 45722c87a..dffb40be2 100644 --- a/.github/workflows/bump-meshery-version.yml +++ b/.github/workflows/bump-meshery-version.yml @@ -116,7 +116,7 @@ jobs: cache: "npm" cache-dependency-path: '**/package-lock.json' - name: Make changes to pull request - run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} + run: npm install @layer5/sistent@${{needs.versions-check.outputs.current}} --legacy-peer-deps - name: Create Pull Request id: cpr uses: peter-evans/create-pull-request@v7 diff --git a/README.md b/README.md index 970da2e13..44f41491a 100644 --- a/README.md +++ b/README.md @@ -91,7 +91,6 @@ Find out more on the Layer5 community.



-
 
diff --git a/package-lock.json b/package-lock.json index 89a4c7f95..887072551 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "billboard.js": "^3.14.3", "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "moment": "^2.30.1", "react-share": "^5.1.0" }, @@ -4570,7 +4572,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true, "engines": { "node": ">=6" } @@ -11828,6 +11829,16 @@ "performance-now": "^2.1.0" } }, + "node_modules/re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "license": "MIT", + "peerDependencies": { + "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -11884,6 +11895,20 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "license": "MIT", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", @@ -17737,8 +17762,7 @@ "clsx": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", - "dev": true + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" }, "co": { "version": "4.6.0", @@ -22702,6 +22726,12 @@ "performance-now": "^2.1.0" } }, + "re-resizable": { + "version": "6.10.3", + "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.10.3.tgz", + "integrity": "sha512-zvWb7X3RJMA4cuSrqoxgs3KR+D+pEXnGrD2FAD6BMYAULnZsSF4b7AOVyG6pC3VVNVOtlagGDCDmZSwWLjjBBw==", + "requires": {} + }, "react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -22748,6 +22778,15 @@ "scheduler": "^0.23.0" } }, + "react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "requires": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + } + }, "react-error-boundary": { "version": "4.0.12", "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.0.12.tgz", diff --git a/package.json b/package.json index a094977f1..162bb5a20 100644 --- a/package.json +++ b/package.json @@ -119,6 +119,8 @@ "billboard.js": "^3.14.3", "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "re-resizable": "^6.10.3", + "react-draggable": "^4.4.6", "moment": "^2.30.1", "react-share": "^5.1.0" } diff --git a/site/package-lock.json b/site/package-lock.json index 9fc2d53c3..1156c65c2 100644 --- a/site/package-lock.json +++ b/site/package-lock.json @@ -11407,9 +11407,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", + "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", "funding": [ { "type": "github", diff --git a/src/base/Pagination/Pagination.tsx b/src/base/Pagination/Pagination.tsx index 728ad7fee..85526ceb9 100644 --- a/src/base/Pagination/Pagination.tsx +++ b/src/base/Pagination/Pagination.tsx @@ -1,8 +1,13 @@ -import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material'; +import { + Pagination as MuiPagination, + PaginationItem as MuiPaginationItem, + PaginationProps as MuiPaginationProps +} from '@mui/material'; import React from 'react'; const Pagination = React.forwardRef((props, ref) => { return ; }); +export { MuiPaginationItem as PaginationItem }; export default Pagination; diff --git a/src/base/Pagination/index.tsx b/src/base/Pagination/index.tsx index 1ab1d4c17..cf0100cf7 100644 --- a/src/base/Pagination/index.tsx +++ b/src/base/Pagination/index.tsx @@ -1,5 +1,5 @@ import { PaginationProps } from '@mui/material'; -import Pagination from './Pagination'; +import Pagination, { PaginationItem } from './Pagination'; -export { Pagination }; +export { Pagination, PaginationItem }; export type { PaginationProps }; diff --git a/src/custom/CatalogDetail/ActionButton.tsx b/src/custom/CatalogDetail/ActionButton.tsx index bf601a09a..dddd7a0b5 100644 --- a/src/custom/CatalogDetail/ActionButton.tsx +++ b/src/custom/CatalogDetail/ActionButton.tsx @@ -76,31 +76,13 @@ const ActionButtons: React.FC = ({ width: '100%' }} > - - cleanedType === VIEWS - ? downloadYaml(details.pattern_file, details.name) - : downloadPattern(details.id, details.name, getDownloadUrl) - } - > - - Download - - {cleanedType !== FILTERS && ( handleClone(details?.name, details?.id)} @@ -116,6 +98,23 @@ const ActionButtons: React.FC = ({ )} )} + + cleanedType === VIEWS + ? downloadYaml(details.pattern_file, details.name) + : downloadPattern(details.id, details.name, getDownloadUrl) + } + > + + Download + )} diff --git a/src/custom/CatalogDetail/style.tsx b/src/custom/CatalogDetail/style.tsx index 10afeefa4..632f89b04 100644 --- a/src/custom/CatalogDetail/style.tsx +++ b/src/custom/CatalogDetail/style.tsx @@ -264,8 +264,7 @@ export const RedirectLink = styled(Link)(({ theme }) => ({ export const ShareButtonGroup = styled(ButtonGroup)({ boxShadow: 'none', border: 'none', - outline: 'none', - height: '76%' + outline: 'none' }); export const ShareButton = styled(Button)(({ theme }) => ({ diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx index cc0c8ee9b..22302793b 100644 --- a/src/custom/Markdown/index.tsx +++ b/src/custom/Markdown/index.tsx @@ -5,6 +5,7 @@ import { BasicAnchorMarkdown, StyledMarkdown, StyledMarkdownBlockquote, + StyledMarkdownCode, StyledMarkdownH1, StyledMarkdownH2, StyledMarkdownH3, @@ -54,7 +55,8 @@ export const RenderMarkdown: React.FC = ({ content }) => { li: ({ ...props }) => {props.children}, th: ({ ...props }) => {props.children}, td: ({ ...props }) => {props.children}, - pre: ({ ...props }) => {props.children} + pre: ({ ...props }) => {props.children}, + code: ({ ...props }) => {props.children} }} > {content} diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx index 5af5c13bf..0139f598a 100644 --- a/src/custom/Markdown/style.tsx +++ b/src/custom/Markdown/style.tsx @@ -98,3 +98,12 @@ export const StyledMarkdownPre = styled('pre')(({ theme }) => ({ whiteSpace: 'pre-line', fontFamily: 'inherit' })); + +export const StyledMarkdownCode = styled('code')(({ theme }) => ({ + background: theme.palette.background.code, + whiteSpace: 'pre-line', + padding: '1.5px', + paddingInline: '5px', + fontFamily: 'inherit', + borderRadius: 3 +})); diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx new file mode 100644 index 000000000..cc0409f1a --- /dev/null +++ b/src/custom/Panel/Panel.tsx @@ -0,0 +1,103 @@ +import { Resizable } from 're-resizable'; +import React from 'react'; +import Draggable from 'react-draggable'; +import { Box, BoxProps, IconButton, Tooltip } from '../../base'; +import { CloseIcon, CollapseAllIcon, ExpandAllIcon } from '../../icons'; +import { PanelDragHandleIcon } from '../../icons/PanelDragHandle'; +import { useTheme } from '../../theme'; +import { ErrorBoundary } from '../ErrorBoundary'; +import { + DragHandle, + DrawerHeader, + HeaderActionsContainer, + HeaderContainer, + PanelBody, + PanelContainer, + ResizableContent +} from './style'; + +export type PanelProps = { + isOpen: boolean; + children: React.ReactNode; + areAllExpanded?: boolean; + toggleExpandAll?: () => void; + handleClose: () => void; + sx?: BoxProps['sx']; + id?: string; + intitialPosition?: { + left?: string | number; + right?: string | number; + top?: string | number; + bottom?: string | number; + }; +}; + +const Panel_: React.FC = ({ + isOpen, + id = 'panel', + children, + areAllExpanded, + toggleExpandAll, + handleClose, + intitialPosition, + sx +}) => { + const theme = useTheme(); + if (!isOpen) return null; + return ( + + + { + window.dispatchEvent(new Event('panel-resize')); + }} + enable={{ + top: true, + right: true, + bottom: true, + left: true, + topRight: true, + bottomRight: true, + bottomLeft: true, + topLeft: true + }} + > + + +
+ + + {toggleExpandAll && ( + + + {areAllExpanded ? : } + + + )} + + + + + + + + + + + +
+ {children} + + + + + + ); +}; + +export const Panel: React.FC = ({ ...props }) => { + return ; +}; diff --git a/src/custom/Panel/index.tsx b/src/custom/Panel/index.tsx new file mode 100644 index 000000000..0abd9a3ca --- /dev/null +++ b/src/custom/Panel/index.tsx @@ -0,0 +1,3 @@ +import { Panel } from './Panel'; + +export { Panel }; diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx new file mode 100644 index 000000000..8f9daf8a2 --- /dev/null +++ b/src/custom/Panel/style.tsx @@ -0,0 +1,117 @@ +import { ListItemProps } from '@mui/material'; +import { Box, ListItem } from '../../base'; +import { styled } from '../../theme'; +import { PanelProps } from './Panel'; + +export const ListHeader = styled(ListItem)(({ theme }) => ({ + padding: theme.spacing(0.5, 0.5), + marginBlock: theme.spacing(1), + '& .MuiListItemText-primary': { + fontSize: '1rem', + textTransform: 'capitalize', + fontWeight: 700 + }, + cursor: 'pointer', + '&:hover': { + backgroundColor: theme.palette.action.hover + }, + '& .MuiSvgIcon-root': { + opacity: 0, + transition: 'opacity 0.2s' + }, + '&:hover .MuiSvgIcon-root': { + opacity: 1 + } +})); + +interface CustomListItemProps extends ListItemProps { + isVisible: boolean; +} + +export const StyledListItem = styled(ListItem, { + shouldForwardProp: (props) => props !== 'isVisible' +})(({ theme, isVisible }) => ({ + padding: theme.spacing(0.05, 0.5), + fontStyle: isVisible ? 'normal' : 'italic', + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + '& .MuiSvgIcon-root': { + height: 20, + width: 20 + }, + '& .MuiListItemIcon-root': { + minWidth: 0, + opacity: isVisible ? 0.8 : 0.3 + }, + '& .MuiTypography-root': { + fontSize: '0.9rem', + opacity: isVisible ? 1 : 0.5 + } +})); + +export const DrawerHeader = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + padding: theme.spacing(4, 2), + alignContent: 'stretch', + justifyContent: 'space-between', + cursor: 'move', + background: + theme.palette.mode === 'light' + ? 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)' + : 'linear-gradient(90deg, #28353A 0%, #3D4F57 100%)', + height: '3rem', + flexShrink: 0 +})); + +export const PanelBody = styled(Box)(({ theme }) => ({ + padding: theme.spacing(2), + backgroundColor: theme.palette.background.surfaces, + overflow: 'auto', + flex: 1, + minHeight: 0 +})); + +export const ResizableContent = styled('div')({ + height: '100%', + display: 'flex', + flexDirection: 'column', + minHeight: '3rem' +}); + +export const PanelContainer = styled(Box)<{ intitialPosition: PanelProps['intitialPosition'] }>( + ({ theme, intitialPosition }) => ({ + borderRadius: '8px', + overflow: 'hidden', + flexShrink: 0, + zIndex: 99999, + position: 'absolute', + backgroundColor: theme.palette.background.blur?.light, + boxShadow: '0 4px 16px #05003812', + maxHeight: '80%', + display: 'flex', + boxSizing: 'border-box', + ...intitialPosition + }) +); + +export const DragHandle = styled('div')({ + position: 'absolute', + top: '-3rem', + left: '50%' +}); + +export const HeaderActionsContainer = styled('div')({ + display: 'flex', + gap: '1rem', + justifyContent: 'flex-end', + alignItems: 'center' +}); + +export const HeaderContainer = styled('div')({ + display: 'flex', + justifyContent: 'end', + alignItems: 'center', + flex: '1' +}); diff --git a/src/custom/Prompt/index.tsx b/src/custom/Prompt/index.tsx index 2a3497faf..46a7b6a75 100644 --- a/src/custom/Prompt/index.tsx +++ b/src/custom/Prompt/index.tsx @@ -1,3 +1,3 @@ -import PromptComponent from './promt-component'; - +import PromptComponent, { PROMPT_VARIANTS } from './promt-component'; +export { PROMPT_VARIANTS, PromptComponent }; export default PromptComponent; diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 90824d958..9dbecaf52 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -1,5 +1,5 @@ import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; -import { Typography } from '../../base'; +import { Checkbox, FormControlLabel, Typography } from '../../base'; import { useTheme } from '../../theme'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { ActionComponent, Subtitle } from './style'; @@ -26,6 +26,8 @@ interface State { showInfoIcon?: string; variant?: PromptVariant; headerIcon?: React.ReactNode; + showCheckbox?: boolean; + isChecked?: boolean; } interface ShowParams { @@ -34,11 +36,13 @@ interface ShowParams { primaryOption: string; variant: PromptVariant; showInfoIcon?: string; + showCheckbox?: boolean; headerIcon?: React.ReactNode; } export interface PromptRef { show: (params: ShowParams) => Promise; + getCheckboxState: () => boolean; } const PromptComponent = forwardRef(({ variant }, ref) => { @@ -49,7 +53,9 @@ const PromptComponent = forwardRef(({ variant }, ref) => primaryOption: '', showInfoIcon: '', variant, - headerIcon: undefined + headerIcon: undefined, + isChecked: false, + showCheckbox: false }); /* This ref is used to store the resolve and reject functions of the promise returned by the show method */ @@ -67,7 +73,8 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState({ ...params, isOpen: true, - showInfoIcon: params.showInfoIcon || '' + showInfoIcon: params.showInfoIcon || '', + showCheckbox: !!params.showCheckbox }); }); }; @@ -77,11 +84,20 @@ const PromptComponent = forwardRef(({ variant }, ref) => setState((prevState) => ({ ...prevState, isOpen: false })); }; + const handleCheckboxChange = () => { + setState((prevState) => ({ ...prevState, isChecked: !prevState.isChecked })); + }; + + const getCheckboxState = () => { + return !!state.isChecked; + }; + useImperativeHandle(ref, () => ({ - show + show, + getCheckboxState })); - const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon } = state; + const { isOpen, primaryOption, title, subtitle, showInfoIcon, headerIcon, showCheckbox } = state; const { resolve } = promiseInfoRef.current; return ( @@ -96,10 +112,28 @@ const PromptComponent = forwardRef(({ variant }, ref) => {subtitle && ( - + {subtitle} + {showCheckbox && ( + + } + label={Do not show again} + /> + )} )} diff --git a/src/custom/ResourceDetailFormatters/Formatter.tsx b/src/custom/ResourceDetailFormatters/Formatter.tsx index 11cde80b5..85b5855ae 100644 --- a/src/custom/ResourceDetailFormatters/Formatter.tsx +++ b/src/custom/ResourceDetailFormatters/Formatter.tsx @@ -35,6 +35,7 @@ import { StyledEnvironmentVariablesCode, StyledEnvironmentVariablesPre, StyledTitle, + TextValue, Wrap } from './styles'; import { @@ -201,7 +202,7 @@ export const OperatorDynamicFormatter: React.FC = return ( <> - {data} + {data} {regex.test(data) && } diff --git a/src/custom/ResourceDetailFormatters/styles.ts b/src/custom/ResourceDetailFormatters/styles.ts index 523eafb48..e60bd6501 100644 --- a/src/custom/ResourceDetailFormatters/styles.ts +++ b/src/custom/ResourceDetailFormatters/styles.ts @@ -52,7 +52,7 @@ export const Title = styled('span')({ fontFamily: 'Qanelas Soft, sans-serif' }); -export const ElementData = styled('span')({ +export const ElementData = styled('div')({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', @@ -184,14 +184,21 @@ export const EnvironmentVariableValue = styled('span')({ export const CodeFormatterPre = styled('pre')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121', color: theme.palette.text.primary, - width: '100%', wordWrap: 'break-word', overflowWrap: 'break-word', wordBreak: 'break-all', margin: 0, - padding: '0.5rem' + padding: '0.5rem', + maxWidth: '-moz-available' })); +export const TextValue = styled(Box)({ + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + width: 'inherit', + overflow: 'hidden' +}); + export const CodeFormatterCode = styled('code')(({ theme }) => ({ backgroundColor: theme.palette.mode === 'light' ? '#e9eff1' : '#212121', color: theme.palette.text.primary, diff --git a/src/custom/ResourceDetailFormatters/types.ts b/src/custom/ResourceDetailFormatters/types.ts index 9305cbaaf..93a3613a1 100644 --- a/src/custom/ResourceDetailFormatters/types.ts +++ b/src/custom/ResourceDetailFormatters/types.ts @@ -264,4 +264,5 @@ export interface GetResourceCleanDataProps { dispatchMsgToEditor?: (msg: any) => void; activeLabels?: string[]; showStatus?: boolean; + container?: any; } diff --git a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts index 4d4a0f1e3..b34d98ba4 100644 --- a/src/custom/ResourceDetailFormatters/useResourceCleanData.ts +++ b/src/custom/ResourceDetailFormatters/useResourceCleanData.ts @@ -67,13 +67,15 @@ export const useResourceCleanData = () => { resource, activeLabels, dispatchMsgToEditor, - showStatus = true + showStatus = true, + container }: GetResourceCleanDataProps) => { const parsedStatus = resource?.status?.attribute && JSON.parse(resource?.status?.attribute); const parsedSpec = resource?.spec?.attribute && JSON.parse(resource?.spec.attribute); const numberStates = structureNumberStates(parsedStatus, parsedSpec); const kind = resource?.kind ?? resource?.component?.kind; const cleanData = { + container: container, age: getAge(resource?.metadata?.creationTimestamp), kind: kind, status: showStatus && getStatus(parsedStatus), diff --git a/src/custom/TransferModal/TransferList/TransferList.tsx b/src/custom/TransferModal/TransferList/TransferList.tsx index 40098feec..3999ecb06 100644 --- a/src/custom/TransferModal/TransferList/TransferList.tsx +++ b/src/custom/TransferModal/TransferList/TransferList.tsx @@ -29,7 +29,7 @@ export function getFallbackImageBasedOnKind(kind: string | undefined): JSX.Eleme } export interface TransferListProps { - name: string; + name?: string; assignableData: ListItemType[]; assignedData: (data: ListItemType[]) => void; originalAssignedData: ListItemType[]; diff --git a/src/custom/UserSearchField/UserSearchField.tsx b/src/custom/UserSearchField/UserSearchField.tsx index 0132ab9d8..125e93940 100644 --- a/src/custom/UserSearchField/UserSearchField.tsx +++ b/src/custom/UserSearchField/UserSearchField.tsx @@ -1,5 +1,6 @@ import Autocomplete from '@mui/material/Autocomplete'; import CircularProgress from '@mui/material/CircularProgress'; +import { debounce } from 'lodash'; import React, { useState } from 'react'; import { Avatar, Box, Chip, Grid, TextField, Tooltip, Typography } from '../../base'; import { iconSmall } from '../../constants/iconsSizes'; @@ -88,21 +89,22 @@ const UserShareSearch: React.FC = ({ } }; - const handleInputChange = (_event: React.SyntheticEvent, value: string) => { - if (value === '') { - setOptions([]); - setOpen(false); - } else { - setSearchUserLoading(true); - fetchSuggestions(value).then((filteredData) => { - setOptions(filteredData); + const handleInputChange = debounce( + async (_event: React.SyntheticEvent, value: string) => { + if (value === '') { + setOptions([]); + setOpen(false); + } else { + setSearchUserLoading(true); + const suggestions = await fetchSuggestions(value); + setOptions(suggestions); setSearchUserLoading(false); - }); - setError(false); - setOpen(true); - } - }; - + setError(false); + setOpen(true); + } + }, + 300 + ); /** * Clone customUsersList component to pass necessary props */ diff --git a/src/custom/Workspaces/AssignmentModal.tsx b/src/custom/Workspaces/AssignmentModal.tsx index 4fc4d8652..61d20fbe6 100644 --- a/src/custom/Workspaces/AssignmentModal.tsx +++ b/src/custom/Workspaces/AssignmentModal.tsx @@ -1,4 +1,5 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import { Divider } from '../../base'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { TransferList } from '../TransferModal/TransferList'; import { ModalActionDiv } from './styles'; @@ -22,6 +23,21 @@ interface AssignmentModalProps { isAssignAllowed: boolean; isRemoveAllowed: boolean; helpText: string; + showViews?: boolean; + nameViews?: string; + assignableViewsData?: any[]; + handleAssignedViewsData?: (data: any) => void; + originalAssignedViewsData?: any[]; + + emptyStateViewsIcon?: JSX.Element; + handleAssignableViewsPage?: () => void; + handleAssignedViewsPage?: () => void; + originalLeftViewsCount?: number; + originalRightViewsCount?: number; + onAssignViews?: () => void; + disableTransferViews?: boolean; + isAssignAllowedViews?: boolean; + isRemoveAllowedViews?: boolean; } const AssignmentModal: React.FC = ({ @@ -42,7 +58,19 @@ const AssignmentModal: React.FC = ({ disableTransfer, isAssignAllowed, isRemoveAllowed, - helpText + helpText, + showViews, + nameViews, + assignableViewsData, + handleAssignedViewsData, + originalAssignedViewsData, + emptyStateViewsIcon, + handleAssignableViewsPage, + handleAssignedViewsPage, + originalLeftViewsCount, + originalRightViewsCount, + isAssignAllowedViews = false, + isRemoveAllowedViews = false }) => { return ( = ({ rightPermission={isRemoveAllowed} transferComponentType={''} /> + + {showViews && ( + {})} + originalAssignedData={originalAssignedViewsData || []} + emptyStateIconLeft={emptyStateViewsIcon || <>} + emtyStateMessageLeft={`No views available`} + emptyStateIconRight={emptyStateViewsIcon || <>} + emtyStateMessageRight={`No views assigned`} + assignablePage={handleAssignableViewsPage || (() => {})} + assignedPage={handleAssignedViewsPage || (() => {})} + originalLeftCount={originalLeftViewsCount ?? 0} + originalRightCount={originalRightViewsCount ?? 0} + leftPermission={isAssignAllowedViews} + rightPermission={isRemoveAllowedViews} + transferComponentType={''} + /> + )} diff --git a/src/custom/Workspaces/DesignTable.tsx b/src/custom/Workspaces/DesignTable.tsx index e099cc572..0ad01f4d9 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -257,13 +257,14 @@ const DesignTable: React.FC = ({ emptyStateIcon={} handleAssignablePage={designAssignment.handleAssignablePage} handleAssignedPage={designAssignment.handleAssignedPage} - originalLeftCount={designAssignment.data?.length} - originalRightCount={designAssignment.assignedItems?.length} + originalLeftCount={designAssignment.data?.length || 0} + originalRightCount={designAssignment.assignedItems?.length || 0} onAssign={designAssignment.handleAssign} disableTransfer={designAssignment.disableTransferButton} helpText={`Assign Designs to ${workspaceName}`} isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} + showViews={false} /> = ({ } handleAssignablePage={teamAssignment.handleAssignablePage} handleAssignedPage={teamAssignment.handleAssignedPage} - originalLeftCount={teamAssignment.data?.length} - originalRightCount={teamsOfWorkspace?.total_count} + originalLeftCount={teamAssignment.data?.length || 0} + originalRightCount={teamsOfWorkspace?.total_count || 0} onAssign={teamAssignment.handleAssign} disableTransfer={teamAssignment.disableTransferButton} helpText={`Assign Teams to ${workspaceName}`} diff --git a/src/custom/Workspaces/WorkspaceViewsTable.tsx b/src/custom/Workspaces/WorkspaceViewsTable.tsx new file mode 100644 index 000000000..2335dcf00 --- /dev/null +++ b/src/custom/Workspaces/WorkspaceViewsTable.tsx @@ -0,0 +1,312 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import { MUIDataTableColumn, MUIDataTableMeta } from 'mui-datatables'; +import React, { useState } from 'react'; +import { Accordion, AccordionDetails, AccordionSummary, Typography } from '../../base'; +import { DeleteIcon, EnvironmentIcon } from '../../icons'; +import { CHARCOAL, SistentThemeProvider } from '../../theme'; +import { NameDiv } from '../CatalogDesignTable/style'; +import { RESOURCE_TYPES } from '../CatalogDetail/types'; +import { CustomColumnVisibilityControl } from '../CustomColumnVisibilityControl'; +import { CustomTooltip } from '../CustomTooltip'; +import { ConditionalTooltip } from '../Helpers/CondtionalTooltip'; +import { useWindowDimensions } from '../Helpers/Dimension'; +import { + ColView, + updateVisibleColumns +} from '../Helpers/ResponsiveColumns/responsive-coulmns.tsx/responsive-column'; +import ResponsiveDataTable, { IconWrapper } from '../ResponsiveDataTable'; +import SearchBar from '../SearchBar'; +import { TooltipIcon } from '../TooltipIconButton'; +import AssignmentModal from './AssignmentModal'; +import EditButton from './EditButton'; +import useViewAssignment from './hooks/useViewsAssignment'; +import { CellStyle, CustomBodyRenderStyle, TableHeader, TableRightActionHeader } from './styles'; + +interface ViewsTableProps { + workspaceId: string; + workspaceName: string; + useGetViewsOfWorkspaceQuery: any; + useUnassignViewFromWorkspaceMutation: any; + useAssignViewToWorkspaceMutation: any; + isRemoveAllowed: boolean; + isAssignAllowed: boolean; + handleShowDetails: (viewId: string, viewName: string, filterType: string) => void; +} + +const colViews: ColView[] = [ + ['id', 'na'], + ['name', 'xs'], + ['description', 'm'], + ['organization_id', 'l'], + ['created_at', 'xl'], + ['updated_at', 'xl'], + ['visibility', 'l'], + ['actions', 'xs'] +]; + +export const ResizableDescriptionCell = ({ value }: { value: string }) => ( +
+ + + + {value} + + + +
+); + +const WorkspaceViewsTable: React.FC = ({ + workspaceId, + workspaceName, + isRemoveAllowed, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation, + isAssignAllowed, + handleShowDetails +}) => { + const [expanded, setExpanded] = useState(true); + const handleAccordionChange = () => { + setExpanded(!expanded); + }; + const [search, setSearch] = useState(''); + const [isSearchExpanded, setIsSearchExpanded] = useState(false); + const [page, setPage] = useState(0); + const [pageSize, setPageSize] = useState(10); + const [sortOrder, setSortOrder] = useState('updated_at desc'); + const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery({ + workspaceId, + page: page, + pageSize: pageSize, + search: search, + order: sortOrder + }); + const { width } = useWindowDimensions(); + const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); + const columns: MUIDataTableColumn[] = [ + { + name: 'id', + label: 'ID', + options: { + filter: false, + customBodyRender: (value) => + } + }, + { + name: 'name', + label: 'Name', + options: { + filter: false, + sort: true, + searchable: true, + customBodyRender: (value, tableMeta) => { + const viewId = tableMeta.tableData[tableMeta.rowIndex]?.id ?? ''; + const viewName = tableMeta.tableData[tableMeta.rowIndex]?.name ?? ''; + return ( + handleShowDetails(viewId, viewName, RESOURCE_TYPES.VIEW)}> + {value} + + ); + } + } + }, + { + name: 'created_at', + label: 'Created At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'updated_at', + label: 'Updated At', + options: { + filter: false, + sort: true, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'visibility', + label: 'Visibility', + options: { + filter: false, + sort: false, + searchable: true, + setCellHeaderProps: () => { + return { align: 'center' }; + } + } + }, + { + name: 'actions', + label: 'Actions', + options: { + filter: false, + sort: false, + searchable: false, + customBodyRender: (_: string, tableMeta: MUIDataTableMeta) => ( + + { + isRemoveAllowed && + unassignviewFromWorkspace({ + workspaceId, + viewId: tableMeta.rowData[0] + }); + }} + iconType="delete" + > + + + + ) + } + } + ]; + + const viewAssignment = useViewAssignment({ + workspaceId, + useGetViewsOfWorkspaceQuery, + useUnassignViewFromWorkspaceMutation, + useAssignViewToWorkspaceMutation + }); + + const [columnVisibility, setColumnVisibility] = useState>(() => { + const showCols = updateVisibleColumns(colViews, width); + const initialVisibility: Record = {}; + columns.forEach((col) => { + initialVisibility[col.name] = showCols[col.name]; + }); + return initialVisibility; + }); + + const options = { + filter: false, + responsive: 'standard', + selectableRows: 'none', + count: viewsOfWorkspace?.total_count, + rowsPerPage: pageSize, + page, + elevation: 0, + sortOrder: { + name: sortOrder.split(' ')[0], + direction: sortOrder.split(' ')[1] + }, + onTableChange: (action: string, tableState: any) => { + const sortInfo = tableState.announceText ? tableState.announceText.split(' : ') : []; + let order = ''; + if (tableState.activeColumn) { + order = `${columns[tableState.activeColumn].name} desc`; + } + switch (action) { + case 'changePage': + setPage(tableState.page); + break; + case 'changeRowsPerPage': + setPageSize(tableState.rowsPerPage); + break; + case 'sort': + if (sortInfo.length == 2) { + if (sortInfo[1] === 'ascending') { + order = `${columns[tableState.activeColumn].name} asc`; + } else { + order = `${columns[tableState.activeColumn].name} desc`; + } + } + if (order !== sortOrder) { + setSortOrder(order); + } + break; + } + } + }; + const [tableCols, updateCols] = useState(columns); + + return ( + + + } + sx={{ + backgroundColor: 'background.paper' + }} + > + + + Assigned Views + + + { + setSearch(value); + }} + onClear={() => { + setSearch(''); + }} + expanded={isSearchExpanded} + setExpanded={setIsSearchExpanded} + placeholder="Search workspaces..." + /> + + + + + + + + + + + } + name="Views" + assignableData={viewAssignment.data} + handleAssignedData={viewAssignment.handleAssignData} + originalAssignedData={viewAssignment.workspaceData} + emptyStateIcon={} + handleAssignablePage={viewAssignment.handleAssignablePage} + handleAssignedPage={viewAssignment.handleAssignedPage} + originalLeftCount={viewAssignment.data?.length || 0} + originalRightCount={viewsOfWorkspace?.total_count || 0} + onAssign={viewAssignment.handleAssign} + disableTransfer={viewAssignment.disableTransferButton} + helpText={`Assign Views to ${workspaceName}`} + isAssignAllowed={isAssignAllowed} + isRemoveAllowed={isRemoveAllowed} + /> + + ); +}; + +export default WorkspaceViewsTable; diff --git a/src/custom/Workspaces/hooks/useDesignAssignment.tsx b/src/custom/Workspaces/hooks/useDesignAssignment.tsx index 9931f5819..31f268ff9 100644 --- a/src/custom/Workspaces/hooks/useDesignAssignment.tsx +++ b/src/custom/Workspaces/hooks/useDesignAssignment.tsx @@ -95,6 +95,9 @@ const useDesignAssignment = ({ }; const getAddedAndRemovedDesigns = (allAssignedDesigns: Pattern[]): AddedAndRemovedDesigns => { + if (Array.isArray(workspaceDesignsData) && workspaceDesignsData.length === 0) { + return { addedDesignsIds: [], removedDesignsIds: [] }; + } const originalDesignsIds = workspaceDesignsData.map((design) => design.id); const updatedDesignsIds = allAssignedDesigns.map((design) => design.id); @@ -104,6 +107,11 @@ const useDesignAssignment = ({ return { addedDesignsIds, removedDesignsIds }; }; + const isDesignsActivityOccurred = (allAssignedDesigns: Pattern[]): boolean => { + const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(allAssignedDesigns); + return addedDesignsIds.length > 0 || removedDesignsIds.length > 0; + }; + const handleAssignDesigns = async (): Promise => { const { addedDesignsIds, removedDesignsIds } = getAddedAndRemovedDesigns(assignedDesigns); @@ -144,6 +152,7 @@ const useDesignAssignment = ({ handleAssignedPage: handleAssignedPageDesign, handleAssign: handleAssignDesigns, handleAssignData: handleAssignDesignsData, + isActivityOccurred: isDesignsActivityOccurred, disableTransferButton, assignedItems: assignedDesigns }; diff --git a/src/custom/Workspaces/hooks/useViewsAssignment.tsx b/src/custom/Workspaces/hooks/useViewsAssignment.tsx new file mode 100644 index 000000000..6f1294b9f --- /dev/null +++ b/src/custom/Workspaces/hooks/useViewsAssignment.tsx @@ -0,0 +1,158 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ +import { useEffect, useState } from 'react'; +import { Pattern } from '../../CustomCatalog/CustomCard'; +import { withDefaultPageArgs } from '../../PerformersSection/PerformersSection'; +import { AssignmentHookResult } from '../types'; + +interface AddedAndRemovedViews { + addedviewsIds: string[]; + removedviewsIds: string[]; +} + +interface useViewAssignmentProps { + workspaceId: string; + useGetViewsOfWorkspaceQuery: any; + useAssignViewToWorkspaceMutation: any; + useUnassignViewFromWorkspaceMutation: any; +} + +const useViewAssignment = ({ + workspaceId, + useGetViewsOfWorkspaceQuery, + useAssignViewToWorkspaceMutation, + useUnassignViewFromWorkspaceMutation +}: useViewAssignmentProps): AssignmentHookResult => { + const [viewsPage, setviewsPage] = useState(0); + const [viewsData, setviewsData] = useState([]); + const viewsPageSize = 25; + const [viewsOfWorkspacePage, setviewsOfWorkspacePage] = useState(0); + const [workspaceviewsData, setWorkspaceviewsData] = useState([]); + const [assignviewModal, setAssignviewModal] = useState(false); + const [skipviews, setSkipviews] = useState(true); + const [disableTransferButton, setDisableTransferButton] = useState(true); + const [assignedviews, setAssignedviews] = useState([]); + + const { data: views } = useGetViewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsPage, + pagesize: viewsPageSize, + filter: '{"assigned":false}' + }), + { + skip: skipviews + } + ); + + const { data: viewsOfWorkspace } = useGetViewsOfWorkspaceQuery( + withDefaultPageArgs({ + workspaceId, + page: viewsOfWorkspacePage, + pagesize: viewsPageSize + }), + { + skip: skipviews + } + ); + + const [assignviewToWorkspace] = useAssignViewToWorkspaceMutation(); + const [unassignviewFromWorkspace] = useUnassignViewFromWorkspaceMutation(); + + useEffect(() => { + const viewsDataRtk = views?.views ? views.views : []; + setviewsData((prevData) => [...prevData, ...viewsDataRtk]); + }, [views]); + + useEffect(() => { + const viewsOfWorkspaceDataRtk = viewsOfWorkspace?.views ? viewsOfWorkspace.views : []; + setWorkspaceviewsData((prevData) => [...prevData, ...viewsOfWorkspaceDataRtk]); + }, [viewsOfWorkspace]); + + const handleAssignviewModal = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(true); + setSkipviews(false); + }; + + const handleAssignviewModalClose = (e?: React.MouseEvent): void => { + e?.stopPropagation(); + setAssignviewModal(false); + setSkipviews(true); + }; + + const handleAssignablePageview = (): void => { + const pagesCount = Math.ceil(Number(views?.total_count) / viewsPageSize); + if (viewsPage < pagesCount - 1) { + setviewsPage((prevviewsPage) => prevviewsPage + 1); + } + }; + + const handleAssignedPageview = (): void => { + const pagesCount = Math.ceil(Number(viewsOfWorkspace?.total_count) / viewsPageSize); + if (viewsOfWorkspacePage < pagesCount - 1) { + setviewsOfWorkspacePage((prevPage) => prevPage + 1); + } + }; + + const getAddedAndRemovedviews = (allAssignedviews: Pattern[]): AddedAndRemovedViews => { + const originalviewsIds = workspaceviewsData.map((view) => view.id); + const updatedviewsIds = allAssignedviews.map((view) => view.id); + + const addedviewsIds = updatedviewsIds.filter((id) => !originalviewsIds.includes(id)); + const removedviewsIds = originalviewsIds.filter((id) => !updatedviewsIds.includes(id)); + + return { addedviewsIds, removedviewsIds }; + }; + + const isViewsActivityOccurred = (allViews: Pattern[]): boolean => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(allViews); + return addedviewsIds.length > 0 || removedviewsIds.length > 0; + }; + + const handleAssignviews = async (): Promise => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(assignedviews); + + addedviewsIds.map((id) => + assignviewToWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + removedviewsIds.map((id) => + unassignviewFromWorkspace({ + workspaceId, + viewId: id + }).unwrap() + ); + + setviewsData([]); + setWorkspaceviewsData([]); + setviewsPage(0); + setviewsOfWorkspacePage(0); + handleAssignviewModalClose(); + }; + + const handleAssignviewsData = (updatedAssignedData: Pattern[]): void => { + const { addedviewsIds, removedviewsIds } = getAddedAndRemovedviews(updatedAssignedData); + setDisableTransferButton(!(addedviewsIds.length > 0 || removedviewsIds.length > 0)); + setAssignedviews(updatedAssignedData); + }; + + return { + data: viewsData, + workspaceData: workspaceviewsData, + assignModal: assignviewModal, + handleAssignModal: handleAssignviewModal, + handleAssignModalClose: handleAssignviewModalClose, + handleAssignablePage: handleAssignablePageview, + handleAssignedPage: handleAssignedPageview, + handleAssign: handleAssignviews, + isActivityOccurred: isViewsActivityOccurred, + handleAssignData: handleAssignviewsData, + disableTransferButton, + assignedItems: assignedviews + }; +}; + +export default useViewAssignment; diff --git a/src/custom/Workspaces/index.ts b/src/custom/Workspaces/index.ts index 6a0dfa9d4..82cd1eacd 100644 --- a/src/custom/Workspaces/index.ts +++ b/src/custom/Workspaces/index.ts @@ -2,16 +2,20 @@ import AssignmentModal from './AssignmentModal'; import DesignTable from './DesignTable'; import EnvironmentTable from './EnvironmentTable'; import WorkspaceTeamsTable from './WorkspaceTeamsTable'; +import WorkspaceViewsTable from './WorkspaceViewsTable'; import useDesignAssignment from './hooks/useDesignAssignment'; import useEnvironmentAssignment from './hooks/useEnvironmentAssignment'; import useTeamAssignment from './hooks/useTeamAssignment'; +import useViewAssignment from './hooks/useViewsAssignment'; export { AssignmentModal, DesignTable, EnvironmentTable, WorkspaceTeamsTable, + WorkspaceViewsTable, useDesignAssignment, useEnvironmentAssignment, - useTeamAssignment + useTeamAssignment, + useViewAssignment }; diff --git a/src/custom/Workspaces/types.ts b/src/custom/Workspaces/types.ts index 5ad04b8cd..280c4ec97 100644 --- a/src/custom/Workspaces/types.ts +++ b/src/custom/Workspaces/types.ts @@ -8,6 +8,7 @@ export interface AssignmentHookResult { handleAssignedPage: () => void; handleAssign: () => void; handleAssignData: (data: T[]) => void; + isActivityOccurred?: (allItems: T[]) => boolean; disableTransferButton: boolean; assignedItems: T[]; } diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 2a4e5e93b..cc47f9dd8 100644 --- a/src/custom/index.tsx +++ b/src/custom/index.tsx @@ -36,7 +36,7 @@ import { LearningCard } from './LearningCard'; import { BasicMarkdown, RenderMarkdown } from './Markdown'; import { ModalCard } from './ModalCard'; import PopperListener, { IPopperListener } from './PopperListener'; -import PromptComponent from './Prompt'; +import { PROMPT_VARIANTS, PromptComponent } from './Prompt'; import ResponsiveDataTable, { DataTableEllipsisMenu, ResponsiveDataTableProps @@ -57,6 +57,7 @@ export { InputSearchField } from './InputSearchField'; export { LearningContent } from './LearningContent'; export { NavigationNavbar } from './NavigationNavbar'; export { Note } from './Note'; +export { Panel } from './Panel'; export { PerformersSection, PerformersSectionButton } from './PerformersSection'; export { SetupPreReq } from './SetupPrerequisite'; export { StyledChapter } from './StyledChapter'; @@ -90,6 +91,7 @@ export { InfoTooltip, LearningCard, ModalCard, + PROMPT_VARIANTS, PopperListener, PromptComponent, ResponsiveDataTable, diff --git a/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx new file mode 100644 index 000000000..31f4a9e22 --- /dev/null +++ b/src/icons/PanelDragHandle/PanelDragHandleIcon.tsx @@ -0,0 +1,34 @@ +import { FC } from 'react'; +import { IconProps } from '../types'; + +export const PanelDragHandleIcon: FC = ({ + height = 24, + width = 24, + fill = '#E8EFF3', + ...props +}) => { + return ( + + + + + + + + + + + ); +}; + +export default PanelDragHandleIcon; diff --git a/src/icons/PanelDragHandle/index.tsx b/src/icons/PanelDragHandle/index.tsx new file mode 100644 index 000000000..3abe60e39 --- /dev/null +++ b/src/icons/PanelDragHandle/index.tsx @@ -0,0 +1 @@ +export { default as PanelDragHandleIcon } from './PanelDragHandleIcon'; diff --git a/src/index.tsx b/src/index.tsx index 58752c32b..ee7835fe2 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,3 +6,4 @@ export * from './icons'; export * from './redux-persist'; export * from './schemas'; export * from './theme'; +export * from './utils'; diff --git a/src/theme/colors/colors.ts b/src/theme/colors/colors.ts index 45c94f786..5136bfda0 100644 --- a/src/theme/colors/colors.ts +++ b/src/theme/colors/colors.ts @@ -102,6 +102,11 @@ export const charcoal = { 10: '#000D12' }; +export const gray = { + 10: '#1A1A1A', + 20: '#212121' +}; + export const accentGrey = { 100: '#F6F8F8', 90: '#E8EFF3', diff --git a/src/theme/colors/index.ts b/src/theme/colors/index.ts index 096a406b8..3d1a19607 100644 --- a/src/theme/colors/index.ts +++ b/src/theme/colors/index.ts @@ -57,6 +57,7 @@ export { darkSlateGray, darkTeal, eerieBlack, + gray, green, jungleGreen, keppel, diff --git a/src/theme/components/button.modifier.ts b/src/theme/components/button.modifier.ts index 12a6495b4..7d2788b75 100644 --- a/src/theme/components/button.modifier.ts +++ b/src/theme/components/button.modifier.ts @@ -5,7 +5,7 @@ export const MuiButton: Components['MuiButton'] = { root: ({ theme }) => { const { palette: { - background: { brand, neutral: BgNeutral }, + background: { brand, hover }, text: { disabled, constant, neutral: TextNeutral }, border: { neutral } }, @@ -24,7 +24,7 @@ export const MuiButton: Components['MuiButton'] = { '&.MuiButton-outlined': { border: `1px solid ${neutral?.default}`, '&:hover': { - backgroundColor: BgNeutral?.pressed, + backgroundColor: hover, color: TextNeutral?.default } }, diff --git a/src/theme/components/tab.modifier.ts b/src/theme/components/tab.modifier.ts index ed7ca5875..58e49f42e 100644 --- a/src/theme/components/tab.modifier.ts +++ b/src/theme/components/tab.modifier.ts @@ -6,7 +6,7 @@ export const MuiTab: Components['MuiTab'] = { const { palette: { text: { default: defaultText }, - background: { default: defaultBackground } + background: { tabs: defaultBackground } } } = theme; return { diff --git a/src/theme/components/tabs.modifier.ts b/src/theme/components/tabs.modifier.ts index 63173a06c..1fb4ed457 100644 --- a/src/theme/components/tabs.modifier.ts +++ b/src/theme/components/tabs.modifier.ts @@ -3,7 +3,7 @@ import { Components, Theme } from '@mui/material'; export const MuiTabs: Components['MuiTabs'] = { styleOverrides: { root: ({ theme }) => ({ - backgroundColor: theme.palette.background.default + backgroundColor: theme.palette.background.tabs }), indicator: ({ theme }) => ({ backgroundColor: theme.palette.background.brand?.default diff --git a/src/theme/palette.ts b/src/theme/palette.ts index d1165091c..8ecfeec2f 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -19,6 +19,7 @@ declare module '@mui/material/styles' { default: string; }; tabs?: string; + card?: string; tertiary?: string; hover?: string; blur?: { @@ -195,7 +196,8 @@ export const lightModePalette: PaletteOptions = { default: Colors.charcoal[100], secondary: Colors.accentGrey[90], tertiary: Colors.accentGrey[80], - tabs: Colors.charcoal[70], + tabs: Colors.accentGrey[100], // TODO: Make this name or token to more genric + card: Colors.charcoal[100], hover: Colors.charcoal[90], supplementary: Colors.accentGrey[40], blur: { @@ -255,6 +257,7 @@ export const lightModePalette: PaletteOptions = { tertiary: Colors.red[70] }, code: Colors.charcoal[90], + constant: { white: Colors.accentGrey[100], disabled: Colors.charcoal[70], @@ -311,7 +314,8 @@ export const darkModePalette: PaletteOptions = { default: Colors.charcoal[10], secondary: Colors.accentGrey[20], tertiary: Colors.accentGrey[30], - tabs: Colors.charcoal[110], + tabs: Colors.gray[10], // TODO: Make this name or token to more genric + card: Colors.gray[20], hover: Colors.charcoal[20], supplementary: Colors.accentGrey[40], blur: { @@ -326,7 +330,7 @@ export const darkModePalette: PaletteOptions = { brand: { default: Colors.keppel[40], hover: Colors.keppel[50], - disabled: Colors.charcoal[20], + disabled: Colors.charcoal[30], pressed: Colors.keppel[60], secondary: Colors.keppel[20], tertiary: Colors.keppel[10] @@ -349,7 +353,7 @@ export const darkModePalette: PaletteOptions = { tertiary: Colors.blue[10] }, success: { - default: Colors.green[40], + default: Colors.KEPPEL, hover: Colors.green[50], pressed: Colors.green[60], secondary: Colors.green[20], @@ -369,7 +373,7 @@ export const darkModePalette: PaletteOptions = { secondary: Colors.red[20], tertiary: Colors.red[10] }, - code: Colors.accentGrey[90], + code: Colors.charcoal[10], constant: { white: Colors.accentGrey[100], disabled: Colors.charcoal[70], diff --git a/src/utils/components.ts b/src/utils/components.ts new file mode 100644 index 000000000..2d1e4afff --- /dev/null +++ b/src/utils/components.ts @@ -0,0 +1,14 @@ +export const componentIcon = ({ + kind, + model, + color +}: { + kind: string; + model: string; + color: 'white' | 'color' | 'complete'; +}) => { + if (!kind || !model || !color) { + return null; + } + return `/ui/public/static/img/meshmodels/${model}/${color}/${kind.toLowerCase()}-${color}.svg`; +}; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 000000000..07635cbbc --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1 @@ +export * from './components';