From 406e1646f54e21cdb4ab888dd283bec1dd6366af Mon Sep 17 00:00:00 2001 From: Vladimir Khvan Date: Mon, 22 Apr 2024 17:11:31 +0500 Subject: [PATCH 01/63] fix Bug 67405 - removed existing users from type select step --- .../AccountsTable/RowView/index.js | 10 ++++----- .../AccountsTable/TableView/index.js | 12 +++++----- .../AccountsTable/index.js | 3 +++ .../Stepper/SelectUsersTypeStep/index.js | 22 ++++++++++++++----- .../AccountsTable/RowView/index.js | 10 ++++----- .../AccountsTable/TableView/index.js | 12 +++++----- .../AccountsTable/index.js | 3 +++ .../Stepper/SelectUsersTypeStep/index.js | 22 ++++++++++++++----- .../Stepper/SelectUsersTypeStep/index.js | 21 +++++++++++++----- 9 files changed, 71 insertions(+), 44 deletions(-) diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js index 4cbfe6af42..735175c99d 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js @@ -128,19 +128,19 @@ const RowView = ({ sectionWidth, accountsData, typeOptions, - users, checkedUsers, toggleAccount, toggleAllAccounts, isAccountChecked, setSearchValue, + filteredUsers, }) => { const isIndeterminate = checkedUsers.result.length > 0 && - checkedUsers.result.length !== users.result.length; + checkedUsers.result.length !== filteredUsers.length; const toggleAll = (isChecked) => - toggleAllAccounts(isChecked, users.result, checkedAccountType); + toggleAllAccounts(isChecked, filteredUsers, checkedAccountType); const onClearFilter = () => setSearchValue(""); @@ -167,7 +167,7 @@ const RowView = ({ withoutInfoPanelToggler withComboBox={false} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} onChange={toggleAll} /> @@ -222,7 +222,6 @@ const RowView = ({ export default inject(({ importAccountsStore }) => { const { - users, checkedUsers, toggleAccount, toggleAllAccounts, @@ -231,7 +230,6 @@ export default inject(({ importAccountsStore }) => { } = importAccountsStore; return { - users, checkedUsers, toggleAccount, toggleAllAccounts, diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js index 9d48321645..ea0d15bf50 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js @@ -154,12 +154,12 @@ const TableView = ({ sectionWidth, accountsData, typeOptions, - users, checkedUsers, toggleAccount, toggleAllAccounts, isAccountChecked, setSearchValue, + filteredUsers, }) => { const tableRef = useRef(null); const [hideColumns, setHideColumns] = useState(false); @@ -168,10 +168,10 @@ const TableView = ({ const isIndeterminate = checkedUsers.result.length > 0 && - checkedUsers.result.length !== users.result.length; + checkedUsers.result.length !== filteredUsers.length; const toggleAll = (isChecked) => - toggleAllAccounts(isChecked, users.result, checkedAccountType); + toggleAllAccounts(isChecked, filteredUsers, checkedAccountType); const onClearFilter = () => { setSearchValue(""); @@ -201,7 +201,7 @@ const TableView = ({ withoutInfoPanelToggler withComboBox={false} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} onChange={toggleAll} /> @@ -216,7 +216,7 @@ const TableView = ({ columnStorageName={columnStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} toggleAll={toggleAll} setHideColumns={setHideColumns} /> @@ -280,7 +280,6 @@ const TableView = ({ export default inject(({ userStore, importAccountsStore }) => { const { id: userId } = userStore.user; const { - users, checkedUsers, toggleAccount, toggleAllAccounts, @@ -290,7 +289,6 @@ export default inject(({ userStore, importAccountsStore }) => { return { userId, - users, checkedUsers, toggleAccount, toggleAllAccounts, diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js index 86771f3908..da7865206e 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js @@ -40,6 +40,7 @@ const AccountsTable = ({ changeGroupType, UserTypes, toggleAllAccounts, + filteredUsers, }) => { const typeOptions = [ { @@ -77,6 +78,7 @@ const AccountsTable = ({ sectionWidth={context.sectionWidth} accountsData={accountsData} typeOptions={typeOptions} + filteredUsers={filteredUsers} /> ) : ( ) } diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js index 2aa0f2383f..9607486980 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/GoogleWorkspace/Stepper/SelectUsersTypeStep/index.js @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { inject, observer } from "mobx-react"; import styled from "styled-components"; @@ -48,14 +48,23 @@ const SelectUsersTypeStep = ({ searchValue, setSearchValue, }) => { + const filteredUsers = useMemo( + () => + users.result.filter( + (user) => + !users.existing.find((existingUser) => existingUser.key === user.key), + ), + [users], + ); + const [boundaries, setBoundaries] = useState([0, 25]); const [dataPortion, setDataPortion] = useState( - users.result.slice(...boundaries), + filteredUsers.slice(...boundaries), ); const handleDataChange = (leftBoundary, rightBoundary) => { setBoundaries([leftBoundary, rightBoundary]); - setDataPortion(users.result.slice(leftBoundary, rightBoundary)); + setDataPortion(filteredUsers.slice(leftBoundary, rightBoundary)); }; const onChangeInput = (value) => { @@ -74,7 +83,7 @@ const SelectUsersTypeStep = ({ ); useEffect(() => { - setDataPortion(users.result.slice(...boundaries)); + setDataPortion(filteredUsers.slice(...boundaries)); }, [users]); return ( @@ -102,11 +111,12 @@ const SelectUsersTypeStep = ({ - {users.result.length > 25 && filteredAccounts.length > 0 && ( + {filteredUsers.length > 25 && filteredAccounts.length > 0 && ( )} diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js index 59b6c8926f..5821fbc1c7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/RowView/index.js @@ -129,7 +129,7 @@ const RowView = (props) => { sectionWidth, accountsData, typeOptions, - users, + filteredUsers, checkedUsers, toggleAccount, toggleAllAccounts, @@ -139,10 +139,10 @@ const RowView = (props) => { const isIndeterminate = checkedUsers.result.length > 0 && - checkedUsers.result.length !== users.result.length; + checkedUsers.result.length !== filteredUsers.length; const toggleAll = (isChecked) => - toggleAllAccounts(isChecked, users.result, checkedAccountType); + toggleAllAccounts(isChecked, filteredUsers, checkedAccountType); const onClearFilter = () => setSearchValue(""); @@ -169,7 +169,7 @@ const RowView = (props) => { withoutInfoPanelToggler withComboBox={false} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} onChange={toggleAll} /> @@ -224,7 +224,6 @@ const RowView = (props) => { export default inject(({ importAccountsStore }) => { const { - users, checkedUsers, toggleAccount, toggleAllAccounts, @@ -233,7 +232,6 @@ export default inject(({ importAccountsStore }) => { } = importAccountsStore; return { - users, checkedUsers, toggleAccount, toggleAllAccounts, diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js index e09ddffc39..8e1c934ad7 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/TableView/index.js @@ -97,12 +97,12 @@ const TableView = (props) => { sectionWidth, accountsData, typeOptions, - users, checkedUsers, toggleAccount, toggleAllAccounts, isAccountChecked, setSearchValue, + filteredUsers, } = props; const tableRef = useRef(null); const [hideColumns, setHideColumns] = useState(false); @@ -111,10 +111,10 @@ const TableView = (props) => { const isIndeterminate = checkedUsers.result.length > 0 && - checkedUsers.result.length !== users.result.length; + checkedUsers.result.length !== filteredUsers.length; const toggleAll = (isChecked) => - toggleAllAccounts(isChecked, users.result, checkedAccountType); + toggleAllAccounts(isChecked, filteredUsers, checkedAccountType); const onClearFilter = () => { setSearchValue(""); @@ -144,7 +144,7 @@ const TableView = (props) => { withoutInfoPanelToggler withComboBox={false} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} onChange={toggleAll} /> @@ -158,7 +158,7 @@ const TableView = (props) => { columnStorageName={columnStorageName} columnInfoPanelStorageName={columnInfoPanelStorageName} isIndeterminate={isIndeterminate} - isChecked={checkedUsers.result.length === users.result.length} + isChecked={checkedUsers.result.length === filteredUsers.length} toggleAll={toggleAll} setHideColumns={setHideColumns} /> @@ -222,7 +222,6 @@ const TableView = (props) => { export default inject(({ userStore, importAccountsStore }) => { const { id: userId } = userStore.user; const { - users, checkedUsers, toggleAccount, toggleAllAccounts, @@ -232,7 +231,6 @@ export default inject(({ userStore, importAccountsStore }) => { return { userId, - users, checkedUsers, toggleAccount, toggleAllAccounts, diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js index 4fc1ac68a5..86b80883c0 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/AccountsTable/index.js @@ -41,6 +41,7 @@ const AccountsTable = (props) => { changeGroupType, UserTypes, toggleAllAccounts, + filteredUsers, } = props; const setTypeDocspaceAdmin = () => { @@ -83,6 +84,7 @@ const AccountsTable = (props) => { sectionWidth={context.sectionWidth} accountsData={accountsData} typeOptions={typeOptions} + filteredUsers={filteredUsers} /> ) : ( { sectionWidth={context.sectionWidth} accountsData={accountsData} typeOptions={typeOptions} + filteredUsers={filteredUsers} /> ) } diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/index.js index c76db75e33..a774ed3798 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/NextCloudWorkspace/Stepper/SelectUsersTypeStep/index.js @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { inject, observer } from "mobx-react"; import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons"; @@ -45,14 +45,23 @@ const SelectUsersTypeStep = (props) => { setSearchValue, } = props; + const filteredUsers = useMemo( + () => + users.result.filter( + (user) => + !users.existing.find((existingUser) => existingUser.key === user.key), + ), + [users], + ); + const [boundaries, setBoundaries] = useState([0, 25]); const [dataPortion, setDataPortion] = useState( - users.result.slice(...boundaries), + filteredUsers.slice(...boundaries), ); const handleDataChange = (leftBoundary, rightBoundary) => { setBoundaries([leftBoundary, rightBoundary]); - setDataPortion(users.result.slice(leftBoundary, rightBoundary)); + setDataPortion(filteredUsers.slice(leftBoundary, rightBoundary)); }; const onChangeInput = (value) => { @@ -71,7 +80,7 @@ const SelectUsersTypeStep = (props) => { ); useEffect(() => { - setDataPortion(users.result.slice(...boundaries)); + setDataPortion(filteredUsers.slice(...boundaries)); }, [users]); return ( @@ -100,11 +109,12 @@ const SelectUsersTypeStep = (props) => { - {users.result.length > 25 && filteredAccounts.length > 0 && ( + {filteredUsers.length > 25 && filteredAccounts.length > 0 && ( )} diff --git a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/index.js b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/index.js index 0575dca0ba..fc32e7cca9 100644 --- a/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/index.js +++ b/packages/client/src/pages/PortalSettings/categories/data-import/OnlyofficeWorkspace/Stepper/SelectUsersTypeStep/index.js @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import { inject, observer } from "mobx-react"; import { SaveCancelButtons } from "@docspace/shared/components/save-cancel-buttons"; @@ -42,14 +42,23 @@ const SelectUsersTypeStep = ({ searchValue, setSearchValue, }) => { + const filteredUsers = useMemo( + () => + users.result.filter( + (user) => + !users.existing.find((existingUser) => existingUser.key === user.key), + ), + [users], + ); + const [boundaries, setBoundaries] = useState([0, 25]); const [dataPortion, setDataPortion] = useState( - users.result.slice(...boundaries), + filteredUsers.slice(...boundaries), ); const handleDataChange = (leftBoundary, rightBoundary) => { setBoundaries([leftBoundary, rightBoundary]); - setDataPortion(users.result.slice(leftBoundary, rightBoundary)); + setDataPortion(filteredUsers.slice(leftBoundary, rightBoundary)); }; const onChangeInput = (value) => { @@ -68,7 +77,7 @@ const SelectUsersTypeStep = ({ ); useEffect(() => { - setDataPortion(users.result.slice(...boundaries)); + setDataPortion(filteredUsers.slice(...boundaries)); }, [users]); return ( @@ -96,10 +105,10 @@ const SelectUsersTypeStep = ({ - {users.result.length > 25 && filteredAccounts.length > 0 && ( + {filteredUsers.length > 25 && filteredAccounts.length > 0 && ( )} From 38f01edc28bdfac73530a780f996a52b74c01722 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 2 May 2024 14:02:40 +0300 Subject: [PATCH 02/63] Shared: CampaignsBanner: add icon --- .../CampaignsBanner.styled.ts | 22 +++++++++++++++++-- .../campaigns-banner/CampaignsBanner.tsx | 3 +++ .../CampaignsBanner.types.tsx | 2 ++ 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts index 20c4c2a20e..824abe0713 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.styled.ts @@ -26,7 +26,7 @@ import styled, { css } from "styled-components"; import { Base } from "../../themes"; -import { desktop } from "../../utils/device"; +import { desktop, mobile } from "../../utils/device"; const BannerWrapper = styled.div<{ background?: string; @@ -108,4 +108,22 @@ const BannerButton = styled.button<{ color: ${(props) => props.buttonTextColor}; `; -export { BannerWrapper, BannerContent, BannerButton }; +const BannerIcon = styled.div<{ + icon: string; +}>` + width: 60px; + height: 60px; + position: absolute; + bottom: 0px; + right: 0px; + background-image: url(${(props) => props.icon}); + background-size: 100%; + background-repeat: no-repeat; + + @media ${mobile} { + width: 84px; + height: 84px; + } +`; + +export { BannerWrapper, BannerContent, BannerButton, BannerIcon }; diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx index 5005e9ecfb..3d6bff6429 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.tsx @@ -36,6 +36,7 @@ import { BannerWrapper, BannerContent, BannerButton, + BannerIcon, } from "./CampaignsBanner.styled"; import { CampaignsBannerProps } from "./CampaignsBanner.types"; @@ -44,6 +45,7 @@ import useFitText from "./useFitText"; const CampaignsBanner = (props: CampaignsBannerProps) => { const { campaignImage, + campaignIcon, campaignTranslate, campaignConfig, onAction, @@ -124,6 +126,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => { iconName={CrossReactSvg} onClick={onClose} /> + ); }; diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.types.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.types.tsx index d611b37957..73a1f65f33 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.types.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.types.tsx @@ -33,6 +33,8 @@ export interface CampaignsBannerProps { style?: React.CSSProperties; /** Background */ campaignImage: string; + /** Icon */ + campaignIcon: string; /** Translations */ campaignTranslate: ITranslate; /** Config */ From 0dee0eab35a8055fd9feac16198b55c1acaa0dc8 Mon Sep 17 00:00:00 2001 From: Viktor Fomin Date: Thu, 2 May 2024 14:09:30 +0300 Subject: [PATCH 03/63] Shared: CampaignsBanner: rename campaignImage -> campaignBackground --- .../components/campaigns-banner/CampaignsBanner.stories.tsx | 2 +- .../components/campaigns-banner/CampaignsBanner.test.tsx | 2 +- .../shared/components/campaigns-banner/CampaignsBanner.tsx | 6 +++--- .../components/campaigns-banner/CampaignsBanner.types.tsx | 2 +- packages/shared/components/campaigns-banner/useFitText.ts | 4 ++-- 5 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/shared/components/campaigns-banner/CampaignsBanner.stories.tsx b/packages/shared/components/campaigns-banner/CampaignsBanner.stories.tsx index 5849bf98c0..e23019b42c 100644 --- a/packages/shared/components/campaigns-banner/CampaignsBanner.stories.tsx +++ b/packages/shared/components/campaigns-banner/CampaignsBanner.stories.tsx @@ -55,7 +55,7 @@ const Template = (args: CampaignsBannerProps) => ( export const Default: Story = { render: (args) =>