From 64233c934272eabc2480697b6738dbe94662debe Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Thu, 23 May 2024 12:19:05 +0300 Subject: [PATCH 01/59] Shared:ContextMenu:Added scroll to all levels of the context menu. The structure of all context menu views has been changed and nesting has been added. --- .../components/context-menu/ContextMenu.tsx | 77 ++++-- .../sub-components/MobileSubMenu.tsx | 18 +- .../context-menu/sub-components/SubMenu.tsx | 254 +++++++++--------- 3 files changed, 194 insertions(+), 155 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 5ba7908759..68ca069140 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -60,9 +60,11 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const [model, setModel] = React.useState(null); const [changeView, setChangeView] = React.useState(false); const [showMobileMenu, setShowMobileMenu] = React.useState(false); - const [onLoad, setOnLoad] = React.useState< - undefined | (() => Promise) + const [mobileSubMenuItems, setMobileSubMenuItems] = React.useState< + ContextMenuModel[] | undefined >(undefined); + const [mobileHeader, setMobileHeader] = React.useState(""); + const [articleWidth, setArticleWidth] = React.useState(0); const prevReshow = React.useRef(false); @@ -204,7 +206,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { ? rects.left - currentLeftOffset - currentRightOffset : event.pageX + 1; let top = rects ? rects.top : event.pageY + 1; - const width = + let width = menuRef.current && menuRef.current.offsetParent ? menuRef.current.offsetWidth : DomHelpers.getHiddenElementOuterWidth(menuRef.current); @@ -214,29 +216,46 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { : DomHelpers.getHiddenElementOuterHeight(menuRef.current); const viewport = DomHelpers.getViewport(); + const mobileView = isMobileUtils() && (height > 210 || ignoreChangeView); + + if (!mobileView) { + const options = menuRef?.current?.getElementsByClassName("p-menuitem"); + const optionsWidth: number[] = []; + + if (options) { + Array.from(options).forEach((option) => + optionsWidth.push(option.clientWidth), + ); + + const widthMaxContent = Math.max(...optionsWidth); + + width = width || widthMaxContent; + } + } + if (theme.interfaceDirection === "rtl" && !rects && left > width) { left = event.pageX - width + 1; } - if ( - isTabletUtils() && - (height > 483 || - (isMobileOnly && window.innerHeight < window.innerWidth)) - ) { - const article = document.getElementById("article-container"); + // if ( + // isTabletUtils() && + // (height > 483 || + // (isMobileOnly && window.innerHeight < window.innerWidth)) + // ) { + // const article = document.getElementById("article-container"); - let currentArticleWidth = 0; - if (article) { - currentArticleWidth = article.offsetWidth; - } + // let currentArticleWidth = 0; + // if (article) { + // currentArticleWidth = article.offsetWidth; + // } - setChangeView(true); - setArticleWidth(currentArticleWidth); + // setChangeView(true); + // setArticleWidth(currentArticleWidth); - return; - } + // return; + // } - if (isMobileUtils() && (height > 210 || ignoreChangeView)) { + if (mobileView) { setChangeView(true); setArticleWidth(0); @@ -260,7 +279,10 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { // fit if (top < document.body.scrollTop) { - top = document.body.scrollTop; + const marginTop = 16; + + if (document.body.scrollTop === 0) top = marginTop; + else top = document.body.scrollTop; } if (containerRef) { @@ -276,6 +298,8 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { if (menuRef.current) { menuRef.current.style.left = `${left}px`; menuRef.current.style.top = `${top}px`; + + if (!mobileView) menuRef.current.style.width = `${width}px`; } } }; @@ -399,14 +423,20 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { }; }, [documentResizeListener, onHide, visible]); - const onMobileItemClick = ( + const onMobileItemClick = async ( e: React.MouseEvent | React.ChangeEvent, + label: string, + items?: ContextMenuModel[], loadFunc?: () => Promise, ) => { e.stopPropagation(); setShowMobileMenu(true); - if (loadFunc) setOnLoad(loadFunc); + + const res = loadFunc ? await loadFunc() : items; + setMobileSubMenuItems(res); + + setMobileHeader(label); }; const onBackClick = (e: React.MouseEvent) => { @@ -506,7 +536,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { )} - {header.title} + {showMobileMenu ? mobileHeader : header.title} )} @@ -516,7 +546,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { root resetMenu={resetMenu} onLeafClick={onLeafClick} - onLoad={onLoad} + mobileSubMenuItems={mobileSubMenuItems} /> ) : ( { root resetMenu={resetMenu} onLeafClick={onLeafClick} - changeView={changeView} onMobileItemClick={onMobileItemClick} /> )} diff --git a/packages/shared/components/context-menu/sub-components/MobileSubMenu.tsx b/packages/shared/components/context-menu/sub-components/MobileSubMenu.tsx index f8c7f4ae22..88419a9bb2 100644 --- a/packages/shared/components/context-menu/sub-components/MobileSubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/MobileSubMenu.tsx @@ -44,9 +44,9 @@ const MobileSubMenu = (props: { onLeafClick: (e: React.MouseEvent) => void; root?: boolean; resetMenu: boolean; - onLoad?: () => Promise; + mobileSubMenuItems?: ContextMenuModel[]; }) => { - const { onLeafClick, root, resetMenu, onLoad } = props; + const { onLeafClick, root, resetMenu, mobileSubMenuItems } = props; const [submenu, setSubmenu] = useState(null); @@ -91,16 +91,12 @@ const MobileSubMenu = (props: { } }); - const fetchSubMenu = React.useCallback(async () => { - const res = await onLoad?.(); - if (res) setSubmenu(res); - - position(); - }, [position, setSubmenu, onLoad]); - useEffect(() => { - if (onLoad) fetchSubMenu(); - }, [onLoad, fetchSubMenu]); + if (!mobileSubMenuItems?.length) return; + + setSubmenu(mobileSubMenuItems); + position(); + }, [mobileSubMenuItems, mobileSubMenuItems?.length, position]); const onItemClick = (e: React.MouseEvent, item: ContextMenuType) => { const { disabled, url, onClick, items, action } = item; diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index 5e9b4ed5bc..27d2dfe985 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -32,21 +32,14 @@ import { useTheme } from "styled-components"; import ArrowIcon from "PUBLIC_DIR/images/arrow.right.react.svg"; import OutsdideIcon from "PUBLIC_DIR/images/arrow.outside.react.svg"; -import { isMobile as isMobileDevice } from "react-device-detect"; -import { - classNames, - ObjectUtils, - DomHelpers, - isMobile, - isTablet, -} from "../../../utils"; +import { classNames, ObjectUtils, DomHelpers, isMobile } from "../../../utils"; import { ContextMenuSkeleton } from "../../../skeletons/context-menu"; -import { Scrollbar } from "../../scrollbar"; import { ToggleButton } from "../../toggle-button"; +import { Scrollbar } from "../../scrollbar"; -import { SubMenuItem } from "../ContextMenu.styled"; +import { SubMenuItem, StyledList } from "../ContextMenu.styled"; import { ContextMenuModel, ContextMenuType, @@ -63,19 +56,13 @@ const SubMenu = (props: { ) => void; onMobileItemClick?: ( e: React.MouseEvent | React.ChangeEvent, - loadFunc: () => Promise, + label: string, + items?: ContextMenuModel[], + loadFunc?: () => Promise, ) => void; - changeView?: boolean; onLoad?: () => Promise; }) => { - const { - onLeafClick, - root, - resetMenu, - changeView, - onMobileItemClick, - onLoad, - } = props; + const { onLeafClick, root, resetMenu, onMobileItemClick, onLoad } = props; const [model, setModel] = useState(props?.model); const [isLoading, setIsLoading] = useState(false); @@ -86,7 +73,7 @@ const SubMenu = (props: { const theme = useTheme(); const onItemMouseEnter = (e: React.MouseEvent, item: ContextMenuType) => { - if (item.disabled || isMobileDevice) { + if (item.disabled) { e.preventDefault(); return; } @@ -98,16 +85,18 @@ const SubMenu = (props: { e: React.MouseEvent | React.ChangeEvent, item: ContextMenuType, ) => { - if (item.onLoad) { - e.preventDefault(); - if (!isMobile() && !isTablet()) return; + const { disabled, url, onClick, items, action, label } = item; - if (isMobile() || isTablet()) onMobileItemClick?.(e, item.onLoad); - else onLeafClick?.(e); + if (label && (items || item.onLoad)) { + e.preventDefault(); + if (!isMobile()) return; + + if (items) onMobileItemClick?.(e, label as string, items, undefined); + else if (item.onLoad) + onMobileItemClick?.(e, label as string, undefined, item.onLoad); return; } - const { disabled, url, onClick, items, action } = item; if (disabled) { e.preventDefault(); return; @@ -134,7 +123,9 @@ const SubMenu = (props: { const containerOffset = DomHelpers.getOffset(parentItem); const viewport = DomHelpers.getViewport(); - const subListWidth = subMenuRef.current?.offsetParent + const options = subMenuRef.current?.getElementsByClassName("p-menuitem"); + + let subListWidth = subMenuRef.current?.offsetParent ? subMenuRef.current.offsetWidth : DomHelpers.getHiddenElementOuterWidth(subMenuRef.current); @@ -144,16 +135,49 @@ const SubMenu = (props: { const isRtl = theme.interfaceDirection === "rtl"; + if (!isMobile() && options) { + const optionsWidth: number[] = []; + Array.from(options).forEach((option) => + optionsWidth.push(Math.ceil(option.getBoundingClientRect().width)), + ); + + const widthMaxContent = Math.max(...optionsWidth); + + subListWidth = subListWidth || widthMaxContent; + } + if (subMenuRef.current) { - subMenuRef.current.style.top = "0px"; + let subMenuRefTop = null; + + if (!isMobile()) subMenuRef.current.style.width = `${subListWidth}px`; + + if (!isMobile() && !root) { + const firstList = parentItem?.firstChild as HTMLElement; + + const menuItemActive = firstList.querySelector( + ".p-menuitem-active", + ) as HTMLElement; + + const top = menuItemActive.offsetTop; + const scroller = firstList.querySelector(".scroller") as HTMLElement; + const scrollTop = scroller.scrollTop; + const positionActiveItem = top - scrollTop; + + subMenuRefTop = positionActiveItem - 2; + subMenuRef.current.style.top = `${subMenuRefTop}px`; + } const submenuRects = subMenuRef.current.getBoundingClientRect(); - if (submenuRects.bottom > viewport.height) { + if (submenuRects.bottom > viewport.height && subMenuRefTop) { const submenuMargin = 16; - const topOffset = submenuRects.bottom - viewport.height + submenuMargin; - subMenuRef.current.style.top = `${-1 * topOffset}px`; + const topOffset = + subMenuRefTop - + (submenuRects.bottom - viewport.height) - + submenuMargin; + + subMenuRef.current.style.top = `${topOffset}px`; } if (isRtl) { @@ -205,29 +229,6 @@ const SubMenu = (props: { /> ); - const renderSubMenu = (item: ContextMenuType) => { - const loaderItem = { - id: "link-loader-option", - key: "link-loader", - isLoader: true, - label: , - }; - - if (item.items || item.onLoad) { - return ( - - ); - } - - return null; - }; - const renderMenuitem = ( item: ContextMenuType, index: number, @@ -273,7 +274,7 @@ const SubMenu = (props: { const subMenuIcon = (item.items || item.onLoad) && ( ); - const subMenu = renderSubMenu(item); + const dataKeys = Object.fromEntries( Object.entries(item).filter((el) => el[0].indexOf("data-") === 0), ); @@ -330,7 +331,6 @@ const SubMenu = (props: { onMouseEnter={(e) => onItemMouseEnter(e, item)} > {content} - {subMenu} onItemMouseEnter(e, item)} > {content} - {subMenu} ); }; @@ -389,78 +388,93 @@ const SubMenu = (props: { }; const renderMenu = () => { - if (model) { - if (changeView) { - const newModel = model.filter( - (item: ContextMenuModel) => item && !item.disabled, + if (!model) return null; + + return model.map((item: ContextMenuModel, index: number) => { + if (item?.disabled) return null; + return renderItem(item, index); + }); + }; + + const renderSubMenuLower = () => { + if (!model) return null; + const submenu: JSX.Element[] = []; + + const loaderItem = { + id: "link-loader-option", + key: "link-loader", + isLoader: true, + label: , + }; + + model.forEach((item) => { + const contextMenuTypeItem = item as ContextMenuType; + + if (contextMenuTypeItem?.items || contextMenuTypeItem?.onLoad) { + submenu.push( + , ); - const rowHeights: number[] = newModel.map((item: ContextMenuModel) => { - if (!item) return 0; - if (item.isSeparator) return 13; - return 36; - }); - - // const getItemSize = (index) => rowHeights[index]; - - const height = rowHeights.reduce((a, b) => a + b); - const viewport = DomHelpers.getViewport(); - - const listHeight = - height + 61 > viewport.height - 64 - ? viewport.height - 125 - : height + 5; - - return ( - - {model.map((item: ContextMenuModel, index: number) => { - if (!item || item?.disabled) return null; - - return renderItem(item, index); - })} - - ); - - // return ( - // - // {renderItem} - // - // ); } + }); - return model.map((item: ContextMenuModel, index: number) => { - if (item?.disabled) return null; - return renderItem(item, index); - }); - } - - return null; + return submenu; }; const className = classNames({ "p-submenu-list": !root }); const submenu = renderMenu(); const active = isActive(); + const submenuLower = renderSubMenuLower(); - return ( - -
    - {submenu} -
- + const newModel = model.filter( + (item: ContextMenuModel) => item && !item.disabled, ); + const rowHeights: number[] = newModel.map((item: ContextMenuModel) => { + if (!item) return 0; + if (item.isSeparator) return 13; + return 36; + }); + + const height = rowHeights.reduce((a, b) => a + b); + const viewport = DomHelpers.getViewport(); + const paddingList = 12; + const marginsList = 32; + + const listHeight = + height + paddingList + marginsList > viewport.height + ? viewport.height - marginsList + : height + paddingList; + + if (model) { + return ( + + + {submenu} + {submenuLower} + + + ); + } }; export { SubMenu }; From 6d62c18b4437f05f5b6d5fc413edf862a8cd24e3 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Thu, 23 May 2024 12:19:45 +0300 Subject: [PATCH 02/59] Shared:ContextMenu:Change styles. --- .../context-menu/ContextMenu.styled.ts | 35 +++++++++++++------ packages/shared/themes/base.ts | 9 +++-- packages/shared/themes/dark.ts | 9 +++-- 3 files changed, 32 insertions(+), 21 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index 74e71c727f..ed9a018b3a 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -111,15 +111,16 @@ const StyledContextMenu = styled.div<{ box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; -moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; - padding: ${(props) => props.theme.newContextMenu.padding}; - - @media ${tablet} { - ${(props) => props.changeView && styledTabletView} - } @media ${mobile} { ${(props) => props.changeView && styledMobileView} } + + .scroll-body { + display: flex; + flex-direction: column; + justify-content: center; + } } .contextmenu-header { @@ -223,7 +224,6 @@ const StyledContextMenu = styled.div<{ box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -moz-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; - padding: 4px 0px; white-space: nowrap; overflow: hidden; @@ -246,7 +246,7 @@ const StyledContextMenu = styled.div<{ position: relative; border: ${(props) => props.theme.dropDownItem.border}; margin: ${(props) => props.theme.dropDownItem.margin}; - padding: ${(props) => props.theme.dropDownItem.padding}; + padding: 0 16px; font-family: ${(props) => props.theme.fontFamily}; font-style: normal; background: none; @@ -261,10 +261,6 @@ const StyledContextMenu = styled.div<{ -webkit-touch-callout: none; - @media ${tablet} { - padding: 0 16px; - } - &:hover { background-color: ${(props) => props.noHover @@ -296,11 +292,18 @@ const StyledContextMenu = styled.div<{ &:hover { cursor: default !important; } + + @media ${mobile} { + margin-right: 8px !important; + width: calc(100% - 24px) !important; + } } .p-contextmenu .p-menuitem { position: relative; margin: ${(props) => props.theme.dropDownItem.margin}; + + min-width: max-content; } .p-contextmenu .scroll-body .p-menuitem { @@ -391,4 +394,14 @@ StyledContextMenu.defaultProps = { theme: Base, }; +export const StyledList = styled.ul<{ + listHeight: number; +}>` + & > :first-child { + .scroll-body { + height: ${(props) => `${props.listHeight}px`}; + } + } +`; + export { StyledContextMenu }; diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index c999e45c33..858030cb33 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2751,9 +2751,9 @@ export const getBaseTheme = () => { }, separator: { borderBottom: `1px solid ${grayLightMid} !important`, - margin: "6px 16px 6px 16px !important", + margin: "6px 0px 6px 16px !important", height: "1px !important", - width: "calc(100% - 32px) !important", + width: "calc(100% - 16px) !important", }, text: { header: { @@ -2774,7 +2774,7 @@ export const getBaseTheme = () => { background: "none", svgFill: black, header: { - height: "49px", + height: "55px", borderBottom: `1px solid ${grayLightMid}`, marginBottom: "6px", }, @@ -2784,7 +2784,7 @@ export const getBaseTheme = () => { padding: "0 12px", mobile: { height: "36px", - padding: "0 16px 6px", + padding: "6px 16px", }, }, newContextMenu: { @@ -2792,7 +2792,6 @@ export const getBaseTheme = () => { borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", boxShadow: "0px 8px 16px 0px #040F1B14", - padding: "6px 0px", border: "none", devices: { maxHeight: "calc(100vh - 64px)", diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 363891c81f..2e21ba0d14 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -2731,9 +2731,9 @@ const Dark: TTheme = { }, separator: { borderBottom: `1px solid #474747 !important`, - margin: "6px 16px 6px 16px !important", + margin: "6px 0px 6px 16px !important", height: "1px !important", - width: "calc(100% - 32px) !important", + width: "calc(100% - 16px) !important", }, text: { header: { @@ -2754,7 +2754,7 @@ const Dark: TTheme = { background: "none", svgFill: "#eeeeee", header: { - height: "49px", + height: "55px", borderBottom: `1px solid #474747`, marginBottom: "6px", }, @@ -2764,7 +2764,7 @@ const Dark: TTheme = { padding: "0 12px", mobile: { height: "36px", - padding: "0 16px 6px", + padding: "6px 16px", }, }, newContextMenu: { @@ -2772,7 +2772,6 @@ const Dark: TTheme = { borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", boxShadow: "0px 8px 16px 0px #040F1B29", - padding: "6px 0px", border: "1px solid #474747", devices: { maxHeight: "calc(100vh - 64px)", From e6e05b83ab047b102f00f1a787620f5f383a937a Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Thu, 23 May 2024 12:20:34 +0300 Subject: [PATCH 03/59] Shared:ContextMenu:Fixed so that the context menu in any resolution will always have nesting. --- .../client/src/store/ContextOptionsStore.js | 235 ++++++++---------- 1 file changed, 104 insertions(+), 131 deletions(-) diff --git a/packages/client/src/store/ContextOptionsStore.js b/packages/client/src/store/ContextOptionsStore.js index 4ae80507a1..5f848404b1 100644 --- a/packages/client/src/store/ContextOptionsStore.js +++ b/packages/client/src/store/ContextOptionsStore.js @@ -1066,71 +1066,10 @@ class ContextOptionsStore { !contextOptions.includes("finalize-version") && contextOptions.includes("show-version-history"); - const versionActions = isDesktop() - ? onlyShowVersionHistory - ? [ - { - id: "option_show-version-history", - key: "show-version-history", - label: t("ShowVersionHistory"), - icon: HistoryReactSvgUrl, - onClick: () => - this.showVersionHistory( - item.id, - item.security, - item?.requestToken, - ), - disabled: false, - }, - ] - : [ - { - id: "option_version", - key: "version", - label: t("VersionHistory"), - icon: HistoryFinalizedReactSvgUrl, - items: [ - { - id: "option_finalize-version", - key: "finalize-version", - label: t("FinalizeVersion"), - icon: HistoryFinalizedReactSvgUrl, - onClick: () => - isEditing - ? this.onShowEditingToast(t) - : this.finalizeVersion(item.id, item.security), - disabled: false, - }, - { - id: "option_version-history", - key: "show-version-history", - label: t("ShowVersionHistory"), - icon: HistoryReactSvgUrl, - onClick: () => - this.showVersionHistory( - item.id, - item.security, - item?.requestToken, - ), - disabled: false, - }, - ], - }, - ] - : [ + const versionActions = onlyShowVersionHistory + ? [ { - id: "option_finalize-version", - key: "finalize-version", - label: t("FinalizeVersion"), - icon: HistoryFinalizedReactSvgUrl, - onClick: () => - isEditing - ? this.onShowEditingToast(t) - : this.finalizeVersion(item.id), - disabled: false, - }, - { - id: "option_version-history", + id: "option_show-version-history", key: "show-version-history", label: t("ShowVersionHistory"), icon: HistoryReactSvgUrl, @@ -1142,73 +1081,107 @@ class ContextOptionsStore { ), disabled: false, }, + ] + : [ + { + id: "option_version", + key: "version", + label: t("VersionHistory"), + icon: HistoryFinalizedReactSvgUrl, + items: [ + { + id: "option_finalize-version", + key: "finalize-version", + label: t("FinalizeVersion"), + icon: HistoryFinalizedReactSvgUrl, + onClick: () => + isEditing + ? this.onShowEditingToast(t) + : this.finalizeVersion(item.id, item.security), + disabled: false, + }, + { + id: "option_version-history", + key: "show-version-history", + label: t("ShowVersionHistory"), + icon: HistoryReactSvgUrl, + onClick: () => + this.showVersionHistory( + item.id, + item.security, + item?.requestToken, + ), + disabled: false, + }, + ], + }, + ]; + + const moveActions = !isInfoPanel + ? [ + { + id: "option_move-or-copy", + key: "move", + label: t("MoveOrCopy"), + icon: CopyReactSvgUrl, + items: [ + { + id: "option_move-to", + key: "move-to", + label: t("Common:MoveTo"), + icon: MoveReactSvgUrl, + onClick: isEditing + ? () => this.onShowEditingToast(t) + : this.onMoveAction, + disabled: false, + }, + { + id: "option_copy-to", + key: "copy-to", + label: t("Common:Copy"), + icon: CopyReactSvgUrl, + onClick: this.onCopyAction, + disabled: false, + }, + { + id: "option_create-copy", + key: "copy", + label: t("Common:Duplicate"), + icon: DuplicateReactSvgUrl, + onClick: () => this.onDuplicate(item, t), + disabled: false, + }, + ], + }, + ] + : [ + { + id: "option_move-to", + key: "move-to", + label: t("Common:MoveTo"), + icon: MoveReactSvgUrl, + onClick: isEditing + ? () => this.onShowEditingToast(t) + : this.onMoveAction, + disabled: false, + }, + { + id: "option_copy-to", + key: "copy-to", + label: t("Common:Copy"), + icon: CopyReactSvgUrl, + onClick: this.onCopyAction, + disabled: false, + }, + { + id: "option_create-copy", + key: "copy", + label: t("Common:Duplicate"), + icon: DuplicateReactSvgUrl, + onClick: () => this.onDuplicate(item, t), + disabled: false, + }, ]; - const moveActions = - isDesktop() && !isInfoPanel - ? [ - { - id: "option_move-or-copy", - key: "move", - label: t("MoveOrCopy"), - icon: CopyReactSvgUrl, - items: [ - { - id: "option_move-to", - key: "move-to", - label: t("Common:MoveTo"), - icon: MoveReactSvgUrl, - onClick: isEditing - ? () => this.onShowEditingToast(t) - : this.onMoveAction, - disabled: false, - }, - { - id: "option_copy-to", - key: "copy-to", - label: t("Common:Copy"), - icon: CopyReactSvgUrl, - onClick: this.onCopyAction, - disabled: false, - }, - { - id: "option_create-copy", - key: "copy", - label: t("Common:Duplicate"), - icon: DuplicateReactSvgUrl, - onClick: () => this.onDuplicate(item, t), - disabled: false, - }, - ], - }, - ] - : [ - { - id: "option_move-to", - key: "move-to", - label: t("Common:MoveTo"), - icon: MoveReactSvgUrl, - onClick: isEditing - ? () => this.onShowEditingToast(t) - : this.onMoveAction, - disabled: false, - }, - { - id: "option_copy-to", - key: "copy-to", - label: t("Common:Copy"), - icon: CopyReactSvgUrl, - onClick: this.onCopyAction, - disabled: false, - }, - { - id: "option_create-copy", - key: "copy", - label: t("Common:Duplicate"), - icon: DuplicateReactSvgUrl, - onClick: () => this.onDuplicate(item, t), - disabled: false, - }, - ]; const { pinOptions, muteOptions } = this.getRoomsRootContextOptions( item, @@ -1605,7 +1578,7 @@ class ContextOptionsStore { const pluginItems = this.onLoadPlugins(item); if (pluginItems.length > 0) { - if (!isDesktop() || pluginItems.length === 1) { + if (pluginItems.length === 1) { pluginItems.forEach((plugin) => { options.splice(1, 0, { id: `option_${plugin.key}`, From 87a95b6d420f6205ab565e11acabd69a9874ab3b Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Mon, 3 Jun 2024 15:35:13 +0300 Subject: [PATCH 04/59] Shared:ContextMenu:Fix small width. --- packages/shared/components/context-menu/ContextMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 68ca069140..782c8f467e 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -229,7 +229,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const widthMaxContent = Math.max(...optionsWidth); - width = width || widthMaxContent; + width = widthMaxContent; } } From a0483cbd4c8ced5baf7f2157f3b78d62eb3cabbe Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Fri, 7 Jun 2024 12:46:07 +0300 Subject: [PATCH 05/59] Shared:ContextMenu:Add max width context menu. Added trimming of overflowing text with ellipsis. --- .../context-menu/ContextMenu.styled.ts | 44 ++++++++++++++---- .../components/context-menu/ContextMenu.tsx | 2 +- .../context-menu/sub-components/SubMenu.tsx | 45 ++++++++++++++----- packages/shared/themes/base.ts | 3 +- packages/shared/themes/dark.ts | 3 +- 5 files changed, 73 insertions(+), 24 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index d831da2ef2..f26a13bb5f 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -26,7 +26,7 @@ import styled, { css } from "styled-components"; import { Base, TTheme } from "../../themes"; -import { tablet, mobile, getCorrectFourValuesStyle } from "../../utils"; +import { mobile, isMobile, getCorrectFourValuesStyle } from "../../utils"; const styledTabletView = css<{ articleWidth: number }>` position: fixed; @@ -116,11 +116,22 @@ const StyledContextMenu = styled.div<{ ${(props) => props.changeView && styledMobileView} } + @media ${mobile} { + ${(props) => props.changeView && styledMobileView} + } + .scroll-body { display: flex; flex-direction: column; justify-content: center; + + padding-inline-end: 0 !important; } + + ${!isMobile() && + css` + max-width: calc(100vw - 32px); + `} } .contextmenu-header { @@ -212,6 +223,11 @@ const StyledContextMenu = styled.div<{ margin: 0; padding: 0; list-style: none; + + ${!isMobile() && + css` + max-width: calc(100vw - 32px); + `} } .p-contextmenu .p-submenu-list { @@ -291,22 +307,23 @@ const StyledContextMenu = styled.div<{ cursor: default !important; margin: ${(props) => props.theme.menuItem.separator.margin}; height: ${(props) => props.theme.menuItem.separator.height}; - width: ${(props) => props.theme.menuItem.separator.width}; + &:hover { cursor: default !important; } - - @media ${mobile} { - margin-right: 8px !important; - width: calc(100% - 24px) !important; - } } .p-contextmenu .p-menuitem { position: relative; margin: ${(props) => props.theme.dropDownItem.margin}; - min-width: max-content; + max-width: calc(-32px + 100vw); + width: fit-content; + min-width: inherit; + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .p-contextmenu .scroll-body .p-menuitem { @@ -399,12 +416,23 @@ StyledContextMenu.defaultProps = { export const StyledList = styled.ul<{ listHeight: number; + widthSubMenu: null | number; }>` & > :first-child { .scroll-body { height: ${(props) => `${props.listHeight}px`}; } } + + & > :nth-child(1) { + ${(props) => + props.widthSubMenu && + css` + .p-menuitem { + max-width: ${`${props.widthSubMenu}px`}; + } + `} + } `; export { StyledContextMenu }; diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 782c8f467e..160a9d4183 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -296,7 +296,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { } } if (menuRef.current) { - menuRef.current.style.left = `${left}px`; + menuRef.current.style.left = `${left || 16}px`; menuRef.current.style.top = `${top}px`; if (!mobileView) menuRef.current.style.width = `${width}px`; diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index 8a6dd6b2c5..18e9ee4dbf 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -67,6 +67,7 @@ const SubMenu = (props: { const [model, setModel] = useState(props?.model); const [isLoading, setIsLoading] = useState(false); const [activeItem, setActiveItem] = useState(null); + const [widthSubMenu, setWidthSubMenu] = useState(null); const subMenuRef = useRef(null); @@ -185,25 +186,33 @@ const SubMenu = (props: { viewport.width - containerOffsetLeft - itemOuterWidth; const freeSpaceLeft = containerOffsetLeft; const submenuListMargin = 4; - const sectionPadding = 17; + const sectionPadding = 16; if (isRtl) { - if ( - !root && - freeSpaceLeft > freeSpaceRight && - subListWidth > containerOffsetLeft - ) { - // If the menu extends beyond the screen - subMenuRef.current.style.width = `${containerOffsetLeft - submenuListMargin - sectionPadding}px`; - } - if ( subListWidth < containerOffsetLeft || (!root && freeSpaceLeft > freeSpaceRight) ) { subMenuRef.current.style.left = `${-1 * subListWidth}px`; + + if (!root && subListWidth > containerOffsetLeft) { + // If the menu extends beyond the screen + const newWidth = + containerOffsetLeft - submenuListMargin - sectionPadding; + + subMenuRef.current.style.width = `${newWidth}px`; + setWidthSubMenu(newWidth); + } } else { subMenuRef.current.style.left = `${itemOuterWidth}px`; + + if (!root && subListWidth > freeSpaceRight) { + // If the menu extends beyond the screen + const newWidth = freeSpaceRight - 3 * submenuListMargin; + + subMenuRef.current.style.width = `${newWidth}px`; + setWidthSubMenu(newWidth); + } } } @@ -212,8 +221,20 @@ const SubMenu = (props: { viewport.width - DomHelpers.calculateScrollbarWidth(); if (!isRtl) { - if (notEnoughWidthRight && containerOffsetLeft > subListWidth) { + if (notEnoughWidthRight && freeSpaceLeft > freeSpaceRight) { subMenuRef.current.style.left = `${-1 * subListWidth}px`; + + if ( + notEnoughWidthRight && + !root && + subListWidth > containerOffsetLeft + ) { + // If the menu extends beyond the screen + const newWidth = containerOffsetLeft - 12; + + subMenuRef.current.style.width = `${newWidth}px`; + setWidthSubMenu(newWidth); + } } else { subMenuRef.current.style.left = `${itemOuterWidth}px`; @@ -227,6 +248,7 @@ const SubMenu = (props: { sectionPadding; subMenuRef.current.style.width = `${newWidth}px`; + setWidthSubMenu(newWidth); } } } @@ -504,6 +526,7 @@ const SubMenu = (props: { ref={subMenuRef} className={`${className} not-selectable`} listHeight={height + paddingList} + widthSubMenu={widthSubMenu} > {submenu} {submenuLower} diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index f9c6fa56de..11bbcad285 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2760,9 +2760,8 @@ export const getBaseTheme = () => { }, separator: { borderBottom: `1px solid ${grayLightMid} !important`, - margin: "6px 0px 6px 16px !important", + margin: "6px 16px !important", height: "1px !important", - width: "calc(100% - 16px) !important", }, text: { header: { diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index aca8510bfe..1947214d94 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -2739,9 +2739,8 @@ const Dark: TTheme = { }, separator: { borderBottom: `1px solid #474747 !important`, - margin: "6px 0px 6px 16px !important", + margin: "6px 16px !important", height: "1px !important", - width: "calc(100% - 16px) !important", }, text: { header: { From dd4e3e02550748cccfb4f2fae70f4570c809a599 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Fri, 7 Jun 2024 13:23:20 +0300 Subject: [PATCH 06/59] Shared:ContextMenu:Refactoring. --- packages/shared/components/context-menu/ContextMenu.tsx | 6 +++--- .../components/context-menu/sub-components/SubMenu.tsx | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 160a9d4183..bc6eb24015 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -53,6 +53,8 @@ import { MobileSubMenu } from "./sub-components/MobileSubMenu"; import { ContextMenuModel, ContextMenuProps } from "./ContextMenu.types"; +const marginTop = 16; // Indentation from the top border of the screen + const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const [visible, setVisible] = React.useState(false); const [reshow, setReshow] = React.useState(false); @@ -62,7 +64,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const [showMobileMenu, setShowMobileMenu] = React.useState(false); const [mobileSubMenuItems, setMobileSubMenuItems] = React.useState< ContextMenuModel[] | undefined - >(undefined); + >([]); const [mobileHeader, setMobileHeader] = React.useState(""); const [articleWidth, setArticleWidth] = React.useState(0); @@ -279,8 +281,6 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { // fit if (top < document.body.scrollTop) { - const marginTop = 16; - if (document.body.scrollTop === 0) top = marginTop; else top = document.body.scrollTop; } diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index 18e9ee4dbf..dd40d90448 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -46,6 +46,9 @@ import { SeparatorType, } from "../ContextMenu.types"; +const submenuListMargin = 4; // Indentation of the second level menu from the first level +const sectionPadding = 16; // Screen margin + const SubMenu = (props: { model: ContextMenuModel[]; root?: boolean; @@ -185,8 +188,6 @@ const SubMenu = (props: { const freeSpaceRight = viewport.width - containerOffsetLeft - itemOuterWidth; const freeSpaceLeft = containerOffsetLeft; - const submenuListMargin = 4; - const sectionPadding = 16; if (isRtl) { if ( From 52ab6ff5c9c89d34d4c959f99adba2f1b079d85b Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Fri, 7 Jun 2024 13:27:11 +0300 Subject: [PATCH 07/59] Shared:ContextMenu:Refactoring. --- packages/shared/components/context-menu/ContextMenu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index bc6eb24015..66998b4a53 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -53,7 +53,7 @@ import { MobileSubMenu } from "./sub-components/MobileSubMenu"; import { ContextMenuModel, ContextMenuProps } from "./ContextMenu.types"; -const marginTop = 16; // Indentation from the top border of the screen +const marginBorder = 16; // Indentation from the border of the screen const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { const [visible, setVisible] = React.useState(false); @@ -281,7 +281,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { // fit if (top < document.body.scrollTop) { - if (document.body.scrollTop === 0) top = marginTop; + if (document.body.scrollTop === 0) top = marginBorder; else top = document.body.scrollTop; } @@ -296,7 +296,7 @@ const ContextMenu = React.forwardRef((props: ContextMenuProps, ref) => { } } if (menuRef.current) { - menuRef.current.style.left = `${left || 16}px`; + menuRef.current.style.left = `${left || marginBorder}px`; menuRef.current.style.top = `${top}px`; if (!mobileView) menuRef.current.style.width = `${width}px`; From 559f0141857eb0f833a21ad4c650296cc0196afd Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 27 Jun 2024 13:55:13 +0300 Subject: [PATCH 08/59] Shared:ContextMenu:Fix width submenu lower in header. --- .../shared/components/context-menu/sub-components/SubMenu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index dd40d90448..ad631cef7d 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -147,7 +147,8 @@ const SubMenu = (props: { const widthMaxContent = Math.max(...optionsWidth); - subListWidth = subListWidth || widthMaxContent; + if (root) subListWidth = subListWidth || widthMaxContent; + else subListWidth = Math.max(subListWidth, widthMaxContent); } if (subMenuRef.current) { From 80ac3a0f71769df1463f7b8b364d3b54a368daf8 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 31 Jul 2024 13:43:36 +0300 Subject: [PATCH 09/59] Shared:ContextMenu:Fixed incorrect opening of the second level menu under the tablet. --- .../shared/components/context-menu/sub-components/SubMenu.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index a8580dd235..bd87d213f6 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -91,11 +91,9 @@ const SubMenu = (props: { ) => { const { disabled, url, onClick, items, action, label } = item; - if (label && (items || item.onLoad)) { + if (isMobile() && label && (items || item.onLoad)) { e.preventDefault(); - if (!isMobileDevice) return; - if (items) onMobileItemClick?.(e, label as string, items, undefined); else if (item.onLoad) onMobileItemClick?.(e, label as string, undefined, item.onLoad); From 9ec6a8da2ad474d7c36b4c7a6d7fc72e168efbc1 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Wed, 31 Jul 2024 14:07:30 +0300 Subject: [PATCH 10/59] Shared:ContextMenu:Removed unnecessary code. --- .../components/context-menu/ContextMenu.tsx | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 8a67535e03..4692a8d93d 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -248,24 +248,6 @@ const ContextMenu = React.forwardRef( left = event.pageX - width + 1; } - // if ( - // isTabletUtils() && - // (height > 483 || - // (isMobileOnly && window.innerHeight < window.innerWidth)) - // ) { - // const article = document.getElementById("article-container"); - - // let currentArticleWidth = 0; - // if (article) { - // currentArticleWidth = article.offsetWidth; - // } - - // setChangeView(true); - // setArticleWidth(currentArticleWidth); - - // return; - // } - if (mobileView) { setChangeView(true); setArticleWidth(0); From 6ed95a643b6f98f9a7b98c7c1b4226281056d1b3 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:21:09 +0300 Subject: [PATCH 11/59] Shared:ContextMenu:Fixed the scroll area in mobile view when the context menu cannot open to full height. --- .../context-menu/ContextMenu.styled.ts | 4 ---- .../components/context-menu/ContextMenu.tsx | 2 ++ .../context-menu/sub-components/SubMenu.tsx | 24 +++++++++++++++---- 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index 66396014f4..13e0b61fb4 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -102,10 +102,6 @@ const StyledContextMenu = styled.div<{ ${(props) => props.changeView && styledMobileView} } - @media ${mobile} { - ${(props) => props.changeView && styledMobileView} - } - .scroll-body { display: flex; flex-direction: column; diff --git a/packages/shared/components/context-menu/ContextMenu.tsx b/packages/shared/components/context-menu/ContextMenu.tsx index 4692a8d93d..c5b7b667db 100644 --- a/packages/shared/components/context-menu/ContextMenu.tsx +++ b/packages/shared/components/context-menu/ContextMenu.tsx @@ -550,6 +550,8 @@ const ContextMenu = React.forwardRef( resetMenu={resetMenu} onLeafClick={onLeafClick} onMobileItemClick={onMobileItemClick} + changeView={changeView} + withHeader={withHeader} /> )} diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index bd87d213f6..fcbbbe005c 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -64,8 +64,18 @@ const SubMenu = (props: { loadFunc?: () => Promise, ) => void; onLoad?: () => Promise; + changeView?: boolean; + withHeader?: boolean; }) => { - const { onLeafClick, root, resetMenu, onMobileItemClick, onLoad } = props; + const { + onLeafClick, + root, + resetMenu, + onMobileItemClick, + onLoad, + changeView, + withHeader, + } = props; const [model, setModel] = useState(props?.model); const [isLoading, setIsLoading] = useState(false); @@ -519,11 +529,17 @@ const SubMenu = (props: { const viewport = DomHelpers.getViewport(); const paddingList = 12; const marginsList = 32; + const backdrop = 64; + const header = 55; const listHeight = - height + paddingList + marginsList > viewport.height - ? viewport.height - marginsList - : height + paddingList; + changeView && withHeader + ? height + paddingList + header > viewport.height + ? viewport.height - backdrop - header - paddingList + : height + paddingList + : height + paddingList + marginsList > viewport.height + ? viewport.height - marginsList + : height + paddingList; if (model) { return ( From 7819b4ac39d03ba49b44c4547360a2a5f900bf66 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Fri, 9 Aug 2024 13:23:41 +0300 Subject: [PATCH 12/59] Shared:Themes:Unnecessary code removed. --- packages/shared/themes/base.ts | 1 - packages/shared/themes/dark.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index a548bbb277..1d7b5f2efa 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -2551,7 +2551,6 @@ export const getBaseTheme = () => { borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", boxShadow: `0px 8px 16px 0px ${boxShadowColor}`, - padding: "6px 0px", border: "none", devices: { maxHeight: "calc(100vh - 64px)", diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 6011c1195d..6a3306012c 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -2536,7 +2536,6 @@ const Dark: TTheme = { borderRadius: "6px", mobileBorderRadius: "6px 6px 0 0", boxShadow: `0px 8px 16px 0px ${boxShadowDarkColor}`, - padding: "6px 0px", border: `1px solid ${grayDarkStrong}`, devices: { maxHeight: "calc(100vh - 64px)", From 18e70b4d73fa418801660abeb082932085e789f0 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:08:53 +0300 Subject: [PATCH 13/59] Shared:ContextMenu:Fixed page crash when clicking on a table without a context menu button in the profile and importing data. --- .../context-menu/sub-components/SubMenu.tsx | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index fcbbbe005c..4a7f8d244d 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -516,32 +516,32 @@ const SubMenu = (props: { const active = isActive(); const submenuLower = renderSubMenuLower(); - const newModel = model.filter( - (item: ContextMenuModel) => item && !item.disabled, - ); - const rowHeights: number[] = newModel.map((item: ContextMenuModel) => { - if (!item) return 0; - if (item.isSeparator) return 13; - return 36; - }); + if (model.length) { + const newModel = model.filter( + (item: ContextMenuModel) => item && !item.disabled, + ); + const rowHeights: number[] = newModel.map((item: ContextMenuModel) => { + if (!item) return 0; + if (item.isSeparator) return 13; + return 36; + }); - const height = rowHeights.reduce((a, b) => a + b); - const viewport = DomHelpers.getViewport(); - const paddingList = 12; - const marginsList = 32; - const backdrop = 64; - const header = 55; + const height = rowHeights.reduce((a, b) => a + b); + const viewport = DomHelpers.getViewport(); + const paddingList = 12; + const marginsList = 32; + const backdrop = 64; + const header = 55; - const listHeight = - changeView && withHeader - ? height + paddingList + header > viewport.height - ? viewport.height - backdrop - header - paddingList - : height + paddingList - : height + paddingList + marginsList > viewport.height - ? viewport.height - marginsList - : height + paddingList; + const listHeight = + changeView && withHeader + ? height + paddingList + header > viewport.height + ? viewport.height - backdrop - header - paddingList + : height + paddingList + : height + paddingList + marginsList > viewport.height + ? viewport.height - marginsList + : height + paddingList; - if (model) { return ( Date: Mon, 12 Aug 2024 13:11:08 +0300 Subject: [PATCH 14/59] Shared:ContextMenu:Fixed incorrect styles in mobile view when resizing the window on desktop. --- .../context-menu/ContextMenu.styled.ts | 40 +++++-------------- 1 file changed, 11 insertions(+), 29 deletions(-) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index 13e0b61fb4..b8b42e63cd 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -26,21 +26,7 @@ import styled, { css } from "styled-components"; import { Base, TTheme, globalColors } from "../../themes"; -import { mobile, isMobile, getCorrectFourValuesStyle } from "../../utils"; - -const styledTabletView = css<{ articleWidth: number }>` - position: fixed; - width: ${(props) => props.theme.newContextMenu.devices.tabletWidth}; - max-width: ${(props) => props.theme.newContextMenu.devices.tabletWidth}; - max-height: ${(props) => props.theme.newContextMenu.devices.maxHeight}; - inset-inline-start: ${(props) => - props.articleWidth - ? `${props.articleWidth}px` - : props.theme.newContextMenu.devices.left}; - inset-inline-end: ${(props) => props.theme.newContextMenu.devices.right}; - bottom: ${(props) => props.theme.newContextMenu.devices.bottom}; - margin: ${(props) => props.theme.newContextMenu.devices.margin}; -`; +import { mobile, getCorrectFourValuesStyle } from "../../utils"; const styledMobileView = css` position: fixed; @@ -98,10 +84,6 @@ const StyledContextMenu = styled.div<{ -moz-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.newContextMenu.boxShadow}; - @media ${mobile} { - ${(props) => props.changeView && styledMobileView} - } - .scroll-body { display: flex; flex-direction: column; @@ -109,11 +91,6 @@ const StyledContextMenu = styled.div<{ padding-inline-end: 0 !important; } - - ${!isMobile() && - css` - max-width: calc(100vw - 32px); - `} } .contextmenu-header { @@ -201,11 +178,6 @@ const StyledContextMenu = styled.div<{ margin: 0; padding: 0; list-style: none; - - ${!isMobile() && - css` - max-width: calc(100vw - 32px); - `} } .p-contextmenu .p-submenu-list { @@ -377,6 +349,16 @@ const StyledContextMenu = styled.div<{ opacity: 1; transition: opacity 250ms; } + + .p-contextmenu { + @media ${mobile} { + ${(props) => props.changeView && styledMobileView} + } + + @media not ${mobile} { + max-width: calc(100vw - 32px); + } + } `; StyledContextMenu.defaultProps = { From ba12aa8b900b71253582e67709b38b658086c772 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 12 Aug 2024 13:48:27 +0300 Subject: [PATCH 15/59] Shared:ContextMenu:Fix styles. --- .../shared/components/context-menu/ContextMenu.styled.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/shared/components/context-menu/ContextMenu.styled.ts b/packages/shared/components/context-menu/ContextMenu.styled.ts index b8b42e63cd..5602a67976 100644 --- a/packages/shared/components/context-menu/ContextMenu.styled.ts +++ b/packages/shared/components/context-menu/ContextMenu.styled.ts @@ -359,6 +359,12 @@ const StyledContextMenu = styled.div<{ max-width: calc(100vw - 32px); } } + + .p-contextmenu ul { + @media not ${mobile} { + max-width: calc(100vw - 32px); + } + } `; StyledContextMenu.defaultProps = { From a8412a22ca38a9aa9e4c9620a2ffedef0ae5e368 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Mon, 12 Aug 2024 18:11:37 +0300 Subject: [PATCH 16/59] Shared:ContextMenu:Fixed increasing the width of the second level menu on hover in a tight theme. --- .../shared/components/context-menu/sub-components/SubMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index 4a7f8d244d..fdfc1d3b3a 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -158,7 +158,7 @@ const SubMenu = (props: { const widthMaxContent = Math.max(...optionsWidth); if (root) subListWidth = subListWidth || widthMaxContent; - else subListWidth = Math.max(subListWidth, widthMaxContent); + else subListWidth = widthMaxContent; } if (subMenuRef.current) { From 29a295f897db426aab5a33832506cdf3895117b3 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Tue, 13 Aug 2024 10:47:29 +0300 Subject: [PATCH 17/59] Client:Pages:OAuth2: fix header --- .../src/pages/PortalSettings/Layout/index.js | 2 +- .../OAuth/OAuthSectionHeader/index.tsx | 18 ++++++++---------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/Layout/index.js b/packages/client/src/pages/PortalSettings/Layout/index.js index eb188a7ed7..0c4019b59c 100644 --- a/packages/client/src/pages/PortalSettings/Layout/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/index.js @@ -112,7 +112,7 @@ const Layout = ({ ) : currentPath === oauthCreatePath || currentPath === oauthEditPath ? ( - + ) : ( )} diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthSectionHeader/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthSectionHeader/index.tsx index e6ff21e183..a1fa9dafd8 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthSectionHeader/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuthSectionHeader/index.tsx @@ -28,17 +28,15 @@ const OAuthSectionHeader = ({ isEdit }: { isEdit: boolean }) => {
-
- + - {isEdit ? t("EditApp") : t("NewApp")} -
+ {isEdit ? t("EditApp") : t("NewApp")}
From 94d19ffdb8db2d96429ff30435fd64072f1a2689 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Tue, 13 Aug 2024 11:17:59 +0300 Subject: [PATCH 18/59] Shared:Themes:Dark: fix disabled input color text --- packages/shared/themes/dark.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 2a7fe92f3c..1b0eb05898 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -663,7 +663,7 @@ const Dark: TTheme = { input: { color: white, - disableColor: grayDarkStrong, + disableColor: grayDarkText, backgroundColor: black, disableBackgroundColor: grayDarkStrong, From 57ac4a729fbe555beec0cc22b92a7698844bd7ed Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Tue, 13 Aug 2024 11:30:43 +0300 Subject: [PATCH 19/59] Client:PortalSettings:OAuth: fix select group required color --- .../sub-components/ClientForm/components/SelectGroup.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SelectGroup.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SelectGroup.tsx index d34a42fde6..25c15de91a 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SelectGroup.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/ClientForm/components/SelectGroup.tsx @@ -2,6 +2,7 @@ import React from "react"; import { Text } from "@docspace/shared/components/text"; import { SelectorAddButton } from "@docspace/shared/components/selector-add-button"; +import { globalColors } from "@docspace/shared/themes"; import { StyledInputGroup } from "../ClientForm.styled"; @@ -55,7 +56,8 @@ const SelectGroup = ({ color="" textAlign="" > - {label} * + {label}{" "} + *
From eb7c8380b565f45ba7fb1085b28b672cfb776eca Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Tue, 13 Aug 2024 13:55:11 +0300 Subject: [PATCH 20/59] Client/Shared: fix drop down width from 'fit-content' to 'auto' for correct calculation at FF --- packages/client/src/components/AccessSelector/index.tsx | 2 +- packages/client/src/components/QuotaForm/index.js | 2 +- packages/client/src/components/SpaceQuota/index.js | 2 +- .../sub-components/ThirdPartyStorage/ThirdPartyComboBox.js | 2 +- .../sub-components/GroupMember/index.tsx | 2 +- .../src/pages/Home/InfoPanel/Body/views/Accounts/index.js | 2 +- .../src/pages/Home/InfoPanel/Body/views/Members/User.js | 2 +- .../Section/AccountsBody/InsideGroup/TableView/TableRow.js | 4 ++-- .../Home/Section/AccountsBody/People/TableView/TableRow.js | 2 +- .../AccountsTable/RowView/UsersTypeRowContent.js | 2 +- .../AccountsTable/TableView/UsersTypeTableRow.js | 2 +- .../AccountsTable/RowView/UsersRowContent.js | 2 +- .../AccountsTable/TableView/UsersTableRow.js | 2 +- .../AccountsTable/RowView/UsersTypeRowContent.js | 2 +- .../AccountsTable/TableView/UsersTypeTableRow.js | 2 +- packages/shared/components/drop-down/DropDown.styled.ts | 2 +- .../components/selector/sub-components/AccessSelector.tsx | 4 ++-- packages/shared/components/share/sub-components/LinkRow.tsx | 2 +- 18 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/client/src/components/AccessSelector/index.tsx b/packages/client/src/components/AccessSelector/index.tsx index f68d953ca8..127938ec6b 100644 --- a/packages/client/src/components/AccessSelector/index.tsx +++ b/packages/client/src/components/AccessSelector/index.tsx @@ -146,7 +146,7 @@ const AccessSelector: React.FC = ({ directionX="right" directionY="top" fixedDirection - manualWidth="fit-content" + manualWidth="auto" isDefaultMode isAside={isMobileView} setIsOpenItemAccess={setIsOpenItemAccess} diff --git a/packages/client/src/components/QuotaForm/index.js b/packages/client/src/components/QuotaForm/index.js index 1305ef9e62..b34856cce8 100644 --- a/packages/client/src/components/QuotaForm/index.js +++ b/packages/client/src/components/QuotaForm/index.js @@ -218,7 +218,7 @@ const QuotaForm = ({ size="content" onSelect={onSelectComboBox} showDisabledItems - manualWidth={"fit-content"} + manualWidth="auto" directionY="both" />
diff --git a/packages/client/src/components/SpaceQuota/index.js b/packages/client/src/components/SpaceQuota/index.js index 182b955112..34a6cd2663 100644 --- a/packages/client/src/components/SpaceQuota/index.js +++ b/packages/client/src/components/SpaceQuota/index.js @@ -196,7 +196,7 @@ const SpaceQuota = (props) => { size="content" modernView isLoading={isLoading} - manualWidth="fit-content" + manualWidth="auto" directionY="both" /> diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js index 41f5e19848..96c6867649 100644 --- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js +++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/ThirdPartyStorage/ThirdPartyComboBox.js @@ -239,7 +239,7 @@ const ThirdPartyComboBox = ({ scaled withBackdrop={isMobile} size="content" - manualWidth={"fit-content"} + manualWidth={"auto"} isMobileView={isMobileOnly} directionY="both" displaySelectedOption diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx index 081701f4ea..b2dd4e92bf 100644 --- a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx +++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx @@ -170,7 +170,7 @@ const GroupMember = ({ member, infoPanelSelection }: GroupMemberProps) => { size="content" modernView title={t("Common:Role")} - manualWidth={"fit-content"} + manualWidth="auto" isMobileView={isMobileOnly} directionY="both" displaySelectedOption diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js index 9988810e25..48e7058160 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js +++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Accounts/index.js @@ -176,7 +176,7 @@ const Accounts = (props) => { size="content" displaySelectedOption modernView - manualWidth={"fit-content"} + manualWidth="auto" isLoading={isLoading} /> ); 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 d54dcc0ea3..5ae7ecbc74 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 @@ -378,7 +378,7 @@ const User = ({ size="content" modernView title={t("Common:Role")} - manualWidth={"fit-content"} + manualWidth="auto" isLoading={isLoading} isMobileView={isMobileOnly} directionY="both" diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js index bc198c6201..9c4ca6f5aa 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableRow.js @@ -399,7 +399,7 @@ const InsideGroupTableRow = (props) => { directionY="both" size="content" modernView - manualWidth={"fit-content"} + manualWidth="auto" isLoading={isLoading} optionStyle={{ maxWidth: "400px" }} textOverflow @@ -442,7 +442,7 @@ const InsideGroupTableRow = (props) => { size="content" displaySelectedOption modernView - manualWidth={"fit-content"} + manualWidth="auto" isLoading={isLoading} /> ); diff --git a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js index 45c74f06fc..7352bb5612 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/People/TableView/TableRow.js @@ -438,7 +438,7 @@ const PeopleTableRow = (props) => { size="content" displaySelectedOption modernView - manualWidth={"fit-content"} + manualWidth={"auto"} isLoading={isLoading} /> ); diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js index 49978069f3..bec9750871 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js @@ -131,7 +131,7 @@ const UsersRowContent = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> , diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js index 9cfb47cc25..4c59bdece7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js @@ -126,7 +126,7 @@ const UsersTypeTableRow = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersRowContent.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersRowContent.js index 3c9268a46c..d73ed0ffe3 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersRowContent.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersRowContent.js @@ -132,7 +132,7 @@ const UsersRowContent = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> , diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTableRow.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTableRow.js index 9cfb47cc25..4c59bdece7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTableRow.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTableRow.js @@ -126,7 +126,7 @@ const UsersTypeTableRow = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js index 4730f3fe62..d55e29acf8 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/UsersTypeRowContent.js @@ -132,7 +132,7 @@ const UsersRowContent = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> , diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js index 7382d83618..417e46d932 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/UsersTypeTableRow.js @@ -126,7 +126,7 @@ const UsersTypeTableRow = ({ size="content" displaySelectedOption modernView - manualWidth="fit-content" + manualWidth="auto" /> diff --git a/packages/shared/components/drop-down/DropDown.styled.ts b/packages/shared/components/drop-down/DropDown.styled.ts index 4fa68fb4af..36418faf1c 100644 --- a/packages/shared/components/drop-down/DropDown.styled.ts +++ b/packages/shared/components/drop-down/DropDown.styled.ts @@ -106,7 +106,7 @@ const StyledDropdown = styled.div<{ border: ${(props) => props.theme.dropDown.border}; border-radius: ${(props) => props.theme.dropDown.borderRadius}; -moz-border-radius: ${(props) => props.theme.dropDown.borderRadius}; - -webkit-border-radius: ${(props) => props.theme.dropDown.borderRadius};dropDownMaxHeight + -webkit-border-radius: ${(props) => props.theme.dropDown.borderRadius}; box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -moz-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; -webkit-box-shadow: ${(props) => props.theme.dropDown.boxShadow}; diff --git a/packages/shared/components/selector/sub-components/AccessSelector.tsx b/packages/shared/components/selector/sub-components/AccessSelector.tsx index a7dd834da5..e501090f6e 100644 --- a/packages/shared/components/selector/sub-components/AccessSelector.tsx +++ b/packages/shared/components/selector/sub-components/AccessSelector.tsx @@ -63,7 +63,7 @@ const AccessSelector = (props: AccessSelectorProps) => { options={accessRights as TOption[]} size={ComboBoxSize.content} scaled={false} - manualWidth="fit-content" + manualWidth="auto" selectedOption={selectedAccessRight as TOption} showDisabledItems directionX="right" @@ -81,7 +81,7 @@ const AccessSelector = (props: AccessSelectorProps) => { directionX="right" directionY="top" fixedDirection={isMobileView} - manualWidth={isMobileView ? "fit-content" : `${width}px`} + manualWidth={isMobileView ? "auto" : `${width}px`} isAside={isMobileView} manualY={isMobileView ? "0px" : undefined} withoutBackground={isMobileView} diff --git a/packages/shared/components/share/sub-components/LinkRow.tsx b/packages/shared/components/share/sub-components/LinkRow.tsx index bf05ee7c76..a5e1cc4964 100644 --- a/packages/shared/components/share/sub-components/LinkRow.tsx +++ b/packages/shared/components/share/sub-components/LinkRow.tsx @@ -153,7 +153,7 @@ const LinkRow = ({ modernView type="onlyIcon" isDisabled={isExpiredLink || isLoaded} - manualWidth="fit-content" + manualWidth="auto" withBackdrop={false} /> From 42fea7f56f53784baf9330d4b40c3213b8b881cb Mon Sep 17 00:00:00 2001 From: Elyor Djalilov Date: Tue, 13 Aug 2024 16:02:03 +0500 Subject: [PATCH 21/59] Web: Client: Settings: Data Import: fixed display breakpoint warning --- .../categories/data-import/GoogleWorkspace/index.js | 2 +- .../categories/data-import/NextCloudWorkspace/index.js | 2 +- .../categories/data-import/OnlyofficeWorkspace/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js index b84e8ce76a..e644d45ba3 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/index.js @@ -219,7 +219,7 @@ const GoogleWorkspace = ({ return clearCheckedAccounts; }, []); - if (isMobile || isMobileBreakpoint()) + if (isMobileBreakpoint()) return ( { return clearCheckedAccounts; }, []); - if (isMobile || isMobileBreakpoint()) + if (isMobileBreakpoint()) return ( Date: Tue, 13 Aug 2024 16:00:26 +0300 Subject: [PATCH 22/59] Fix Bug 69637 - Rooms.Form.Embed. Fixed embedding mode --- packages/client/src/components/panels/EmbeddingPanel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/components/panels/EmbeddingPanel/index.tsx b/packages/client/src/components/panels/EmbeddingPanel/index.tsx index 07d6332655..eaac632bc1 100644 --- a/packages/client/src/components/panels/EmbeddingPanel/index.tsx +++ b/packages/client/src/components/panels/EmbeddingPanel/index.tsx @@ -160,7 +160,7 @@ const EmbeddingPanelComponent = (props: EmbeddingPanelProps) => { ); const fileConfig = { - mode: "viewer", + mode: "editor", width: `${widthValue}${dataDimensions[0].label}`, height: `${heightValue}${dataDimensions[1].label}`, frameId: "ds-frame", From f3ebbe20ea75de9dd06bb713803df5bc803d315f Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 13 Aug 2024 16:01:01 +0300 Subject: [PATCH 23/59] Fixed Bug 69396: Zoom: Fixed wrong height on resize --- packages/shared/components/selector/sub-components/Body.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/shared/components/selector/sub-components/Body.tsx b/packages/shared/components/selector/sub-components/Body.tsx index 14d7af6d18..f05fd8a593 100644 --- a/packages/shared/components/selector/sub-components/Body.tsx +++ b/packages/shared/components/selector/sub-components/Body.tsx @@ -124,7 +124,9 @@ const Body = ({ const onBodyResize = React.useCallback(() => { if (bodyRef && bodyRef.current) { - setBodyHeight(bodyRef.current.offsetHeight); + setTimeout(() => { + setBodyHeight(bodyRef.current!.offsetHeight); + }, 20); } }, []); From 9821d4d969d4ed28b5d2bdc4f1e0732660afb54e Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 13 Aug 2024 16:32:43 +0300 Subject: [PATCH 24/59] Fixed Bug 69236: Zoom: Fixed ability to go to fill out the form during a call --- packages/doceditor/src/components/Editor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/doceditor/src/components/Editor.tsx b/packages/doceditor/src/components/Editor.tsx index f64cb053f9..06eb9976b8 100644 --- a/packages/doceditor/src/components/Editor.tsx +++ b/packages/doceditor/src/components/Editor.tsx @@ -305,7 +305,7 @@ const Editor = ({ newConfig.events.onRequestClose = onSDKRequestClose; } - if (config?.startFilling) { + if (config?.startFilling && !IS_ZOOM) { newConfig.events.onRequestStartFilling = () => onSDKRequestStartFilling?.(t("Common:ShareAndCollect")); } From 36226366d34f254b1d80403ce51d1fe53e3c72c5 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 13 Aug 2024 17:26:44 +0300 Subject: [PATCH 25/59] Fixed Bug 68537: JS-SDK: Restored missing value for viewTableColumns option --- .../categories/developer-tools/JavascriptSDK/presets/Manager.js | 1 + public/scripts/sdk/1.0.1/api.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js index 7c7e509520..a3c1c572bb 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/presets/Manager.js @@ -130,6 +130,7 @@ const Manager = (props) => { ); const [selectedColumns, setSelectedColumns] = useState([ { key: "Name", label: t("Common:Name") }, + { key: "Size", label: t("Common:Size") }, { key: "Type", label: t("Common:Type") }, { key: "Tags", label: t("Common:Tags") }, ]); diff --git a/public/scripts/sdk/1.0.1/api.js b/public/scripts/sdk/1.0.1/api.js index ae265191e0..f006b3753f 100644 --- a/public/scripts/sdk/1.0.1/api.js +++ b/public/scripts/sdk/1.0.1/api.js @@ -53,7 +53,7 @@ showSignOut: true, destroyText: "", viewAs: "row", //TODO: ["row", "table", "tile"] - viewTableColumns: "Name,Type,Tags", + viewTableColumns: "Name,Size,Type,Tags", checkCSP: true, disableActionButton: false, showSettings: false, From 625a7aa5a64bab61c038f6552c8a49944b5167f1 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Tue, 13 Aug 2024 18:10:38 +0300 Subject: [PATCH 26/59] JS-SDK: Added onNoAccess event --- .../src/components/EmptyContainer/RoomNoAccessContainer.js | 3 +++ packages/shared/types/Frame.ts | 2 ++ public/scripts/sdk/1.0.1/api.js | 1 + 3 files changed, 6 insertions(+) diff --git a/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js b/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js index e02dc9a77f..61df1e840f 100644 --- a/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js +++ b/packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js @@ -38,6 +38,7 @@ import { IconButton } from "@docspace/shared/components/icon-button"; import RoomsFilter from "@docspace/shared/api/rooms/filter"; import { RoomSearchArea } from "@docspace/shared/enums"; +import { frameCallEvent } from "@docspace/shared/utils/common"; import { getCategoryUrl } from "SRC_DIR/helpers/utils"; import { CategoryType } from "SRC_DIR/helpers/constants"; @@ -60,6 +61,8 @@ const RoomNoAccessContainer = (props) => { const navigate = useNavigate(); React.useEffect(() => { + frameCallEvent({ event: "onNoAccess" }); + const timer = setTimeout(onGoToShared, 5000); return () => clearTimeout(timer); }, []); diff --git a/packages/shared/types/Frame.ts b/packages/shared/types/Frame.ts index 1dd42178ad..469ff145df 100644 --- a/packages/shared/types/Frame.ts +++ b/packages/shared/types/Frame.ts @@ -75,6 +75,7 @@ export type TFrameEvents = { onAuthSuccess: null | ((e: Event) => void); onSignOut: null | ((e: Event) => void); onDownload: null | ((e: Event) => void); + onNoAccess: null | ((e: Event) => void); }; export type TFrameConfig = { @@ -96,6 +97,7 @@ export type TFrameConfig = { showSelectorCancel: boolean; showSelectorHeader: boolean; showHeader: boolean; + showHeaderBanner: string; showTitle: boolean; showMenu: boolean; showFilter: boolean; diff --git a/public/scripts/sdk/1.0.1/api.js b/public/scripts/sdk/1.0.1/api.js index f006b3753f..cb263c3245 100644 --- a/public/scripts/sdk/1.0.1/api.js +++ b/public/scripts/sdk/1.0.1/api.js @@ -97,6 +97,7 @@ onAuthSuccess: null, onSignOut: null, onDownload: null, + onNoAccess: null, }, }; From 097adc82d529e9cc177bed6aa232356b3a489345 Mon Sep 17 00:00:00 2001 From: Aleksandr Lushkin Date: Tue, 13 Aug 2024 17:45:19 +0200 Subject: [PATCH 27/59] Client: EditGroupStore: Fix moving manager to members without setting new manager --- packages/client/src/store/EditGroupStore.ts | 11 +++++++++++ packages/shared/api/groups/index.ts | 8 ++++++++ 2 files changed, 19 insertions(+) diff --git a/packages/client/src/store/EditGroupStore.ts b/packages/client/src/store/EditGroupStore.ts index 541ace92c8..570113fd75 100644 --- a/packages/client/src/store/EditGroupStore.ts +++ b/packages/client/src/store/EditGroupStore.ts @@ -125,6 +125,17 @@ class EditGroupStore { const addedIds = Array.from(this.addedMembersMap.keys()); const removedIds = Array.from(this.removedMembersMap.keys()); + const oldManager = this.group.manager; + const oldManagerRemovedButRemainsAsMember = + oldManager && + oldManager.id !== this.manager?.id && + !this.removedMembersMap.has(oldManager.id); + + // Requires when new group is without manager and old manager moved to members. updateGroup api method doesn't provide possibility to do it without setting new manager + if (this.manager === null && oldManagerRemovedButRemainsAsMember) { + await api.groups.removeGroupMembers(this.group.id, [oldManager.id]); + addedIds.push(oldManager.id); + } await updateGroup( this.group?.id, diff --git a/packages/shared/api/groups/index.ts b/packages/shared/api/groups/index.ts index 3b54cba3b1..36b1987c68 100644 --- a/packages/shared/api/groups/index.ts +++ b/packages/shared/api/groups/index.ts @@ -146,6 +146,14 @@ export const addGroupMembers = (groupId: string, members: string) => { }); }; +export const removeGroupMembers = (groupId: string, membersIds: string[]) => { + return request({ + method: "delete", + url: `/group/${groupId}/members`, + data: { id: groupId, members: membersIds }, + }) as Promise; +}; + // * Delete export const deleteGroup = (groupId: string) => { From ca7157a5b12699ef8292cf5cf83ddcc9c98c4123 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Tue, 13 Aug 2024 19:02:30 +0300 Subject: [PATCH 28/59] Fix Bug 69568 Backlighting of available dates not active --- packages/shared/components/calendar/utils/getCalendarYears.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/calendar/utils/getCalendarYears.ts b/packages/shared/components/calendar/utils/getCalendarYears.ts index 8e0630cf57..82a2538044 100644 --- a/packages/shared/components/calendar/utils/getCalendarYears.ts +++ b/packages/shared/components/calendar/utils/getCalendarYears.ts @@ -29,7 +29,7 @@ import moment from "moment"; export const getCalendarYears = (observedDate: moment.Moment) => { const years = []; const selectedYear = observedDate.year(); - const firstYear = selectedYear - (selectedYear % 10) - 1; + const firstYear = selectedYear - 1; for (let i = firstYear; i <= firstYear + 15; i += 1) { years.push(moment(i, "YYYY").format("YYYY")); From da127707afbfa6adc0e40b14191cc73e1ee5efa7 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Tue, 13 Aug 2024 20:42:44 +0400 Subject: [PATCH 29/59] LDAP: Remove error logging duplicate --- packages/client/src/store/LdapFormStore.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/store/LdapFormStore.js b/packages/client/src/store/LdapFormStore.js index c725630f72..ba929c76e1 100644 --- a/packages/client/src/store/LdapFormStore.js +++ b/packages/client/src/store/LdapFormStore.js @@ -518,7 +518,6 @@ class LdapFormStore { toastr.success(t("Common:SuccessfullyCompletedOperation")); } } catch (error) { - console.error(error); toastr.error(error); this.endProcess(); } From f23d1f7e960e53f7946f9a16ac8db99e7b3cf480 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Tue, 13 Aug 2024 22:06:56 +0300 Subject: [PATCH 30/59] Shared:ContextMenu:Fixed the increase in the width of the second level menu on hover, when there is a scroll, or when the theme is dark. Added margins for the second menu level. --- .../context-menu/sub-components/SubMenu.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/shared/components/context-menu/sub-components/SubMenu.tsx b/packages/shared/components/context-menu/sub-components/SubMenu.tsx index fdfc1d3b3a..6ac8662057 100644 --- a/packages/shared/components/context-menu/sub-components/SubMenu.tsx +++ b/packages/shared/components/context-menu/sub-components/SubMenu.tsx @@ -158,13 +158,19 @@ const SubMenu = (props: { const widthMaxContent = Math.max(...optionsWidth); if (root) subListWidth = subListWidth || widthMaxContent; - else subListWidth = widthMaxContent; + else if (!subMenuRef?.current?.style.width) + subListWidth = Math.max(subListWidth, widthMaxContent); } if (subMenuRef.current) { let subMenuRefTop = null; - if (!isMobile()) subMenuRef.current.style.width = `${subListWidth}px`; + if (!isMobile()) { + if (root) subMenuRef.current.style.width = `${subListWidth}px`; + else if (!subMenuRef?.current?.style.width) { + subMenuRef.current.style.width = `${subListWidth}px`; + } + } if (!isMobile() && !root) { const firstList = parentItem?.firstChild as HTMLElement; @@ -218,6 +224,8 @@ const SubMenu = (props: { } else { subMenuRef.current.style.left = `${itemOuterWidth}px`; + if (!root) subMenuRef.current.style.marginLeft = `4px`; + if (!root && subListWidth > freeSpaceRight) { // If the menu extends beyond the screen const newWidth = freeSpaceRight - 3 * submenuListMargin; @@ -236,6 +244,8 @@ const SubMenu = (props: { if (notEnoughWidthRight && freeSpaceLeft > freeSpaceRight) { subMenuRef.current.style.left = `${-1 * subListWidth}px`; + if (!root) subMenuRef.current.style.marginLeft = `-4px`; + if ( notEnoughWidthRight && !root && From 56d9c6e774e55bfe0a07d274764038575e6e9c45 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 14 Aug 2024 10:03:39 +0300 Subject: [PATCH 31/59] Client:OAuth2: add generateDeveloperToken to store --- .../GenerateDevelopTokenDialog.tsx | 26 +++++++++++++++ packages/client/src/store/OAuthStore.ts | 33 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx new file mode 100644 index 0000000000..5492b9e903 --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx @@ -0,0 +1,26 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import styled from "styled-components"; +import { useTranslation } from "react-i18next"; + +import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore"; + +const GenerateDeveloperTokenDialog = () => { + return
; +}; + +export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => { + const { + setInfoDialogVisible, + bufferSelection, + scopeList, + getContextMenuItems, + } = oauthStore; + + return { + setInfoDialogVisible, + client: bufferSelection, + scopeList, + getContextMenuItems, + }; +})(observer(GenerateDeveloperTokenDialog)); diff --git a/packages/client/src/store/OAuthStore.ts b/packages/client/src/store/OAuthStore.ts index 2b7c356ddf..9c3895976d 100644 --- a/packages/client/src/store/OAuthStore.ts +++ b/packages/client/src/store/OAuthStore.ts @@ -58,6 +58,9 @@ export interface OAuthStoreProps { resetDialogVisible: boolean; setResetDialogVisible: (value: boolean) => void; + generateDeveloperTokenDialogVisible: boolean; + setGenerateDeveloperTokenDialogVisible: (value: boolean) => void; + deleteDialogVisible: boolean; setDeleteDialogVisible: (value: boolean) => void; @@ -157,6 +160,8 @@ class OAuthStore implements OAuthStoreProps { resetDialogVisible: boolean = false; + generateDeveloperTokenDialogVisible: boolean = false; + selection: string[] = []; bufferSelection: IClientProps | null = null; @@ -216,6 +221,10 @@ class OAuthStore implements OAuthStoreProps { this.resetDialogVisible = value; }; + setGenerateDeveloperTokenDialogVisible = (value: boolean) => { + this.generateDeveloperTokenDialogVisible = value; + }; + setClientSecret = (value: string) => { this.clientSecret = value; }; @@ -526,6 +535,7 @@ class OAuthStore implements OAuthStoreProps { this.setInfoDialogVisible(true); this.setDisableDialogVisible(false); this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(false); }; const onRevoke = () => { @@ -535,6 +545,7 @@ class OAuthStore implements OAuthStoreProps { this.setRevokeDialogVisible(true); this.setDisableDialogVisible(false); this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(false); }; const onDisable = () => { @@ -544,6 +555,17 @@ class OAuthStore implements OAuthStoreProps { this.setRevokeDialogVisible(false); this.setDisableDialogVisible(true); this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(false); + }; + + const onGenerateDevelopToken = () => { + this.setBufferSelection(clientId); + this.setPreviewDialogVisible(false); + this.setInfoDialogVisible(false); + this.setRevokeDialogVisible(false); + this.setDisableDialogVisible(false); + this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(true); }; const openOption = { @@ -598,6 +620,7 @@ class OAuthStore implements OAuthStoreProps { this.setRevokeDialogVisible(false); this.setDisableDialogVisible(false); this.setDeleteDialogVisible(true); + this.setGenerateDeveloperTokenDialogVisible(false); }; const onShowPreview = () => { @@ -607,6 +630,7 @@ class OAuthStore implements OAuthStoreProps { this.setRevokeDialogVisible(false); this.setDisableDialogVisible(false); this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(false); }; const onEnable = async (status: boolean) => { @@ -615,6 +639,7 @@ class OAuthStore implements OAuthStoreProps { this.setRevokeDialogVisible(false); this.setDisableDialogVisible(false); this.setDeleteDialogVisible(false); + this.setGenerateDeveloperTokenDialogVisible(false); if (isGroupContext) { try { @@ -673,7 +698,15 @@ class OAuthStore implements OAuthStoreProps { onClick: onDisable, }; + const generateDevelopTokenOption = { + key: "generate-token", + icon: EnableReactSvgUrl, + label: "Generate developer token", + onClick: onGenerateDevelopToken, + }; + const contextOptions = [ + { ...generateDevelopTokenOption }, { key: "Separator dropdownItem", isSeparator: true, From 7247363b02adc76762e5a208d63ee61c95b2283b Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 14 Aug 2024 11:17:01 +0300 Subject: [PATCH 32/59] Shared: Navigation: Disabled tariff bar inside sdk frame --- .../shared/components/navigation/sub-components/ControlBtn.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/shared/components/navigation/sub-components/ControlBtn.tsx b/packages/shared/components/navigation/sub-components/ControlBtn.tsx index ed362e6498..00f697c032 100644 --- a/packages/shared/components/navigation/sub-components/ControlBtn.tsx +++ b/packages/shared/components/navigation/sub-components/ControlBtn.tsx @@ -79,7 +79,8 @@ const ControlButtons = ({ onClick={onNavigationButtonClick} /> ) : null; - const children = tariffBar ? React.cloneElement(tariffBar, { title }) : null; + const children = + tariffBar && !isFrame ? React.cloneElement(tariffBar, { title }) : null; const isTabletView = isTablet(); const contextOptionsFolder = getContextOptionsFolder(); From 01a8d48354673a771853b0669febf7b9139fe097 Mon Sep 17 00:00:00 2001 From: Akmal Isomadinov Date: Wed, 14 Aug 2024 16:07:10 +0500 Subject: [PATCH 33/59] Shared:MediaViewer Disabled context menu in viewer --- .../media-viewer/sub-components/ImageViewer/index.tsx | 1 + .../media-viewer/sub-components/PlayerBigPlayButton/index.tsx | 4 +++- .../media-viewer/sub-components/ViewerPlayer/index.tsx | 1 + 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx b/packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx index 1bbd458427..9f33ad2172 100644 --- a/packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx +++ b/packages/shared/components/media-viewer/sub-components/ImageViewer/index.tsx @@ -996,6 +996,7 @@ export const ImageViewer = ({ onDoubleClick={handleDoubleTapOrClick} onLoad={imageLoaded} onError={onError} + onContextMenu={(event) => event.preventDefault()} /> diff --git a/packages/shared/components/media-viewer/sub-components/PlayerBigPlayButton/index.tsx b/packages/shared/components/media-viewer/sub-components/PlayerBigPlayButton/index.tsx index 67c79059f9..8876178cc4 100644 --- a/packages/shared/components/media-viewer/sub-components/PlayerBigPlayButton/index.tsx +++ b/packages/shared/components/media-viewer/sub-components/PlayerBigPlayButton/index.tsx @@ -36,7 +36,9 @@ export const PlayerBigPlayButton = ({ if (!visible) return; return ( - + event.preventDefault()} + > ); diff --git a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx index e908d44628..3be4de5d14 100644 --- a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx +++ b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx @@ -653,6 +653,7 @@ export const ViewerPlayer = ({ onDurationChange={handleDurationChange} onLoadedMetadata={handleLoadedMetaDataVideo} onPlay={() => setIsPlaying(true)} + onContextMenu={(event) => event.preventDefault()} /> Date: Wed, 14 Aug 2024 17:47:20 +0500 Subject: [PATCH 34/59] Shared:MediaViewer Fixed: player rewind functionality --- .../media-viewer/sub-components/ViewerPlayer/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx index 3be4de5d14..2845b7db6d 100644 --- a/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx +++ b/packages/shared/components/media-viewer/sub-components/ViewerPlayer/index.tsx @@ -406,6 +406,10 @@ export const ViewerPlayer = ({ const percent = Number(event.target.value); const newCurrentTime = (percent / 100) * videoRef.current.duration; + const videoCurrentTime = videoRef.current.currentTime; + + if (Math.abs(newCurrentTime - videoCurrentTime) <= 0.1) return; + handleProgress(); setTimeline(percent); setCurrentTime(newCurrentTime); From 645adf6050cfb110c4361cdfb52d210758f8e312 Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Wed, 14 Aug 2024 17:40:33 +0300 Subject: [PATCH 35/59] Shared: ErrorContainer: Fixed vertical scroll on clouds animation --- .../shared/components/error-container/ErrorContainer.styled.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shared/components/error-container/ErrorContainer.styled.ts b/packages/shared/components/error-container/ErrorContainer.styled.ts index b0b3556f97..8a987d39a2 100644 --- a/packages/shared/components/error-container/ErrorContainer.styled.ts +++ b/packages/shared/components/error-container/ErrorContainer.styled.ts @@ -40,7 +40,7 @@ const StyledErrorContainer = styled.div<{ isEditor: boolean }>` css` position: absolute; `} - overflow-x: hidden; + overflow: hidden; display: flex; flex-direction: column; align-items: center; From 1b250eaac01c3536b4ff3e7ac4d4e5c9468e6d44 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Wed, 14 Aug 2024 20:15:45 +0400 Subject: [PATCH 36/59] Bug 69700 - [LDAP] Checking for incorrect LDAP server settings ends with a "successful" save --- packages/client/src/store/LdapFormStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/store/LdapFormStore.js b/packages/client/src/store/LdapFormStore.js index ba929c76e1..17a374eb53 100644 --- a/packages/client/src/store/LdapFormStore.js +++ b/packages/client/src/store/LdapFormStore.js @@ -489,7 +489,7 @@ class LdapFormStore { completed: true, percents: 100, certificateConfirmRequest: null, - error: "", + error: t("Common:UnexpectedError"), }; } From bc3728aabfec0e00668d49c61d18f7cbc200493f Mon Sep 17 00:00:00 2001 From: Ilya Oleshko Date: Thu, 15 Aug 2024 12:46:55 +0300 Subject: [PATCH 37/59] Client: Store: ProfileActionsStore: Fixed isTeamTrainingAlertAvailable usage --- packages/client/src/store/ProfileActionsStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/store/ProfileActionsStore.js b/packages/client/src/store/ProfileActionsStore.js index ef6ed373b4..6c620bed1d 100644 --- a/packages/client/src/store/ProfileActionsStore.js +++ b/packages/client/src/store/ProfileActionsStore.js @@ -347,7 +347,7 @@ class ProfileActionsStore { let bookTraining = null; - if (!isMobile && this.isTeamTrainingAlertAvailable) { + if (!isMobile && this.authStore.isTeamTrainingAlertAvailable) { bookTraining = { key: "user-menu-book-training", icon: BookTrainingReactSvgUrl, From 6678fbd711f8cb125380809651592378246ea10a Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 15 Aug 2024 12:56:28 +0300 Subject: [PATCH 38/59] Fixed Bug 69669:Settings:Branding. A custom logo will be stretched when inviting a user to the portal. --- .../src/pages/Confirm/sub-components/StyledCreateUser.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js index a8d6aa98bf..461ebb1614 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js @@ -65,15 +65,13 @@ export const GreetingContainer = styled.div` .portal-logo { width: 100%; + max-width: 386px; + height: 44px; + margin: 0 auto; padding-bottom: 16px; - height: 26.56px; display: flex; align-items: center; justify-content: center; - - .injected-svg { - height: 26.56px; - } } `; From b45c92b209f3a999e5b990fbc5ac98acba2b6dd0 Mon Sep 17 00:00:00 2001 From: Vlada Gazizova <94864088+gazizova-vlada@users.noreply.github.com> Date: Thu, 15 Aug 2024 13:32:28 +0300 Subject: [PATCH 39/59] Fixed Bug 69668:Settings:Branding. Part of the custom logo is hidden behind a QR code when activating 2FA for the first time --- .../src/pages/Confirm/sub-components/tfaActivation.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/client/src/pages/Confirm/sub-components/tfaActivation.js b/packages/client/src/pages/Confirm/sub-components/tfaActivation.js index 46ebbd7aee..6ae97dc143 100644 --- a/packages/client/src/pages/Confirm/sub-components/tfaActivation.js +++ b/packages/client/src/pages/Confirm/sub-components/tfaActivation.js @@ -97,6 +97,12 @@ const StyledForm = styled(Box)` .set-app-description { width: 100%; max-width: 500px; + + .portal-logo { + margin: 0 auto; + max-width: 386px; + height: 44px; + } } .set-app-title { From 86f116e62fad3bca1fa14895144b8fb99130f582 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 15 Aug 2024 14:44:33 +0300 Subject: [PATCH 40/59] Fix Bug 69670 No name centering --- .../src/pages/Confirm/sub-components/StyledCreateUser.js | 5 ++++- .../client/src/pages/Confirm/sub-components/createUser.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js index 461ebb1614..8ff8d3adf4 100644 --- a/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js +++ b/packages/client/src/pages/Confirm/sub-components/StyledCreateUser.js @@ -54,7 +54,10 @@ export const GreetingContainer = styled.div` } .tooltip { - p { + .invitation-text { + display: flex; + flex-direction: column; + align-items: center; text-align: center; } diff --git a/packages/client/src/pages/Confirm/sub-components/createUser.js b/packages/client/src/pages/Confirm/sub-components/createUser.js index 99eb5e95f6..fcd1292fea 100644 --- a/packages/client/src/pages/Confirm/sub-components/createUser.js +++ b/packages/client/src/pages/Confirm/sub-components/createUser.js @@ -485,7 +485,7 @@ const CreateUserForm = (props) => { {linkData.type === "LinkInvite" && (
- + {roomName ? ( Date: Thu, 15 Aug 2024 14:54:54 +0300 Subject: [PATCH 41/59] Shared: Utils: Fixed force redirect inside frame on 401 response --- packages/shared/utils/axiosClient.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/shared/utils/axiosClient.ts b/packages/shared/utils/axiosClient.ts index c035f9e298..cec4503331 100644 --- a/packages/shared/utils/axiosClient.ts +++ b/packages/shared/utils/axiosClient.ts @@ -220,10 +220,12 @@ class AxiosClient { } const loginURL = combineUrl(proxyURL, "/login"); + if (!this.isSSR) { switch (error.response?.status) { case 401: { - if (options.skipUnauthorized) return Promise.resolve(); + if (options.skipUnauthorized || window?.ClientConfig?.isFrame) + return Promise.resolve(); if (options.skipLogout) return Promise.reject(error); const opt: AxiosRequestConfig = { @@ -244,14 +246,13 @@ class AxiosClient { break; case 403: { const pathname = window.location.pathname; - const isFrame = window?.ClientConfig?.isFrame; const isArchived = pathname.indexOf("/rooms/archived") !== -1; const isRooms = pathname.indexOf("/rooms/shared") !== -1 || isArchived; - if (isRooms && !skipRedirect && !isFrame) { + if (isRooms && !skipRedirect && !window?.ClientConfig?.isFrame) { setTimeout(() => { window.DocSpace.navigate(isArchived ? "/archived" : "/"); }, 1000); From 70b0942dfb82517e50d133a786b16187322dc119 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Thu, 15 Aug 2024 16:13:18 +0400 Subject: [PATCH 42/59] Bug 69519 - Accounts. Sorting by Last name field does not work --- .../client/src/pages/Home/Section/Filter/index.js | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/client/src/pages/Home/Section/Filter/index.js b/packages/client/src/pages/Home/Section/Filter/index.js index ca0e12ffb4..035cf37d16 100644 --- a/packages/client/src/pages/Home/Section/Filter/index.js +++ b/packages/client/src/pages/Home/Section/Filter/index.js @@ -1963,14 +1963,7 @@ const SectionFilterContent = ({ const firstName = { id: "sort-by_first-name", key: "firstname", - label: t("Common:FirstName"), - default: true, - }; - - const lastName = { - id: "sort-by_last-name", - key: "lastname", - label: t("Common:LastName"), + label: t("Common:Name"), default: true, }; @@ -2012,7 +2005,7 @@ const SectionFilterContent = ({ hideableColumns.Storage = storage; } - options.push(firstName, lastName, type, department, email); + options.push(firstName, type, department, email); if (showStorageInfo) options.push(storage); return options; From 706380fcbf382abe37aada9372a95adeb7244f01 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Thu, 15 Aug 2024 16:55:39 +0400 Subject: [PATCH 43/59] Fix Bug 69519 - Accounts. Sorting by Last name field does not work --- .../InsideGroup/TableView/TableHeader.js | 16 +++------------- .../AccountsBody/People/TableView/TableHeader.js | 9 +++------ .../src/pages/Home/Section/Filter/index.js | 4 ++-- packages/shared/api/people/filter.js | 2 +- 4 files changed, 9 insertions(+), 22 deletions(-) diff --git a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableHeader.js b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableHeader.js index 94df06e920..5783767e86 100644 --- a/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableHeader.js +++ b/packages/client/src/pages/Home/Section/AccountsBody/InsideGroup/TableView/TableHeader.js @@ -138,15 +138,8 @@ class InsideGroupTableHeader extends React.Component { newFilter.sortBy = sortBy; if (sortBy === "AZ") { - if ( - newFilter.sortBy !== "lastname" && - newFilter.sortBy !== "firstname" - ) { - newFilter.sortBy = "firstname"; - } else if (newFilter.sortBy === "lastname") { - newFilter.sortBy = "firstname"; - } else { - newFilter.sortBy = "lastname"; + if (newFilter.sortBy !== "displayname") { + newFilter.sortBy = "displayname"; } newFilter.sortOrder = newFilter.sortOrder === "ascending" ? "descending" : "ascending"; @@ -176,10 +169,7 @@ class InsideGroupTableHeader extends React.Component { } = this.props; const { sortOrder } = filter; - const sortBy = - filter.sortBy === "firstname" || filter.sortBy === "lastname" - ? "AZ" - : filter.sortBy; + const sortBy = filter.sortBy === "displayname" ? "AZ" : filter.sortBy; return ( Date: Thu, 15 Aug 2024 16:07:20 +0300 Subject: [PATCH 44/59] JS-SDK: Added onContentReady event --- public/scripts/sdk/1.0.1/api.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/public/scripts/sdk/1.0.1/api.js b/public/scripts/sdk/1.0.1/api.js index cb263c3245..a5247f8a0f 100644 --- a/public/scripts/sdk/1.0.1/api.js +++ b/public/scripts/sdk/1.0.1/api.js @@ -98,6 +98,7 @@ onSignOut: null, onDownload: null, onNoAccess: null, + onContentReady: null, }, }; @@ -814,7 +815,10 @@ targetFrame.style.height = this.config.height; targetFrame.parentNode.style.height = "inherit"; - if (loader) loader.remove(); + if (loader) { + loader.remove(); + this.config.events.onContentReady(); + } } } From ada7d8c960e4c11a6b6848dc0c2f11d84ce33e18 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 15 Aug 2024 16:18:59 +0300 Subject: [PATCH 45/59] Shared:Utils:Axios: add generic for API types --- packages/shared/api/client.ts | 6 +++--- packages/shared/utils/axiosClient.ts | 8 +++++--- packages/shared/utils/oauth/types.ts | 7 +++++++ 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/shared/api/client.ts b/packages/shared/api/client.ts index a0745847fb..59fc2d29a4 100644 --- a/packages/shared/api/client.ts +++ b/packages/shared/api/client.ts @@ -33,12 +33,12 @@ export const initSSR = (headers: Record) => { client.initSSR(headers); }; -export const request = ( +export const request = ( options: TReqOption & AxiosRequestConfig, skipRedirect = false, isOAuth = false, -) => { - return client.request(options, skipRedirect, isOAuth); +): Promise | undefined => { + return client.request(options, skipRedirect, isOAuth); }; export const setWithCredentialsStatus = (state: boolean) => { diff --git a/packages/shared/utils/axiosClient.ts b/packages/shared/utils/axiosClient.ts index c64fa9295b..81ba95615b 100644 --- a/packages/shared/utils/axiosClient.ts +++ b/packages/shared/utils/axiosClient.ts @@ -182,11 +182,11 @@ class AxiosClient { } }; - request = ( + request = ( options: TReqOption & AxiosRequestConfig, skipRedirect = false, isOAuth = false, - ) => { + ): Promise | undefined => { const onSuccess = (response: TRes) => { const error = this.getResponseError(response); @@ -295,7 +295,9 @@ class AxiosClient { return Promise.reject(error); }; - return this.client?.(options).then(onSuccess).catch(onError); + return this.client?.(options).then(onSuccess).catch(onError) as + | Promise + | undefined; }; } diff --git a/packages/shared/utils/oauth/types.ts b/packages/shared/utils/oauth/types.ts index 5c332d8840..d269b28910 100644 --- a/packages/shared/utils/oauth/types.ts +++ b/packages/shared/utils/oauth/types.ts @@ -150,3 +150,10 @@ export type IClientListProps = List; export type IClientListDTO = List; export type TConsentList = List; + +export type TGenerateDeveloperToken = { + access_token: string; + expires_in: number; + scope: string; + token_type: string; +}; From b3dd68106506e9fdf9b74e817fe8627cf6972f60 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 15 Aug 2024 16:19:27 +0300 Subject: [PATCH 46/59] Shared:API:OAuth2: add revoke and generate developer token methods --- packages/shared/api/oauth/index.ts | 36 ++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/shared/api/oauth/index.ts b/packages/shared/api/oauth/index.ts index 784cfc54c1..5c3e6f79b2 100644 --- a/packages/shared/api/oauth/index.ts +++ b/packages/shared/api/oauth/index.ts @@ -11,6 +11,7 @@ import { IClientReqDTO, TConsentData, TConsentList, + TGenerateDeveloperToken, } from "../../utils/oauth/types"; export const getClient = async (clientId: string): Promise => { @@ -237,3 +238,38 @@ export const onOAuthCancel = (clientId: string, clientState: string) => { true, ); }; + +export const generateDevelopToken = ( + client_id: string, + client_secret: string, + scopes: string[], +): Promise | undefined => { + const params = new URLSearchParams(); + params.append("grant_type", "personal_access_token"); + params.append("client_id", client_id); + params.append("client_secret", client_secret); + params.append("scope", scopes.join(" ")); + + return request( + { method: "post", url: "/oauth2/token", data: params }, + false, + true, + ); +}; + +export const revokeDeveloperToken = ( + token: string, + client_id: string, + client_secret: string, +) => { + const params = new URLSearchParams(); + params.append("token", token); + params.append("client_id", client_id); + params.append("client_secret", client_secret); + + return request( + { method: "post", url: "/oauth2/revoke", data: params }, + false, + true, + ); +}; From b89bea71238673f1d4928a890b8c1a31320a1a7c Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 15 Aug 2024 16:20:03 +0300 Subject: [PATCH 47/59] Client:PortalSettings:OAuth: add generate and revoke developer token dialogs --- .../developer-tools/OAuth/OAuth.types.ts | 3 + .../developer-tools/OAuth/index.tsx | 10 + .../GenerateDevelopTokenDialog.tsx | 26 --- .../GenerateDeveloperTokenDialog.tsx | 210 ++++++++++++++++++ .../RevokeDeveloperTokenDialog.tsx | 141 ++++++++++++ packages/client/src/store/OAuthStore.ts | 44 +++- 6 files changed, 404 insertions(+), 30 deletions(-) delete mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDeveloperTokenDialog.tsx create mode 100644 packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/RevokeDeveloperTokenDialog.tsx diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts index f2aac319aa..3e8e2e2e3b 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/OAuth.types.ts @@ -18,6 +18,9 @@ export interface OAuthProps { previewDialogVisible?: boolean; disableDialogVisible?: boolean; deleteDialogVisible?: boolean; + generateDeveloperTokenDialogVisible?: boolean; + revokeDeveloperTokenDialogVisible?: boolean; + isInit: boolean; setIsInit: (value: boolean) => void; } diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx index 52f8f78692..a754a8b734 100644 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/index.tsx @@ -18,6 +18,8 @@ import DisableDialog from "./sub-components/DisableDialog"; import DeleteDialog from "./sub-components/DeleteDialog"; import OAuthEmptyScreen from "./sub-components/EmptyScreen"; import List from "./sub-components/List"; +import GenerateDeveloperTokenDialog from "./sub-components/GenerateDeveloperTokenDialog"; +import RevokeDeveloperTokenDialog from "./sub-components/RevokeDeveloperTokenDialog"; const MIN_LOADER_TIME = 500; @@ -35,6 +37,8 @@ const OAuth = ({ setIsInit, disableDialogVisible, deleteDialogVisible, + generateDeveloperTokenDialogVisible, + revokeDeveloperTokenDialogVisible, }: OAuthProps) => { const { t } = useTranslation(["OAuth"]); @@ -102,6 +106,8 @@ const OAuth = ({ {disableDialogVisible && } {previewDialogVisible && } {deleteDialogVisible && } + {generateDeveloperTokenDialogVisible && } + {revokeDeveloperTokenDialogVisible && } ); }; @@ -128,6 +134,8 @@ export default inject( setIsInit, disableDialogVisible, deleteDialogVisible, + generateDeveloperTokenDialogVisible, + revokeDeveloperTokenDialogVisible, } = oauthStore; return { viewAs, @@ -143,6 +151,8 @@ export default inject( setIsInit, disableDialogVisible, deleteDialogVisible, + generateDeveloperTokenDialogVisible, + revokeDeveloperTokenDialogVisible, }; }, )(observer(OAuth)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx deleted file mode 100644 index 5492b9e903..0000000000 --- a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDevelopTokenDialog.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { inject, observer } from "mobx-react"; -import styled from "styled-components"; -import { useTranslation } from "react-i18next"; - -import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore"; - -const GenerateDeveloperTokenDialog = () => { - return
; -}; - -export default inject(({ oauthStore }: { oauthStore: OAuthStoreProps }) => { - const { - setInfoDialogVisible, - bufferSelection, - scopeList, - getContextMenuItems, - } = oauthStore; - - return { - setInfoDialogVisible, - client: bufferSelection, - scopeList, - getContextMenuItems, - }; -})(observer(GenerateDeveloperTokenDialog)); diff --git a/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDeveloperTokenDialog.tsx b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDeveloperTokenDialog.tsx new file mode 100644 index 0000000000..470973e9be --- /dev/null +++ b/packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/GenerateDeveloperTokenDialog.tsx @@ -0,0 +1,210 @@ +import React from "react"; +import { inject, observer } from "mobx-react"; +import styled, { useTheme } from "styled-components"; +import { i18n } from "i18next"; +import { useTranslation } from "react-i18next"; +import copy from "copy-to-clipboard"; +import moment from "moment-timezone"; + +import api from "@docspace/shared/api"; +import { IClientProps } from "@docspace/shared/utils/oauth/types"; +import { + ModalDialog, + ModalDialogType, +} from "@docspace/shared/components/modal-dialog"; +import { Button, ButtonSize } from "@docspace/shared/components/button"; +import { Text } from "@docspace/shared/components/text"; +import { toastr } from "@docspace/shared/components/toast"; +import { TData } from "@docspace/shared/components/toast/Toast.type"; +import { InputBlock } from "@docspace/shared/components/input-block"; +import { InputSize, InputType } from "@docspace/shared/components/text-input"; + +import CopyReactSvgUrl from "PUBLIC_DIR/images/copy.react.svg?url"; + +import { OAuthStoreProps } from "SRC_DIR/store/OAuthStore"; +import { UserStore } from "@docspace/shared/store/UserStore"; +import { globalColors } from "@docspace/shared/themes"; + +const StyledContainer = styled.div` + p { + margin-bottom: 16px; + } + + .dates { + margin-top: 16px; + margin-bottom: 0; + } +`; + +type GenerateDeveloperTokenDialogProps = { + client?: IClientProps; + + email?: string; + + setGenerateDeveloperTokenDialogVisible?: (value: boolean) => void; +}; + +const getDate = (date: Date, i18nArg: i18n) => { + return moment(date) + .locale(i18nArg.language) + .tz(window.timezone) + .format("MMM D, YYYY, h:mm:ss A"); +}; + +const GenerateDeveloperTokenDialog = ({ + client, + email, + + setGenerateDeveloperTokenDialogVisible, +}: GenerateDeveloperTokenDialogProps) => { + const { i18n: i18nParam } = useTranslation(["OAuth", "Common"]); + + const theme = useTheme(); + const [token, setToken] = React.useState(""); + const [dates, setDates] = React.useState({ + created: getDate(new Date(), i18nParam), + expires: getDate(new Date(), i18nParam), + }); + const [requestRunning, setRequestRunning] = React.useState(false); + + const onGenerate = async () => { + if (token || !client || requestRunning) return; + + try { + const { clientId, clientSecret, scopes } = client; + + setRequestRunning(true); + + const data = await api.oauth.generateDevelopToken( + clientId, + clientSecret, + scopes, + ); + + setRequestRunning(false); + + if (!data) return; + + const { access_token: accessToken, expires_in: expiresIn } = data; + + const created = new Date(); + // convert sec to ms + const expires = new Date(created.getTime() + expiresIn * 1000); + + if (accessToken) { + setToken(accessToken); + setDates({ + created: getDate(created, i18nParam), + expires: getDate(expires, i18nParam), + }); + toastr.success("Copied"); + } + } catch (e) { + toastr.error(e as TData); + } + }; + + const onCopyClick = async () => { + copy(token); + toastr.success("Copied"); + }; + + const onClose = () => { + if (requestRunning) return; + + setGenerateDeveloperTokenDialogVisible?.(false); + }; + return ( + + Generate developer token + + + + By generating an developer access token, you will be able to make + API calls for your own account without going through the + authorization flow. To obtain access tokens for other users, use the + standard OAuth flow. + + + For scoped apps, the token will have the same scope as the app. + + {token ? ( + <> + + This access token can be used to access your account ({email}) + via the API. Don`t share your access token with anyone. + + + + Created: {dates.created} +
+ Expires: {dates.expires}{" "} + + + ) : null} + + + +