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/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/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..46c3d9cf1 100644 --- a/src/custom/Workspaces/DesignTable.tsx +++ b/src/custom/Workspaces/DesignTable.tsx @@ -264,6 +264,7 @@ const DesignTable: React.FC = ({ helpText={`Assign Designs to ${workspaceName}`} isAssignAllowed={isAssignAllowed} isRemoveAllowed={isRemoveAllowed} + showViews={false} /> 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..4f6f5fb33 100644 --- a/src/custom/Workspaces/hooks/useDesignAssignment.tsx +++ b/src/custom/Workspaces/hooks/useDesignAssignment.tsx @@ -104,6 +104,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 +149,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 10ede3d60..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 @@ -91,6 +91,7 @@ export { InfoTooltip, LearningCard, ModalCard, + PROMPT_VARIANTS, PopperListener, PromptComponent, ResponsiveDataTable, 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';