From 7b57fc663a90014a0a4aec1e74e3c7cbb5334b29 Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 11 Jun 2024 11:03:45 +0300 Subject: [PATCH 1/7] Web: Components: fixed table for multiple windows --- .../Section/Body/TableView/TableContainer.js | 1 + .../Section/Body/TableView/TableHeader.js | 2 + .../shared/components/table/Table.types.ts | 1 + .../shared/components/table/TableHeader.tsx | 939 +----------------- 4 files changed, 40 insertions(+), 903 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js index 89c0c671d1..9a16198ff7 100644 --- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js +++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js @@ -235,6 +235,7 @@ const Table = ({ navigate={navigate} location={location} isRooms={isRooms} + filesList={filesList} /> ); } diff --git a/packages/shared/components/table/Table.types.ts b/packages/shared/components/table/Table.types.ts index 6c42605476..e46382cff2 100644 --- a/packages/shared/components/table/Table.types.ts +++ b/packages/shared/components/table/Table.types.ts @@ -63,6 +63,7 @@ export interface TableHeaderProps { sortBy: string; sorted: boolean; columnStorageName: string; + tableStorageName: string; sectionWidth: number; onClick: () => void; resetColumnsSize: boolean; diff --git a/packages/shared/components/table/TableHeader.tsx b/packages/shared/components/table/TableHeader.tsx index 4591a7e07a..a954473bf0 100644 --- a/packages/shared/components/table/TableHeader.tsx +++ b/packages/shared/components/table/TableHeader.tsx @@ -38,876 +38,8 @@ import { import { TTableColumn, TableHeaderProps } from "./Table.types"; import { TableSettings } from "./sub-components/TableSettings"; import { TableHeaderCell } from "./sub-components/TableHeaderCell"; -// import { -// DEFAULT_MIN_COLUMN_SIZE, -// MIN_SIZE_FIRST_COLUMN, -// SETTINGS_SIZE, -// } from "./Table.constants"; import { checkingForUnfixedSize, getSubstring } from "./Table.utils"; -// function TableHeader({ -// containerRef, -// columnStorageName, -// columnInfoPanelStorageName, -// resetColumnsSize, - -// columns, -// setHideColumns, - -// sortBy, -// sorted, -// isLengthenHeader, - -// tagRef, -// settingsTitle, -// sortingVisible = true, -// infoPanelVisible = false, -// useReactWindow = false, -// showSettings = true, -// ...rest -// }: TableHeaderProps) { -// const headerRef = React.useRef(null); -// const throttledResize = React.useRef void>>(null); -// const resizeRef = React.useRef void)>(null); -// const theme = useTheme(); - -// const [state, setState] = React.useState<{ -// columnIndex: number; -// hideColumns: boolean; -// }>({ columnIndex: 0, hideColumns: false }); - -// const resetColumns = React.useCallback< -// (resetToDefault?: boolean) => void -// >(() => { -// let str = ""; - -// const enableColumns = columns -// .filter((x: TTableColumn) => x.enable) -// .filter((x: TTableColumn) => !x.defaultSize) -// .filter((x: TTableColumn) => !x.default); - -// const container = containerRef.current -// ? containerRef.current -// : document.getElementById("table-container"); -// const containerWidth = container ? +container.clientWidth : 0; - -// const firstColumnPercent = 40; -// const percent = 60 / enableColumns.length; - -// const wideColumnSize = `${(containerWidth * firstColumnPercent) / 100}px`; -// const otherColumns = `${(containerWidth * percent) / 100}px`; - -// columns.forEach((col: TTableColumn) => { -// if (col.default) { -// str += `${wideColumnSize} `; -// } else -// str += col.enable -// ? col.defaultSize -// ? `${col.defaultSize}px ` -// : `${otherColumns} ` -// : "0px "; -// }); - -// str += `${SETTINGS_SIZE}px`; -// if (container) container.style.gridTemplateColumns = str; - -// if (headerRef.current) { -// headerRef.current.style.gridTemplateColumns = str; -// headerRef.current.style.width = `${containerWidth}px`; -// } - -// if (str) { -// if (!infoPanelVisible) localStorage.setItem(columnStorageName, str); -// else localStorage.setItem(columnInfoPanelStorageName, str); -// } - -// if (resizeRef.current) resizeRef.current(); -// }, [ -// columnInfoPanelStorageName, -// columnStorageName, -// columns, -// containerRef, -// infoPanelVisible, -// ]); - -// const distributionOverWidth = React.useCallback( -// (overWidth: number, gridTemplateColumns: string[]) => { -// const newGridTemplateColumns: string[] = JSON.parse( -// JSON.stringify(gridTemplateColumns), -// ); - -// let countColumns = 0; -// const defaultColumnSize = -// columns.find((col) => col.defaultSize)?.defaultSize || 0; - -// newGridTemplateColumns.forEach((item: string, index: number) => { -// const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize); -// if (!unfixedSize) return; - -// const column = document.getElementById(`column_${index}`); -// const minWidth = column?.dataset?.minWidth; -// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN; - -// if ( -// (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) !== -// getSubstring(item) -// ) -// countColumns += 1; -// }); - -// const addWidth = overWidth / countColumns; - -// newGridTemplateColumns.forEach((item, index) => { -// const unfixedSize = checkingForUnfixedSize(item, defaultColumnSize); -// if (!unfixedSize) return; - -// const column = document.getElementById(`column_${index}`); -// const minWidth = column?.dataset?.minWidth; -// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN; - -// const itemSubstring = getSubstring(item); - -// if ((index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE) === itemSubstring) -// return; - -// const differenceWithMinimum = -// itemSubstring - (index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE); - -// if (differenceWithMinimum >= addWidth) { -// newGridTemplateColumns[index] = `${itemSubstring - addWidth}px`; -// } else { -// newGridTemplateColumns[index] = `${ -// index === 0 ? minSize : DEFAULT_MIN_COLUMN_SIZE -// }px`; -// } -// }); - -// return newGridTemplateColumns; -// }, -// [columns], -// ); - -// const addNewColumns = React.useCallback< -// ( -// gridTemplateColumns: string[], -// activeColumnIndex: number, -// containerWidth: number, -// ) => boolean -// >( -// (gridTemplateColumns, activeColumnIndex, containerWidth) => { -// const clearSize = gridTemplateColumns.map((c) => getSubstring(c)); -// const maxSize = Math.max(...clearSize); - -// const defaultSize = columns[activeColumnIndex - 1].defaultSize || 0; -// const indexOfMaxSize = clearSize.findLastIndex((s) => s === maxSize); - -// const addedColumn = 1; -// const enableColumnsLength = -// columns.filter((column) => !column.defaultSize && column.enable) -// .length - addedColumn; -// const allColumnsLength = columns.filter( -// (column) => !column.defaultSize, -// ).length; - -// const defaultSizeColumn = -// columns.find((column) => column.defaultSize)?.defaultSize || 0; - -// const widthColumns = containerWidth - SETTINGS_SIZE - defaultSizeColumn; - -// const newColumnSize = defaultSize || widthColumns / allColumnsLength; - -// const newSizeMaxColumn = maxSize - newColumnSize; - -// if ( -// (indexOfMaxSize === 0 && newSizeMaxColumn < MIN_SIZE_FIRST_COLUMN) || -// (indexOfMaxSize !== 0 && newSizeMaxColumn < DEFAULT_MIN_COLUMN_SIZE) || -// newColumnSize < DEFAULT_MIN_COLUMN_SIZE || -// enableColumnsLength === 1 -// ) { -// localStorage.removeItem(columnStorageName); -// resetColumns(); -// return true; -// } - -// gridTemplateColumns[indexOfMaxSize] = `${newSizeMaxColumn}px`; -// gridTemplateColumns[activeColumnIndex] = `${newColumnSize}px`; -// return false; -// }, -// [columnStorageName, columns, resetColumns], -// ); - -// const updateTableRows = React.useCallback<(str: string) => void>( -// (str: string) => { -// if (!useReactWindow) return; - -// const rows = document.querySelectorAll( -// ".table-row, .table-list-item", -// ) as NodeListOf; - -// if (rows?.length) { -// for (let i = 0; i < rows.length; i += 1) { -// rows[i].style.gridTemplateColumns = str; -// } -// } -// }, -// [useReactWindow], -// ); - -// const onResize = React.useCallback<() => void>(() => { -// let activeColumnIndex = null; - -// const container = containerRef.current -// ? containerRef.current -// : document.getElementById("table-container"); - -// if (!container) return; - -// const storageSize = -// !resetColumnsSize && localStorage.getItem(columnStorageName); - -// const defaultSize = -// columns.find((col: TTableColumn) => col.defaultSize)?.defaultSize || 0; - -// if (storageSize) { -// const splitStorage = storageSize.split(" "); - -// const isInvalid = splitStorage.some((s) => s === "NaNpx"); - -// if ( -// (defaultSize && -// splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) || -// getSubstring(splitStorage[0]) <= DEFAULT_MIN_COLUMN_SIZE || -// isInvalid -// ) { -// localStorage.removeItem(columnStorageName); -// onResize(); -// return; -// } -// } - -// const containerGridTemplateColumns = -// container.style.gridTemplateColumns.split(" "); - -// const tableContainer = storageSize -// ? storageSize.split(" ") -// : containerGridTemplateColumns; - -// if ( -// containerGridTemplateColumns.length === 1 && -// !state.hideColumns && -// storageSize -// ) { -// const hasContent = !!storageSize.split(" ").find((item, index) => { -// if (index === 0) return; -// return checkingForUnfixedSize(item, defaultSize); -// }); - -// // If content column sizes are calculated as empty after changing view -// if (!hasContent) { -// resetColumns(); -// return; -// } -// } - -// // columns.length + 1 - its settings column -// if (tableContainer.length !== columns.length + 1) { -// resetColumns(); -// return; -// } - -// if (!container) return; - -// const containerWidth = +container.clientWidth; - -// const oldWidth = -// tableContainer -// .map((column: string) => getSubstring(column)) -// .reduce((x: number, y: number) => x + y) - -// defaultSize - -// SETTINGS_SIZE; - -// let str = ""; -// let gridTemplateColumnsWithoutOverfilling: string[] = []; - -// if (tableContainer.length > 1) { -// const gridTemplateColumns: string[] = []; -// let hideColumns = false; - -// let contentColumnsCount = 0; -// let contentColumnsCountInfoPanel = 0; - -// const storageInfoPanelSize = localStorage.getItem( -// columnInfoPanelStorageName, -// ); - -// if (storageInfoPanelSize) { -// contentColumnsCountInfoPanel = storageInfoPanelSize -// .split(" ") -// .filter((item) => checkingForUnfixedSize(item, defaultSize)).length; - -// contentColumnsCount = tableContainer.filter((item) => -// checkingForUnfixedSize(item, defaultSize), -// ).length; -// } - -// const incorrectNumberColumns = -// contentColumnsCountInfoPanel < contentColumnsCount && -// !state.hideColumns; - -// const tableInfoPanelContainer = -// storageInfoPanelSize && !incorrectNumberColumns -// ? storageInfoPanelSize.split(" ") -// : tableContainer; - -// let containerMinWidth = containerWidth - defaultSize - SETTINGS_SIZE; - -// tableInfoPanelContainer.forEach((item, index) => { -// const column = document.getElementById(`column_${index}`); - -// const enable = -// index === tableContainer.length - 1 || -// (column ? column.dataset.enable === "true" : item !== "0px"); - -// if ( -// enable && -// (item !== `${defaultSize}px` || `${defaultSize}px` === `0px`) && -// item !== `${SETTINGS_SIZE}px` -// ) { -// if (column?.dataset?.minWidth) { -// containerMinWidth -= +column.dataset.minWidth; -// } else { -// containerMinWidth -= DEFAULT_MIN_COLUMN_SIZE; -// } -// } -// }); - -// if (containerMinWidth < 0) { -// hideColumns = true; -// } - -// if (state.hideColumns !== hideColumns) { -// setState((s) => ({ ...s, hideColumns })); -// setHideColumns(hideColumns); -// } - -// if (hideColumns) { -// tableInfoPanelContainer.forEach((item, index) => { -// const column = document.getElementById(`column_${index}`); - -// if (column?.dataset?.minWidth) { -// gridTemplateColumns.push( -// `${containerWidth - defaultSize - SETTINGS_SIZE}px`, -// ); -// } else if ( -// item === `${defaultSize}px` || -// item === `${SETTINGS_SIZE}px` -// ) { -// gridTemplateColumns.push(item); -// } else { -// gridTemplateColumns.push("0px"); -// } -// }); -// } - -// let hasGridTemplateColumnsWithoutOverfilling = false; -// if (infoPanelVisible) { -// if (!hideColumns) { -// const contentWidth = containerWidth - defaultSize - SETTINGS_SIZE; - -// let enabledColumnsCount = 0; - -// tableInfoPanelContainer.forEach((item: string, index: number) => { -// if ( -// index !== 0 && -// item !== "0px" && -// item !== `${defaultSize}px` && -// item !== `${SETTINGS_SIZE}px` -// ) { -// enabledColumnsCount += 1; -// } -// }); - -// const changedWidth = -// tableInfoPanelContainer -// .map((column: string) => getSubstring(column)) -// .reduce((x: number, y: number) => x + y) - -// defaultSize - -// SETTINGS_SIZE; - -// if ( -// contentWidth - enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE > -// getSubstring(tableInfoPanelContainer[0]) -// ) { -// const currentContentWidth = -// contentWidth - +getSubstring(tableInfoPanelContainer[0]); - -// let overWidth = 0; - -// tableInfoPanelContainer.forEach((item: string, index: number) => { -// if (index === 0) { -// gridTemplateColumns.push(item); -// } else { -// const column = document.getElementById(`column_${index}`); - -// const enable = -// index === tableInfoPanelContainer.length - 1 || -// (column ? column.dataset.enable === "true" : item !== "0px"); - -// const defaultColumnSize = column && column.dataset.defaultSize; - -// if (!enable) { -// gridTemplateColumns.push("0px"); -// } else if (item !== `${SETTINGS_SIZE}px`) { -// const percent = -// (getSubstring(item) / -// (changedWidth - -// +getSubstring(tableInfoPanelContainer[0]))) * -// 100; - -// const newItemWidth = defaultColumnSize -// ? `${defaultColumnSize}px` -// : (currentContentWidth * percent) / 100 > -// DEFAULT_MIN_COLUMN_SIZE -// ? `${(currentContentWidth * percent) / 100}px` -// : `${DEFAULT_MIN_COLUMN_SIZE}px`; - -// if ( -// (currentContentWidth * percent) / 100 < -// DEFAULT_MIN_COLUMN_SIZE && -// !defaultColumnSize -// ) { -// overWidth += -// DEFAULT_MIN_COLUMN_SIZE - -// (currentContentWidth * percent) / 100; -// } - -// gridTemplateColumns.push(newItemWidth); -// } else { -// gridTemplateColumns.push(item); -// } -// } -// }); - -// if (overWidth > 0) { -// gridTemplateColumns.forEach((column, index) => { -// const columnWidth = getSubstring(column); - -// if ( -// index !== 0 && -// column !== "0px" && -// column !== `${defaultSize}px` && -// column !== `${SETTINGS_SIZE}px` && -// columnWidth > DEFAULT_MIN_COLUMN_SIZE -// ) { -// const availableWidth = columnWidth - DEFAULT_MIN_COLUMN_SIZE; - -// if (availableWidth < Math.abs(overWidth)) { -// overWidth = Math.abs(overWidth) - availableWidth; -// return (gridTemplateColumns[index] = `${ -// columnWidth - availableWidth -// }px`); -// } -// const temp = overWidth; - -// overWidth = 0; - -// return (gridTemplateColumns[index] = `${ -// columnWidth - Math.abs(temp) -// }px`); -// } -// }); -// } -// } else { -// tableInfoPanelContainer.forEach((item: string, index: number) => { -// const column = document.getElementById(`column_${index}`); - -// const enable = -// index === tableInfoPanelContainer.length - 1 || -// (column ? column.dataset.enable === "true" : item !== "0px"); - -// const defaultColumnSize = column && column.dataset.defaultSize; - -// if (!enable) { -// gridTemplateColumns.push("0px"); -// } else if (item !== `${SETTINGS_SIZE}px`) { -// const newItemWidth = defaultColumnSize -// ? `${defaultColumnSize}px` -// : index === 0 -// ? `${ -// contentWidth - -// enabledColumnsCount * DEFAULT_MIN_COLUMN_SIZE -// }px` -// : `${DEFAULT_MIN_COLUMN_SIZE}px`; - -// gridTemplateColumns.push(newItemWidth); -// } else { -// gridTemplateColumns.push(item); -// } -// }); -// } -// } -// } else { -// let overWidth = 0; -// if (!hideColumns) { -// tableContainer.forEach((i: string, index: number) => { -// const item = tableContainer[index]; - -// const column = document.getElementById(`column_${index}`); -// const enable = -// index === tableContainer.length - 1 || -// (column ? column.dataset.enable === "true" : item !== "0px"); -// const defaultColumnSize = column && column.dataset.defaultSize; - -// const isActiveNow = item === "0px" && enable; -// if (isActiveNow && column) activeColumnIndex = index; - -// if (!enable) { -// gridTemplateColumns.push("0px"); - -// let colIndex = 1; -// let leftEnableColumn = gridTemplateColumns[index - colIndex]; -// while (leftEnableColumn === "0px") { -// colIndex += 1; -// leftEnableColumn = gridTemplateColumns[index - colIndex]; -// } - -// // added the size of the disabled column to the left column -// gridTemplateColumns[index - colIndex] = `${ -// getSubstring(gridTemplateColumns[index - colIndex]) + -// getSubstring(item) -// } -// px`; -// } else if (item !== `${SETTINGS_SIZE}px`) { -// const percent = (getSubstring(item) / oldWidth) * 100; - -// let newItemWidth = defaultColumnSize -// ? `${defaultColumnSize}px` -// : percent === 0 -// ? `${DEFAULT_MIN_COLUMN_SIZE}px` -// : `${ -// ((containerWidth - defaultSize - SETTINGS_SIZE) * -// percent) / -// 100 -// } -// px`; - -// const minWidth = column?.dataset?.minWidth; -// const minSize = minWidth ? +minWidth : MIN_SIZE_FIRST_COLUMN; - -// // Checking whether the first column is less than the minimum width -// if (+index === 0 && getSubstring(newItemWidth) < minSize) { -// overWidth += MIN_SIZE_FIRST_COLUMN - getSubstring(newItemWidth); -// newItemWidth = `${MIN_SIZE_FIRST_COLUMN}px`; -// } - -// // Checking whether columns are smaller than the minimum width -// if ( -// +index !== 0 && -// !defaultColumnSize && -// getSubstring(newItemWidth) < DEFAULT_MIN_COLUMN_SIZE -// ) { -// overWidth += -// DEFAULT_MIN_COLUMN_SIZE - getSubstring(newItemWidth); -// newItemWidth = `${DEFAULT_MIN_COLUMN_SIZE}px`; -// } - -// gridTemplateColumns.push(newItemWidth); -// } else { -// gridTemplateColumns.push(item); -// } -// }); - -// if (overWidth > 0) { -// gridTemplateColumnsWithoutOverfilling = distributionOverWidth( -// overWidth, -// gridTemplateColumns, -// ); -// } - -// hasGridTemplateColumnsWithoutOverfilling = -// gridTemplateColumnsWithoutOverfilling && -// gridTemplateColumnsWithoutOverfilling.length > 0; - -// if (activeColumnIndex) { -// const gridColumns = hasGridTemplateColumnsWithoutOverfilling -// ? gridTemplateColumnsWithoutOverfilling -// : gridTemplateColumns; - -// const needReset = addNewColumns( -// gridColumns, -// activeColumnIndex, -// containerWidth, -// ); -// if (needReset) return; -// } -// } -// } - -// str = hasGridTemplateColumnsWithoutOverfilling -// ? gridTemplateColumnsWithoutOverfilling.join(" ") -// : gridTemplateColumns.join(" "); -// } else { -// resetColumns(); -// } - -// if (str) { -// container.style.gridTemplateColumns = str; - -// updateTableRows(str); - -// if (headerRef.current) { -// headerRef.current.style.gridTemplateColumns = str; -// headerRef.current.style.width = `${containerWidth}px`; -// } - -// if (infoPanelVisible) -// localStorage.setItem(columnInfoPanelStorageName, str); - -// if (!infoPanelVisible) { -// localStorage.setItem(columnStorageName, str); -// localStorage.removeItem(columnInfoPanelStorageName); -// } -// } -// }, [ -// addNewColumns, -// columnInfoPanelStorageName, -// columnStorageName, -// columns, -// containerRef, -// distributionOverWidth, -// infoPanelVisible, -// resetColumns, -// resetColumnsSize, -// setHideColumns, -// state.hideColumns, -// updateTableRows, -// ]); - -// React.useEffect(() => { -// resizeRef.current = onResize; -// onResize(); -// throttledResize.current = throttle(onResize, 300); -// if (throttledResize.current) { -// window.addEventListener("resize", throttledResize.current); -// } - -// return () => { -// if (throttledResize.current) -// window.removeEventListener("resize", throttledResize.current); -// }; -// }, [onResize]); - -// const getNextColumn = React.useCallback( -// (array: TTableColumn[], index: number) => { -// let i = 1; - -// while (array.length !== i) { -// const item = array[index + i]; - -// if (!item || state.hideColumns) return null; - -// if (!item.enable) i += 1; -// else return item; -// } -// }, -// [state.hideColumns], -// ); - -// // const getColumn = React.useCallback((array: string[], index: number) => { -// // let i = 1; -// // while (array.length !== i) { -// // const item = array[index + i]; -// // if (!item) return [0, i]; -// // if (item === "0px") i += 1; -// // else return [getSubstring(item), i]; -// // } -// // }, []); - -// const moveToLeft = (widths: string[], newWidth: number, index?: number) => { -// let leftColumn; -// let colIndex = index !== undefined ? index : state.columnIndex - 1; - -// if (colIndex < 0) return; - -// while (colIndex >= 0) { -// leftColumn = document.getElementById(`column_${colIndex}`); -// if (leftColumn) { -// if (leftColumn.dataset.enable === "true") break; -// else colIndex -= 1; -// } else return false; -// } - -// const minSize = -// leftColumn && leftColumn.dataset.minWidth -// ? +leftColumn.dataset.minWidth -// : DEFAULT_MIN_COLUMN_SIZE; - -// if (leftColumn && leftColumn.clientWidth <= minSize) { -// if (colIndex < 0) return false; -// moveToLeft(widths, newWidth, colIndex - 1); - -// return; -// } - -// const offset = getSubstring(widths[+state.columnIndex]) - newWidth; - -// const column2Width = getSubstring(widths[colIndex]); - -// const leftColumnWidth = column2Width - offset; -// const newLeftWidth = leftColumnWidth < minSize ? minSize : leftColumnWidth; - -// widths[colIndex] = `${newLeftWidth}px`; - -// widths[+state.columnIndex] = `${ -// getSubstring(widths[+state.columnIndex]) + -// (offset - (newLeftWidth - leftColumnWidth)) -// }px`; -// }; - -// const moveToRight = (widths: string[], newWidth: number, index?: number) => { -// let rightColumn; -// let colIndex = index || +state.columnIndex + 1; - -// while (colIndex !== columns.length) { -// rightColumn = document.getElementById(`column_${colIndex}`); -// if (rightColumn) { -// if (rightColumn.dataset.enable === "true") break; -// else colIndex += 1; -// } else return false; -// } - -// const offset = getSubstring(widths[+state.columnIndex]) - newWidth; -// const column2Width = getSubstring(widths[colIndex]); - -// const defaultColumn = document.getElementById(`column_${colIndex}`); -// if (!defaultColumn || defaultColumn.dataset.defaultSize) return; - -// const handleOffset = 8; - -// if (column2Width + offset - handleOffset >= DEFAULT_MIN_COLUMN_SIZE) { -// widths[+state.columnIndex] = `${newWidth + handleOffset}px`; -// widths[colIndex] = `${column2Width + offset - handleOffset}px`; -// } else { -// if (colIndex === columns.length) return false; -// moveToRight(widths, newWidth, colIndex + 1); -// } -// }; - -// const onMouseMove = (e: MouseEvent) => { -// const isRtl = theme?.interfaceDirection === "rtl"; - -// // if (!state.columnIndex) return; -// const column = document.getElementById( -// `column_${state.columnIndex}`, -// ) as HTMLElement; - -// const columnSize = column?.getBoundingClientRect(); -// const newWidth = isRtl -// ? columnSize.right - e.clientX -// : e.clientX - columnSize.left; - -// const tableContainer = containerRef.current.style.gridTemplateColumns; -// const widths = tableContainer.split(" "); - -// const minSize = column.dataset.minWidth -// ? +column.dataset.minWidth -// : DEFAULT_MIN_COLUMN_SIZE; - -// if (newWidth <= minSize) { -// const columnChanged = moveToLeft(widths, newWidth); - -// if (!columnChanged) { -// widths[+state.columnIndex] = widths[+state.columnIndex]; -// } -// } else { -// moveToRight(widths, newWidth); -// } - -// const str = widths.join(" "); - -// containerRef.current.style.gridTemplateColumns = str; -// if (headerRef.current) headerRef.current.style.gridTemplateColumns = str; - -// updateTableRows(str); -// }; - -// const onMouseUp = () => { -// if (!infoPanelVisible) { -// localStorage.setItem( -// columnStorageName, -// containerRef.current.style.gridTemplateColumns, -// ); -// } else { -// localStorage.setItem( -// columnInfoPanelStorageName, -// containerRef.current.style.gridTemplateColumns, -// ); -// } - -// window.removeEventListener("mousemove", onMouseMove); -// window.removeEventListener("mouseup", onMouseUp); -// }; - -// const onMouseDown = (event: React.MouseEvent) => { -// const target = event.target as HTMLDivElement; -// const column = target?.dataset?.column ? +target.dataset.column : 0; - -// setState((s) => ({ ...s, columnIndex: column })); - -// window.addEventListener("mousemove", onMouseMove); -// window.addEventListener("mouseup", onMouseUp); -// }; - -// return ( -// <> -// -// -// {columns.map((column, index) => { -// const nextColumn = getNextColumn(columns, index); -// const resizable = nextColumn ? nextColumn.resizable : false; - -// return ( -// -// ); -// })} - -// {showSettings && ( -//
-// -//
-// )} -// -// - -// -// -// ); -// } - const defaultMinColumnSize = 110; const settingsSize = 24; @@ -959,16 +91,6 @@ class TableHeader extends React.Component< } }; - // getColumn = (array: string[], index: number) => { - // let i = 1; - // while (array.length !== i) { - // const item = array[index + i]; - // if (!item) return [0, i]; - // if (item === "0px") i += 1; - // else return [getSubstring(item), i]; - // } - // }; - moveToLeft = (widths: string[], newWidth: number, index?: number) => { const { columnIndex } = this.state; @@ -1180,7 +302,7 @@ class TableHeader extends React.Component< window.addEventListener("mouseup", this.onMouseUp); }; - onResize = () => { + onResize = (isResized: boolean = false) => { const { containerRef, columnStorageName, @@ -1190,8 +312,21 @@ class TableHeader extends React.Component< infoPanelVisible = false, columns, setHideColumns, + tableStorageName, } = this.props; + const enabledColumns = columns.filter((col) => col.enable); + + const enabledStorageColumns = localStorage + .getItem(tableStorageName) + ?.split(",") + .filter((f) => f !== "false"); + + // fix multiply window bugs + const isError = + enabledStorageColumns?.length && + enabledColumns.length !== enabledStorageColumns?.length; + let activeColumnIndex = null; const container = containerRef.current @@ -1217,7 +352,8 @@ class TableHeader extends React.Component< (defaultSize && splitStorage[splitStorage.length - 2] !== `${defaultSize}px`) || getSubstring(splitStorage[0]) <= defaultMinColumnSize || - isInvalid + isInvalid || + isError ) { localStorage.removeItem(columnStorageName); this.onResize(); @@ -1257,12 +393,18 @@ class TableHeader extends React.Component< const containerWidth = +container.clientWidth; - const oldWidth = - tableContainer - .map((column) => getSubstring(column)) - .reduce((x, y) => x + y) - - defaultSize - - settingsSize; + const defaultWidth = tableContainer + .map((column) => getSubstring(column)) + .reduce((x, y) => x + y); + + const oldWidth = defaultWidth - defaultSize - settingsSize; + + if (Math.round(defaultWidth) !== Math.round(containerWidth) && !isResized) { + if (infoPanelVisible) localStorage.removeItem(columnInfoPanelStorageName); + else localStorage.removeItem(columnStorageName); + this.onResize(true); + return; + } let str = ""; let gridTemplateColumnsWithoutOverfilling: string[] = []; @@ -1714,7 +856,14 @@ class TableHeader extends React.Component< const container = containerRef.current ? containerRef.current : document.getElementById("table-container"); - const containerWidth = container ? container.clientWidth : 0; + + if (!container) return; + + const defaultColumnSize = + columns.find((col) => col.defaultSize && col.enable)?.defaultSize || 0; + + const containerWidth = + container.clientWidth - defaultColumnSize - settingsSize; const firstColumnPercent = enableColumns.length > 0 ? 40 : 100; const percent = enableColumns.length > 0 ? 60 / enableColumns.length : 0; @@ -1821,20 +970,4 @@ class TableHeader extends React.Component< } } -// TableHeader.propTypes = { -// containerRef: PropTypes.shape({ current: PropTypes.any }).isRequired, -// columns: PropTypes.array.isRequired, -// sortBy: PropTypes.string, -// sorted: PropTypes.bool, -// columnStorageName: PropTypes.string, -// sectionWidth: PropTypes.number, -// onClick: PropTypes.func, -// resetColumnsSize: PropTypes.bool, -// isLengthenHeader: PropTypes.bool, -// sortingVisible: PropTypes.bool, -// infoPanelVisible: PropTypes.bool, -// useReactWindow: PropTypes.bool, -// showSettings: PropTypes.bool, -// }; - export default withTheme(TableHeader); From f6781914ddf62bdbc1a32e7b70a05fba73ec99eb Mon Sep 17 00:00:00 2001 From: gopienkonikita Date: Tue, 11 Jun 2024 12:46:42 +0300 Subject: [PATCH 2/7] Fix Bug 68474 - Room: Owner: fixed role label --- .../client/src/pages/Home/InfoPanel/Body/views/Members/User.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js index a92520a5eb..a11a0bfeef 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js @@ -249,7 +249,7 @@ const User = ({ const typeLabel = (type === "user" && userRole?.type !== type) || - (userRole?.type === "manager" && type !== "admin") + (userRole?.type === "manager" && type !== "admin" && type !== "owner") ? getUserTypeLabel(userRole?.type, t) : getUserTypeLabel(type, t); From a287238d4774c5f7a7111da835b4fd4a00d9e54c Mon Sep 17 00:00:00 2001 From: Tatiana Lopaeva Date: Tue, 11 Jun 2024 13:20:10 +0300 Subject: [PATCH 3/7] Renaming PORTAL value. --- .../src/components/Article/MainButton/index.js | 6 +++--- .../EmptyContainer/RootFolderContainer.js | 6 +++--- .../EmptyViewContainer.helpers.tsx | 4 ++-- .../src/components/FilesSelector/utils.ts | 4 ++-- .../GlobalEvents/ChangeUserTypeEvent.js | 4 ++-- .../src/components/MainBar/ConfirmEmailBar.js | 4 ++-- .../client/src/components/MainBar/QuotasBar.js | 8 ++++---- .../dialogs/ChangePortalOwnerDialog/index.js | 16 ++++++++-------- .../dialogs/ChangePricingPlanDialog/index.js | 4 ++-- .../dialogs/ChangeStorageQuotaDialog/index.js | 6 +++--- .../dialogs/ChangeUserStatusDialog/index.js | 10 +++++----- .../dialogs/ChangeUserTypeDialog/index.js | 4 ++-- .../PrivacyLimitationsWarning.js | 4 ++-- .../sub-components/ThirdPartyStorage/index.js | 6 +++--- .../dialogs/DeleteGroupDialog/index.js | 6 +++--- .../dialogs/DeleteOwnerProfileDialog/index.js | 4 ++-- .../dialogs/DeletePluginDialog/index.js | 4 ++-- .../dialogs/DeletePortalDialog/index.js | 4 ++-- .../sub-components/BodyComponent.js | 16 ++++++++-------- .../dialogs/PortalRenamingDialog/index.js | 4 ++-- .../dialogs/PreparationPortalDialog/index.js | 4 ++-- .../components/panels/AddUsersPanel/index.tsx | 4 ++-- .../panels/ChangeRoomOwnerPanel/index.js | 6 +++--- .../sub-components/ExternalLinks.js | 4 ++-- .../InvitePanel/sub-components/InfoBar.js | 4 ++-- .../InvitePanel/sub-components/InviteInput.js | 6 +++--- .../panels/InvitePanel/utils/index.js | 6 +++--- packages/client/src/pages/Bonus/index.js | 4 ++-- .../sub-components/GreetingUserContainer.js | 4 ++-- .../Confirm/sub-components/changeOwner.js | 8 +++++--- .../Confirm/sub-components/changePhone.js | 4 ++-- .../Confirm/sub-components/continuePortal.js | 4 ++-- .../pages/Confirm/sub-components/createUser.js | 4 ++-- .../Confirm/sub-components/deactivatePortal.js | 4 ++-- .../Confirm/sub-components/removePortal.js | 4 ++-- .../Confirm/sub-components/tfaActivation.js | 4 ++-- .../InfoPanel/Body/views/Accounts/index.js | 6 +++--- .../Home/InfoPanel/Body/views/Members/User.js | 6 +++--- .../InsideGroup/RowView/userContent.js | 4 ++-- .../InsideGroup/TableView/TableRow.js | 8 ++++---- .../AccountsBody/People/RowView/userContent.js | 4 ++-- .../AccountsBody/People/TableView/TableRow.js | 8 ++++---- .../src/pages/Home/Section/Filter/index.js | 9 ++++++--- .../src/pages/Home/Section/Header/index.js | 4 ++-- .../Layout/Article/Body/index.js | 6 +++--- .../categories/common/Branding/MobileView.js | 6 ++++-- .../common/Branding/additionalResources.js | 6 ++++-- .../Customization/language-and-time-zone.js | 7 +++++-- .../common/Customization/portal-renaming.js | 6 +++--- .../categories/common/branding.js | 6 ++++-- .../SelectUsersTypeStep/AccountsTable/index.js | 4 ++-- .../data-import/GoogleWorkspace/index.js | 6 +++--- .../SelectUsersTypeStep/AccountsTable/index.js | 6 ++++-- .../NextCloudWorkspace/Stepper/index.js | 14 +++++++------- .../data-import/NextCloudWorkspace/index.js | 4 ++-- .../Stepper/ImportStep/index.js | 4 ++-- .../SelectUsersTypeStep/AccountsTable/index.js | 4 ++-- .../data-import/OnlyofficeWorkspace/index.js | 6 +++--- .../categories/data-import/index.js | 7 +++++-- .../sub-components/UsersInfoBlock.js | 6 +++--- .../backup/auto-backup/index.js | 4 ++-- .../sub-components/ScheduleComponent.js | 4 ++-- .../backup/restore-backup/index.js | 6 +++--- .../sub-components/backup-list/index.js | 8 +++++--- .../categories/delete-data/index.js | 6 +++--- .../delete-data/portalDeactivation.js | 8 ++++---- .../categories/delete-data/portalDeletion.js | 6 +++--- .../categories/developer-tools/Api/index.js | 4 ++-- .../developer-tools/JavascriptSDK/index.js | 10 +++++----- .../JavascriptSDK/presets/DocSpace.js | 6 +++--- .../JavascriptSDK/presets/Manager.js | 8 ++++---- .../sub-components/CodeToInsert.js | 6 +++--- .../sub-components/MainElementParameter.js | 4 ++-- .../JavascriptSDK/sub-components/csp.js | 12 +++++++----- .../developer-tools/PluginSDK/index.js | 4 ++-- .../Webhooks/sub-components/WebhookDialog.js | 6 ++++-- .../Webhooks/sub-components/WebhookInfo.js | 4 ++-- .../integration/DocumentService/index.js | 6 +++--- .../categories/integration/Plugins/index.tsx | 4 ++-- .../Plugins/sub-components/EmptyScreen.tsx | 4 ++-- .../integration/SingleSignOn/MobileView.js | 4 ++-- .../ThirdPartyServicesSettings/index.js | 4 ++-- .../payments/SaaS/PayerInformationContainer.js | 16 ++++++++++------ .../payments/SaaS/PaymentContainer.js | 8 ++++---- .../sub-components/TariffTitleContainer.js | 7 +++++-- .../security/access-portal/adminMessage.js | 4 ++-- .../categories/security/access-portal/index.js | 8 ++++---- .../security/access-portal/mobileView.js | 8 +++++--- .../categories/security/access-portal/tfa.js | 4 ++-- .../categories/security/audit-trail/index.js | 4 ++-- .../categories/security/index.js | 4 ++-- .../storage-management/Statistics.js | 4 ++-- .../sub-components/MobileQuotas.js | 6 +++--- .../sub-components/QuotaPerItem.js | 6 +++--- .../PortalSettings/utils/getStepDescription.js | 18 +++++++++--------- .../src/pages/PortalUnavailable/index.js | 12 +++++++----- .../sub-components/DailyFeedContainer.js | 6 +++--- .../sub-components/UsefulTipsContainer.js | 6 +++--- packages/client/src/pages/Wizard/index.js | 9 ++++++--- .../src/store/AccountsContextOptionsStore.js | 6 +++--- .../client/src/store/ContextOptionsStore.js | 8 ++++---- packages/client/src/store/PeopleStore.js | 6 +++--- .../login/src/components/GreetingContainer.tsx | 4 ++-- packages/login/src/components/Invalid.tsx | 4 ++-- .../sub-components/EmailContainer.tsx | 4 ++-- .../sub-components/ConfigurationSection.tsx | 6 +++--- .../dialogs/CreatePortalDialog/index.tsx | 6 +++--- .../dialogs/DeletePortalDialog/index.tsx | 4 ++-- .../shared/components/beta-badge/BetaBadge.tsx | 4 ++-- .../components/errors/AccessRestricted.tsx | 4 ++-- .../components/errors/ErrorUnavailable.tsx | 4 ++-- .../shared/components/share/Share.helpers.ts | 4 ++-- packages/shared/constants/index.ts | 2 +- .../shared/pages/PreparationPortal/index.tsx | 6 ++++-- packages/shared/selectors/People/index.tsx | 4 ++-- packages/shared/utils/common.ts | 4 ++-- 116 files changed, 362 insertions(+), 321 deletions(-) diff --git a/packages/client/src/components/Article/MainButton/index.js b/packages/client/src/components/Article/MainButton/index.js index a7bd7e74fc..7aa2120173 100644 --- a/packages/client/src/components/Article/MainButton/index.js +++ b/packages/client/src/components/Article/MainButton/index.js @@ -69,7 +69,7 @@ import { resendInvitesAgain } from "@docspace/shared/api/people"; import { getCorrectFourValuesStyle } from "@docspace/shared/utils"; import { ArticleButtonLoader } from "@docspace/shared/skeletons/article"; import { isMobile, isTablet } from "react-device-detect"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const StyledButton = styled(Button)` font-weight: 700; @@ -363,7 +363,7 @@ const ArticleMainButtonContent = (props) => { id: "actions_upload-from-docspace", className: "main-button_drop-down", icon: ActionsUploadReactSvgUrl, - label: t("Common:FromDocspace", { portalName: PORTAL }), + label: t("Common:FromDocspace", { portalName: PRODUCT_NAME }), key: "actions_upload-from-docspace", onClick: () => onShowFormRoomSelectFileDialog(FilesSelectorFilterTypes.PDF), @@ -596,7 +596,7 @@ const ArticleMainButtonContent = (props) => { id: "invite_doc-space-administrator", className: "main-button_drop-down", icon: PersonAdminReactSvgUrl, - label: t("Common:DocspaceAdmin", { portalName: PORTAL }), + label: t("Common:DocspaceAdmin", { portalName: PRODUCT_NAME }), onClick: onInvite, action: EmployeeType.Admin, key: "administrator", diff --git a/packages/client/src/components/EmptyContainer/RootFolderContainer.js b/packages/client/src/components/EmptyContainer/RootFolderContainer.js index 0d3e83d8f2..9303823c77 100644 --- a/packages/client/src/components/EmptyContainer/RootFolderContainer.js +++ b/packages/client/src/components/EmptyContainer/RootFolderContainer.js @@ -61,7 +61,7 @@ import EmptyScreenArchiveUrl from "PUBLIC_DIR/images/empty_screen_archive.svg?ur import EmptyScreenArchiveDarkUrl from "PUBLIC_DIR/images/empty_screen_archive_dark.svg?url"; import CommonButtons from "./sub-components/CommonButtons"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const RootFolderContainer = (props) => { const { @@ -119,7 +119,7 @@ const RootFolderContainer = (props) => { const archiveRoomsDescription = isVisitor || isCollaborator ? t("ArchiveEmptyScreenUser") - : t("ArchiveEmptyScreen", { portalName: PORTAL }); + : t("ArchiveEmptyScreen", { portalName: PRODUCT_NAME }); const privateRoomHeader = t("PrivateRoomHeader", { organizationName }); const privacyIcon = ; @@ -130,7 +130,7 @@ const RootFolderContainer = (props) => { t("PrivateRoomDescriptionUnbreakable"), ]; - const roomHeader = t("EmptyRootRoomHeader", { portalName: PORTAL }); + const roomHeader = t("EmptyRootRoomHeader", { portalName: PRODUCT_NAME }); const onGoToPersonal = () => { const newFilter = FilesFilter.getDefault(); diff --git a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx index d25758222e..faca754d0c 100644 --- a/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx +++ b/packages/client/src/components/EmptyContainer/sub-components/EmptyViewContainer/EmptyViewContainer.helpers.tsx @@ -14,7 +14,7 @@ import type { Nullable, TTranslation } from "@docspace/shared/types"; import type { TRoomSecurity } from "@docspace/shared/api/rooms/types"; import type { TFolderSecurity } from "@docspace/shared/api/files/types"; import type { EmptyViewItemType } from "@docspace/shared/components/empty-view"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; import type { OptionActions } from "./EmptyViewContainer.types"; @@ -103,7 +103,7 @@ export const getOptions = ( const uploadFromDocSpace = { title: t("EmptyView:UploadPDFFormOptionTitle"), description: t("EmptyView:UploadPDFFormOptionDescription", { - portalName: PORTAL, + portalName: PRODUCT_NAME, }), icon: , key: "upload-pdf-form", diff --git a/packages/client/src/components/FilesSelector/utils.ts b/packages/client/src/components/FilesSelector/utils.ts index a0083b4e11..9b5bb13ec2 100644 --- a/packages/client/src/components/FilesSelector/utils.ts +++ b/packages/client/src/components/FilesSelector/utils.ts @@ -29,7 +29,7 @@ import { TFolderSecurity, } from "@docspace/shared/api/files/types"; import { TRoomSecurity } from "@docspace/shared/api/rooms/types"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; import { FilesSelectorFilterTypes } from "@docspace/shared/enums"; import { TTranslation } from "@docspace/shared/types"; @@ -56,7 +56,7 @@ export const getHeaderLabel = ( } if (isFormRoom) { - return t("Common:SelectFromDocspace", { portalName: PORTAL }); + return t("Common:SelectFromDocspace", { portalName: PRODUCT_NAME }); } if (filterParam === FilesSelectorFilterTypes.DOCX) diff --git a/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js b/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js index 46f7af1307..80d1df3207 100644 --- a/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js +++ b/packages/client/src/components/GlobalEvents/ChangeUserTypeEvent.js @@ -34,7 +34,7 @@ import { toastr } from "@docspace/shared/components/toast"; import { Link } from "@docspace/shared/components/link"; import { Text } from "@docspace/shared/components/text"; import { combineUrl } from "@docspace/shared/utils/combineUrl"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const ChangeUserTypeEvent = ({ setVisible, @@ -137,7 +137,7 @@ const ChangeUserTypeEvent = ({ const getType = (type) => { switch (type) { case "admin": - return t("Common:DocspaceAdmin", { portalName: PORTAL }); + return t("Common:DocspaceAdmin", { portalName: PRODUCT_NAME }); case "manager": return t("Common:RoomAdmin"); case "collaborator": diff --git a/packages/client/src/components/MainBar/ConfirmEmailBar.js b/packages/client/src/components/MainBar/ConfirmEmailBar.js index 6a5dd92678..a36e2d1272 100644 --- a/packages/client/src/components/MainBar/ConfirmEmailBar.js +++ b/packages/client/src/components/MainBar/ConfirmEmailBar.js @@ -31,7 +31,7 @@ import styled from "styled-components"; import { SnackBar } from "@docspace/shared/components/snackbar"; import { Link } from "@docspace/shared/components/link"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const ConfirmEmailBar = ({ t, @@ -47,7 +47,7 @@ const ConfirmEmailBar = ({ diff --git a/packages/client/src/components/MainBar/QuotasBar.js b/packages/client/src/components/MainBar/QuotasBar.js index d00e32e1e9..998be74455 100644 --- a/packages/client/src/components/MainBar/QuotasBar.js +++ b/packages/client/src/components/MainBar/QuotasBar.js @@ -32,7 +32,7 @@ import { SnackBar } from "@docspace/shared/components/snackbar"; import { Link } from "@docspace/shared/components/link"; import { QuotaBarTypes } from "SRC_DIR/helpers/constants"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const QuotasBar = ({ t, @@ -61,7 +61,7 @@ const QuotasBar = ({ You can remove the unnecessary files or You can archived the unnecessary rooms or - {t("NewPortalOwner", { portalName: PORTAL })} + {t("NewPortalOwner", { portalName: PRODUCT_NAME })} - {t("ChangeInstruction", { portalName: PORTAL })} + {t("ChangeInstruction", { portalName: PRODUCT_NAME })} @@ -218,7 +218,7 @@ const ChangePortalOwnerDialog = ({ - {t("PortalOwnerCan", { portalName: PORTAL })} + {t("PortalOwnerCan", { portalName: PRODUCT_NAME })} {ownerRights?.map((item) => ( diff --git a/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js b/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js index 22f7ea2a90..9e857835a1 100644 --- a/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js +++ b/packages/client/src/components/dialogs/ChangePricingPlanDialog/index.js @@ -35,7 +35,7 @@ import { ModalDialog } from "@docspace/shared/components/modal-dialog"; import { inject, observer } from "mobx-react"; import { getConvertedSize } from "@docspace/shared/utils/common"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const ModalDialogContainer = styled(ModalDialog)` .cannot-downgrade-plan { @@ -73,7 +73,7 @@ const ChangePricingPlanDialog = ({ You wish to downgrade the team to {{ usersCount: managersCount }} admins/power users, and current number of such users in your - {{ portalName: PORTAL }} is + {{ portalName: PRODUCT_NAME }} is {{ currentUsersCount: addedManagersCount }} diff --git a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js b/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js index 56cd33fd71..4afa48f837 100644 --- a/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js +++ b/packages/client/src/components/dialogs/ChangeStorageQuotaDialog/index.js @@ -35,7 +35,7 @@ import { setTenantQuotaSettings } from "@docspace/shared/api/settings"; import QuotaForm from "../../../components/QuotaForm"; import StyledModalDialog from "./StyledComponent"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const ChangeStorageQuotaDialog = (props) => { const { @@ -125,8 +125,8 @@ const ChangeStorageQuotaDialog = (props) => { {isDisableQuota - ? t("Common:TurnOffDiskSpaceLimit", { portalName: PORTAL }) - : t("Common:SetDiskSpaceQuota", { portalName: PORTAL })} + ? t("Common:TurnOffDiskSpaceLimit", { portalName: PRODUCT_NAME }) + : t("Common:SetDiskSpaceQuota", { portalName: PRODUCT_NAME })} {!isDisableQuota && ( )}{" "} - {t("ChangeUserTypeMessageWarning", { portalName: PORTAL })} + {t("ChangeUserTypeMessageWarning", { portalName: PRODUCT_NAME })} diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js index eb9ab56f73..61e09e44ef 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/IsPrivateParam/PrivacyLimitationsWarning.js @@ -30,7 +30,7 @@ import styled from "styled-components"; import { ReactSVG } from "react-svg"; import { Base } from "@docspace/shared/themes"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const StyledPrivacyLimitationsWarning = styled.div` box-sizing: border-box; @@ -106,7 +106,7 @@ const PrivacyLimitationsWarning = ({ t }) => {
{t("MakeRoomPrivateLimitationsWarningDescription", { - portalName: PORTAL, + portalName: PRODUCT_NAME, })}
{t("Common:LearnMore")}
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js index d5fb82de14..9d2e796a7a 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/index.js @@ -37,7 +37,7 @@ import ThirdPartyComboBox from "./ThirdPartyComboBox"; import FolderInput from "./FolderInput"; import { getOAuthToken } from "@docspace/shared/utils/common"; import { Checkbox } from "@docspace/shared/components/checkbox"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const StyledThirdPartyStorage = styled(StyledParam)` flex-direction: column; @@ -79,7 +79,7 @@ const ThirdPartyStorage = ({ }) => { const channel = useRef(new BroadcastChannel("thirdpartyActivation")); channel.current.onmessage = (shouldRender) => { - shouldRender && fetchConnectingStorages() + shouldRender && fetchConnectingStorages(); }; const onChangeIsThirdparty = () => { @@ -89,7 +89,7 @@ const ThirdPartyStorage = ({ const data = isRoomAdmin ? ( {t("ThirdPartyStorageRoomAdminNoStorageAlert", { - portalName: PORTAL, + portalName: PRODUCT_NAME, })} ) : ( diff --git a/packages/client/src/components/dialogs/DeleteGroupDialog/index.js b/packages/client/src/components/dialogs/DeleteGroupDialog/index.js index 93528c18e3..7f60a393d0 100644 --- a/packages/client/src/components/dialogs/DeleteGroupDialog/index.js +++ b/packages/client/src/components/dialogs/DeleteGroupDialog/index.js @@ -32,7 +32,7 @@ import { Button } from "@docspace/shared/components/button"; import { Text } from "@docspace/shared/components/text"; import { toastr } from "@docspace/shared/components/toast"; import ModalDialogContainer from "../ModalDialogContainer"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const DeleteGroupDialog = (props) => { const { @@ -90,10 +90,10 @@ const DeleteGroupDialog = (props) => { {hasMoreGroups ? t("DeleteDialog:DeleteAllGroupDescription", { - portalName: PORTAL, + portalName: PRODUCT_NAME, }) : t("DeleteDialog:DeleteGroupDescription", { - portalName: PORTAL, + portalName: PRODUCT_NAME, groupName, })} diff --git a/packages/client/src/components/dialogs/DeleteOwnerProfileDialog/index.js b/packages/client/src/components/dialogs/DeleteOwnerProfileDialog/index.js index b258530598..9dc91ac620 100644 --- a/packages/client/src/components/dialogs/DeleteOwnerProfileDialog/index.js +++ b/packages/client/src/components/dialogs/DeleteOwnerProfileDialog/index.js @@ -33,7 +33,7 @@ import { Button } from "@docspace/shared/components/button"; import { ModalDialog } from "@docspace/shared/components/modal-dialog"; import { withTranslation } from "react-i18next"; import ModalDialogContainer from "../ModalDialogContainer"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; class DeleteOwnerProfileDialogComponent extends React.Component { constructor(props) { @@ -59,7 +59,7 @@ class DeleteOwnerProfileDialogComponent extends React.Component { {t("DeleteProfileTitle")} - {t("DeleteOwnerRestrictionText", { portalName: PORTAL })} + {t("DeleteOwnerRestrictionText", { portalName: PRODUCT_NAME })} diff --git a/packages/client/src/components/dialogs/DeletePluginDialog/index.js b/packages/client/src/components/dialogs/DeletePluginDialog/index.js index 7b8aacea80..2f0eebd9a8 100644 --- a/packages/client/src/components/dialogs/DeletePluginDialog/index.js +++ b/packages/client/src/components/dialogs/DeletePluginDialog/index.js @@ -33,7 +33,7 @@ import { ModalDialog } from "@docspace/shared/components/modal-dialog"; import { Button } from "@docspace/shared/components/button"; import ModalDialogContainer from "../ModalDialogContainer"; -import { PORTAL } from "@docspace/shared/constants"; +import { PRODUCT_NAME } from "@docspace/shared/constants"; const DeletePluginDialog = (props) => { const { t, ready } = useTranslation(["WebPlugins", "Common"]); @@ -63,7 +63,7 @@ const DeletePluginDialog = (props) => { > {t("DeletePluginTitle")} - {t("DeletePluginDescription", { portalName: PORTAL })} + {t("DeletePluginDescription", { portalName: PRODUCT_NAME })}