Merge branch 'feature/virtual-rooms-1.2' into feature/oforms-gallery

This commit is contained in:
Nikita Gopienko 2022-04-04 18:25:32 +03:00
commit f04d679df4
36 changed files with 463 additions and 137 deletions

View File

@ -1,5 +1,7 @@
import styled from "styled-components";
import styled, { css } from "styled-components";
import RectangleLoader from "../RectangleLoader";
import { isMobile } from "react-device-detect";
import { tablet, mobile } from "@appserver/components/utils/device";
const StyledContainer = styled.div`
@ -16,8 +18,16 @@ const StyledContainer = styled.div`
padding: 0 16px;
}
${isMobile &&
css`
max-width: ${(props) => (props.showText ? "240px" : "52px")};
width: ${(props) => (props.showText ? "240px" : "52px")};
padding: ${(props) => (props.showText ? "0 16px" : "10px 16px")};
`}
@media ${mobile} {
width: 100%;
padding: 0 16px;
}
`;
@ -31,6 +41,13 @@ const StyledRectangleLoader = styled(RectangleLoader)`
width: 20px;
padding: 0 0 24px;
}
${isMobile &&
css`
height: 20px;
width: 20px;
padding: 0 0 24px;
`}
`;
export { StyledContainer, StyledRectangleLoader };

View File

@ -72,8 +72,8 @@ const commonStyles = css`
`;
const StyledSectionBody = styled.div`
max-width: 100vw !important;
${commonStyles}
${(props) =>
props.withScroll &&
`
@ -90,7 +90,6 @@ const StyledSectionBody = styled.div`
`
}
`}
.additional-scroll-height {
${(props) =>
!props.withScroll &&
@ -102,9 +101,8 @@ const StyledSectionBody = styled.div`
`;
const StyledDropZoneBody = styled(DragAndDrop)`
${commonStyles}
.drag-and-drop {
max-width: 100vw !important;
${commonStyles} .drag-and-drop {
user-select: none;
height: 100%;
}

View File

@ -38,23 +38,19 @@ const StyledSectionContainer = styled.section`
display: flex;
flex-direction: column;
width: calc(100vw - 256px);
max-width: calc(100vw - 256px);
width: 100%;
max-width: 100vw;
@media ${tablet} {
width: ${(props) =>
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"};
max-width: ${(props) =>
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"};
width: 100%;
max-width: 100vw !important;
padding: 0 0 0 16px;
}
${isMobile &&
css`
width: ${(props) =>
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"} !important;
max-width: ${(props) =>
props.showText ? "calc(100vw - 240px)" : "calc(100vw - 52px)"} !important;
width: 100% !important;
max-width: 100vw !important
padding: 0 0 0 16px;
${tabletProps};
min-width: 100px;
@ -83,14 +79,6 @@ const StyledSectionContainer = styled.section`
right: 15px;
bottom: 83px;
}
${(props) =>
!props.isSectionHeaderAvailable &&
css`
width: 100vw !important;
max-width: 100vw !important;
box-sizing: border-box;
`}
`;
StyledSectionContainer.defaultProps = { theme: Base };

View File

@ -52,6 +52,7 @@
"Culture_uk": "Ukrainian (Ukraine)",
"Culture_vi": "Vietnamese (Vietnam)",
"Culture_zh-CN": "Chinese (Simplified, PRC)",
"DarkMode": "Dark mode",
"Duplicate": "Create a copy",
"Delete": "Delete",
"Department": "Department",

View File

@ -52,6 +52,7 @@
"Culture_uk": "Украинский (Украина)",
"Culture_vi": "Вьетнамский (Вьетнам)",
"Culture_zh-CN": "Китайский (упрощенный, КНР)",
"DarkMode": "Тёмная тема",
"Duplicate": "Создать копию",
"Delete": "Удалить",
"Department": "Отдел",

View File

@ -8,10 +8,12 @@ import { Base } from "@appserver/components/themes";
const StyledIconBox = styled.div`
@media ${mobile} {
display: ${(props) => (props.isProduct ? "flex !important" : "none")};
display: flex;
}
display: ${(props) => (props.isProduct && isMobileOnly ? "flex" : "none")};
display: ${isMobileOnly ? "flex" : "none"};
align-items: center;
padding-left: 16px;
`;
const StyledMenuIcon = styled(MenuIcon)`
@ -31,12 +33,7 @@ const HeaderCatalogBurger = (props) => {
const { isProduct, onClick, ...rest } = props;
return (
<StyledIconBox
isProduct={isProduct}
onClick={onClick}
name="catalog-burger"
{...rest}
>
<StyledIconBox onClick={onClick} name="catalog-burger" {...rest}>
<StyledMenuIcon />
</StyledIconBox>
);

View File

@ -1,16 +1,16 @@
import React, { useCallback, useState } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import styled, { css } from "styled-components";
import NavItem from "./nav-item";
import ProfileActions from "./profile-actions";
import { useTranslation } from "react-i18next";
import { tablet } from "@appserver/components/utils/device";
import { tablet, mobile } from "@appserver/components/utils/device";
import { combineUrl, deleteCookie } from "@appserver/common/utils";
import { inject, observer } from "mobx-react";
import { withRouter } from "react-router";
import { AppServerConfig } from "@appserver/common/constants";
import config from "../../../../package.json";
import { isDesktop, isMobile } from "react-device-detect";
import { isDesktop, isMobile, isMobileOnly } from "react-device-detect";
import AboutDialog from "../../pages/About/AboutDialog";
import DebugInfoDialog from "../../pages/DebugInfo";
import HeaderCatalogBurger from "./header-catalog-burger";
@ -57,6 +57,20 @@ const StyledNav = styled.nav`
.icon-profile-menu {
cursor: pointer;
}
${isMobile &&
css`
padding: 0 16px 0 16px !important;
`}
@media ${mobile} {
padding: 0 0 0 16px;
}
${isMobileOnly &&
css`
padding: 0 0 0 16px !important;
`}
`;
const HeaderNav = ({
history,
@ -71,10 +85,9 @@ const HeaderNav = ({
buildVersionInfo,
debugInfo,
settingsModule,
currentProductId,
toggleArticleOpen,
changeTheme,
isDarkMode,
}) => {
const { t } = useTranslation(["NavMenu", "Common", "About"]);
const [visibleAboutDialog, setVisibleAboutDialog] = useState(false);
@ -147,8 +160,11 @@ const HeaderNav = ({
}),
},
{
key: "ChangeTheme",
...(!isPersonal && { label: "Change theme", onClick: changeTheme }),
key: "DarkMode",
label: t("Common:DarkMode"),
onClick: changeTheme,
withToggle: true,
isChecked: isDarkMode,
},
{
key: "AboutBtn",
@ -172,7 +188,7 @@ const HeaderNav = ({
}
return actions;
}, [onProfileClick, onAboutClick, onLogoutClick]);
}, [onProfileClick, onAboutClick, onLogoutClick, isDarkMode, changeTheme]);
//console.log("HeaderNav render");
return (
<StyledNav className="profileMenuIcon hidingHeader">
@ -183,12 +199,11 @@ const HeaderNav = ({
user={user}
userIsUpdate={userIsUpdate}
setUserIsUpdate={setUserIsUpdate}
isProduct={currentProductId !== "home"}
/>
<HeaderCatalogBurger
{/* <HeaderCatalogBurger
isProduct={currentProductId !== "home"}
onClick={toggleArticleOpen}
/>
/> */}
</>
) : (
<></>
@ -243,12 +258,15 @@ export default withRouter(
toggleArticleOpen,
buildVersionInfo,
debugInfo,
theme,
changeTheme,
} = settingsStore;
const { user, userIsUpdate, setUserIsUpdate } = userStore;
const modules = auth.availableModules;
const settingsModule = modules.find((module) => module.id === "settings");
const isDarkMode = !theme.isBase;
return {
isPersonal,
user,
@ -268,6 +286,7 @@ export default withRouter(
debugInfo,
settingsModule,
changeTheme,
isDarkMode,
};
})(observer(HeaderNav))
);

View File

@ -30,6 +30,7 @@ import {
onItemClick,
} from "@appserver/studio/src/helpers/utils";
import StyledExternalLinkIcon from "@appserver/studio/src/components/StyledExternalLinkIcon";
import HeaderCatalogBurger from "./header-catalog-burger";
import { Base } from "@appserver/components/themes";
const { proxyURL } = AppServerConfig;
@ -143,6 +144,7 @@ const HeaderComponent = ({
isPersonal,
isPreparationPortal,
theme,
toggleArticleOpen,
...props
}) => {
const { t } = useTranslation("Common");
@ -224,6 +226,9 @@ const HeaderComponent = ({
needNavMenu={needNavMenu}
isDesktopView={isDesktopView}
>
{currentProductId !== "home" && (
<HeaderCatalogBurger onClick={toggleArticleOpen} />
)}
<LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
{!isPersonal ? (
<img alt="logo" src={props.logoUrl} className="header-logo-icon" />
@ -238,7 +243,6 @@ const HeaderComponent = ({
/>
)}
</LinkWithoutRedirect>
{isNavAvailable && isDesktopView && !isPersonal && (
<StyledNavigationIconsWrapper>
{mainModules.map((item) => {
@ -347,6 +351,7 @@ export default inject(({ auth }) => {
currentProductId,
personal: isPersonal,
theme,
toggleArticleOpen,
} = settingsStore;
const { totalNotifications } = moduleStore;
@ -364,6 +369,7 @@ export default inject(({ auth }) => {
version,
isAuthenticated,
currentProductId,
toggleArticleOpen,
currentProductName: (product && product.title) || "",
};
})(observer(HeaderComponent));

View File

@ -6,17 +6,25 @@ import DropDownItem from "@appserver/components/drop-down-item";
import Link from "@appserver/components/link";
import ProfileMenu from "./profile-menu";
import api from "@appserver/common/api";
import { mobile } from "@appserver/components/utils/device";
import { isMobileOnly } from "react-device-detect";
import ToggleButton from "@appserver/components/toggle-button";
const StyledDiv = styled.div`
width: 32px;
height: 32px;
@media ${mobile} {
display: ${(props) => (props.isProduct ? "none !important" : "block")};
}
display: ${(props) => (props.isProduct && isMobileOnly ? "none" : "block")};
`;
const StyledDropdownItem = styled(DropDownItem)`
justify-content: space-between;
.toggle-button {
position: relative;
align-items: center;
grid-gap: 0px;
}
`;
class ProfileActions extends React.PureComponent {
constructor(props) {
super(props);
@ -119,9 +127,8 @@ class ProfileActions extends React.PureComponent {
forwardedRef={this.ref}
>
<div style={{ paddingTop: "8px" }}>
{this.props.userActions.map(
(action) =>
action && (
{this.props.userActions.map((action) =>
action && !action?.withToggle ? (
<Link
noHover={true}
key={action.key}
@ -130,6 +137,15 @@ class ProfileActions extends React.PureComponent {
>
<DropDownItem {...action} />
</Link>
) : (
<StyledDropdownItem noHover={true} key={action.key}>
{action.label}
<ToggleButton
className="toggle-button"
onChange={action.onClick}
isChecked={action.isChecked}
/>
</StyledDropdownItem>
)
)}
</div>

View File

@ -1,9 +1,10 @@
import styled from "styled-components";
import { isMobile } from "react-device-detect";
import { Base } from "@appserver/components/themes";
const StyledBodyPreparationPortal = styled.div`
margin-bottom: 24px;
display: flex;
// display: flex;
width: 100%;
max-width: ${(props) => (props.errorMessage ? "560px" : "480px")};
padding: 0 24px;
@ -11,6 +12,9 @@ const StyledBodyPreparationPortal = styled.div`
align-items: center;
position: relative;
.preparation-portal_progress {
display: flex;
margin-bottom: 16px;
.preparation-portal_progress-bar {
border-radius: 2px;
margin-right: 8px;
@ -33,8 +37,17 @@ const StyledBodyPreparationPortal = styled.div`
right: 50%;
${(props) => props.percent > 50 && "color: white"}
}
}
.preparation-portal_text {
text-align: center;
color: ${(props) => props.theme.text.disableColor};
}
`;
StyledBodyPreparationPortal.defaultProps = { theme: Base };
const StyledPreparationPortal = styled.div`
width: 100%;
${isMobile &&
@ -52,4 +65,5 @@ const StyledPreparationPortal = styled.div`
max-width: 480px;
}
`;
export { StyledBodyPreparationPortal, StyledPreparationPortal };

View File

@ -191,7 +191,6 @@ class PreparationPortal extends React.Component {
<StyledPreparationPortal>
<ErrorContainer
headerText={withoutHeader ? "" : t("PreparationPortalTitle")}
bodyText={t("PreparationPortalDescription")}
style={style}
>
<StyledBodyPreparationPortal
@ -206,6 +205,7 @@ class PreparationPortal extends React.Component {
>{`${errorMessage}`}</Text>
) : (
<>
<div className="preparation-portal_progress">
<div className="preparation-portal_progress-bar">
<div className="preparation-portal_progress-line"></div>
</div>
@ -213,6 +213,10 @@ class PreparationPortal extends React.Component {
className="preparation-portal_percent"
color="#a3a9ae"
>{`${percent}%`}</Text>
</div>
<Text className="preparation-portal_text">
{t("PreparationPortalDescription")}
</Text>
</>
)}
</StyledBodyPreparationPortal>

View File

@ -70,7 +70,6 @@ const SettingsPageLayout = ({ children }) => {
const isMobile = !!(isSmallTablet() && mobileView);
console.log("isMobile", isMobile);
return <>{children(isMobile)}</>;
};

View File

@ -267,6 +267,7 @@ class WelcomePageSettings extends React.Component {
isVertical={true}
>
<TextInput
id="textInputContainerWelcomePage"
scale={true}
value={greetingTitle}
onChange={this.onChangeGreetingTitle}
@ -304,6 +305,7 @@ class WelcomePageSettings extends React.Component {
<> {settingsBlock}</>
)}
<SaveCancelButtons
id="buttonsWelcomePage"
className="save-cancel-buttons"
onSaveClick={this.onSaveGreetingSettings}
onCancelClick={this.onRestoreGreetingSettings}

View File

@ -101,6 +101,7 @@ class BackupDesktopView extends React.Component {
helpUrlCreatingBackup,
downloadingProgress,
organizationName,
buttonSize,
} = this.props;
const { isInitialLoading, enableRestore, enableAutoBackup } = this.state;
@ -150,7 +151,7 @@ class BackupDesktopView extends React.Component {
{t("ManualBackupDescription")}
</Text>
<ManualBackup />
<ManualBackup buttonSize={buttonSize} />
</div>
{enableAutoBackup && (
@ -167,7 +168,7 @@ class BackupDesktopView extends React.Component {
{t("AutoBackupDescription")}
</Text>
<AutoBackup />
<AutoBackup buttonSize={buttonSize} />
</div>
)}
@ -181,7 +182,7 @@ class BackupDesktopView extends React.Component {
t("RestoreBackupHelp") + " " + t("RestoreBackupHelpNote")
)}
</div>
<RestoreBackup history={history} />
<RestoreBackup history={history} buttonSize={buttonSize} />
</>
)}
@ -200,7 +201,11 @@ class BackupDesktopView extends React.Component {
export default inject(({ auth, backup }) => {
const { language, settingsStore } = auth;
const { helpUrlCreatingBackup, organizationName } = settingsStore;
const {
helpUrlCreatingBackup,
organizationName,
isTabletView,
} = settingsStore;
const {
setThirdPartyStorage,
setBackupSchedule,
@ -210,6 +215,7 @@ export default inject(({ auth, backup }) => {
downloadingProgress,
} = backup;
const buttonSize = isTabletView ? "normal" : "small";
return {
helpUrlCreatingBackup,
language,
@ -220,5 +226,6 @@ export default inject(({ auth, backup }) => {
clearProgressInterval,
downloadingProgress,
organizationName,
buttonSize,
};
})(observer(withTranslation(["Settings", "Common"])(BackupDesktopView)));

View File

@ -132,7 +132,7 @@ class BackupMobileView extends React.Component {
: restoreBackup
? restoreBackupTitle
: "";
const buttonSize = "normal";
const renderSection = (section, sectionTitle, keyHelp) => (
<div className="backup-section_wrapper">
<div className="backup-section_heading">
@ -213,9 +213,11 @@ class BackupMobileView extends React.Component {
</StyledSettingsHeader>
)}
{autoBackup && <AutoBackup />}
{manualBackup && <ManualBackup />}
{restoreBackup && <RestoreBackup history={history} />}
{autoBackup && <AutoBackup buttonSize={buttonSize} />}
{manualBackup && <ManualBackup buttonSize={buttonSize} />}
{restoreBackup && (
<RestoreBackup history={history} buttonSize={buttonSize} />
)}
{!isSectionOpen && renderBackupSections()}

View File

@ -51,6 +51,15 @@ const StyledManualBackup = styled.div`
.manual-backup_buttons {
margin-top: 16px;
margin-left: 24px;
button:first-child {
width: 50%;
max-width: 164px;
}
button:last-child {
max-width: 164px;
width: calc(50% - 8px);
margin-left: 8px;
}
}
.manual-backup_storages-module {
@ -339,7 +348,7 @@ const StyledBackup = styled.div`
const StyledBackupList = styled.div`
height: 100%;
width: calc(100% - 16px);
.loader {
height: inherit;
}
@ -407,12 +416,11 @@ const StyledBackupList = styled.div`
height: 48px;
grid-template-areas: "trash icon-name full-name radiobutton";
grid-template-columns: 25px 32px calc(100% - 97px) 1fr;
grid-template-columns: 25px 32px auto 32px;
${(props) => props.isChecked && `background: #F3F4F4;`}
padding-left: 16px;
padding-right: 10px;
}
.backup-restore_dialog-scroll-body {

View File

@ -475,6 +475,7 @@ class AutomaticBackup extends React.PureComponent {
isCheckedThirdParty,
isCheckedDocuments,
commonThirdPartyList,
buttonSize,
} = this.props;
const {
@ -598,7 +599,7 @@ class AutomaticBackup extends React.PureComponent {
onClick={this.onSaveModuleSettings}
primary
isDisabled={isLoadingData}
size="medium"
size={buttonSize}
className="save-button"
/>
@ -606,7 +607,7 @@ class AutomaticBackup extends React.PureComponent {
label={t("Common:CancelButton")}
isDisabled={isLoadingData}
onClick={this.onCancelModuleSettings}
size="medium"
size={buttonSize}
/>
</div>
)}

View File

@ -184,6 +184,7 @@ class ManualBackup extends React.Component {
temporaryLink,
downloadingProgress,
commonThirdPartyList,
buttonSize,
} = this.props;
const {
isInitialLoading,
@ -208,6 +209,7 @@ class ManualBackup extends React.Component {
const commonModulesProps = {
isMaxProgress,
onMakeCopy: this.onMakeCopy,
buttonSize,
};
return isInitialLoading ? (
@ -233,14 +235,14 @@ class ManualBackup extends React.Component {
onClick={this.onMakeTemporaryBackup}
primary
isDisabled={!isMaxProgress}
size="medium"
size={buttonSize}
/>
{temporaryLink?.length > 0 && isMaxProgress && (
<Button
label={t("DownloadCopy")}
onClick={this.onClickDownloadBackup}
isDisabled={false}
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}
@ -248,7 +250,7 @@ class ManualBackup extends React.Component {
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled={true}
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -62,7 +62,7 @@ class DocumentsModule extends React.Component {
};
render() {
const { isMaxProgress, t } = this.props;
const { isMaxProgress, t, buttonSize } = this.props;
const {
isPanelVisible,
isStartCopy,
@ -93,14 +93,13 @@ class DocumentsModule extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={isModuleDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled={true}
size="medium"
style={{ marginLeft: "8px" }}
size={buttonSize}
/>
)}
</div>

View File

@ -89,7 +89,7 @@ class ThirdPartyModule extends React.Component {
});
};
render() {
const { isMaxProgress, t, commonThirdPartyList } = this.props;
const { isMaxProgress, t, commonThirdPartyList, buttonSize } = this.props;
const {
isPanelVisible,
isLoadingData,
@ -123,13 +123,13 @@ class ThirdPartyModule extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={isModuleDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled={true}
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -119,7 +119,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
return [firstError, errors];
};
render() {
const { isMaxProgress, thirdPartyStorage } = this.props;
const { isMaxProgress, thirdPartyStorage, buttonSize } = this.props;
const {
availableOptions,
selectedStorage,
@ -133,6 +133,7 @@ class ThirdPartyStorageModule extends React.PureComponent {
selectedStorage: availableStorage[selectedId],
isMaxProgress,
selectedId,
buttonSize,
onMakeCopyIntoStorage: this.onMakeCopyIntoStorage,
isInvalidForm: this.isInvalidForm,
};

View File

@ -57,7 +57,13 @@ class AmazonStorage extends React.Component {
};
render() {
const { formSettings, formErrors } = this.state;
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
const {
t,
isLoadingData,
isMaxProgress,
selectedStorage,
buttonSize,
} = this.props;
return (
<>
@ -76,13 +82,13 @@ class AmazonStorage extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={!isMaxProgress || this.isDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled={true}
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -50,7 +50,13 @@ class GoogleCloudStorage extends React.Component {
};
render() {
const { formSettings, formErrors } = this.state;
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
const {
t,
isLoadingData,
isMaxProgress,
selectedStorage,
buttonSize,
} = this.props;
return (
<>
@ -68,13 +74,13 @@ class GoogleCloudStorage extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={!isMaxProgress || this.isDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -50,7 +50,13 @@ class RackspaceStorage extends React.Component {
};
render() {
const { formSettings, formErrors } = this.state;
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
const {
t,
isLoadingData,
isMaxProgress,
selectedStorage,
buttonSize,
} = this.props;
return (
<>
@ -69,13 +75,13 @@ class RackspaceStorage extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={!isMaxProgress || this.isDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -52,7 +52,13 @@ class SelectelStorage extends React.Component {
render() {
const { formSettings, formErrors } = this.state;
const { t, isLoadingData, isMaxProgress, selectedStorage } = this.props;
const {
t,
isLoadingData,
isMaxProgress,
selectedStorage,
buttonSize,
} = this.props;
return (
<>
@ -71,13 +77,13 @@ class SelectelStorage extends React.Component {
onClick={this.onMakeCopy}
primary
isDisabled={!isMaxProgress || this.isDisabled}
size="medium"
size={buttonSize}
/>
{!isMaxProgress && (
<Button
label={t("Common:CopyOperation") + "..."}
isDisabled={true}
size="medium"
size={buttonSize}
style={{ marginLeft: "8px" }}
/>
)}

View File

@ -334,6 +334,7 @@ class RestoreBackup extends React.Component {
history,
downloadingProgress,
commonThirdPartyList,
buttonSize,
} = this.props;
const {
isChecked,
@ -490,7 +491,7 @@ class RestoreBackup extends React.Component {
primary
isDisabled={checkingRecoveryData || !isMaxProgress || !isChecked}
isLoading={checkingRecoveryData}
size="medium"
size={buttonSize}
tabIndex={10}
/>
</StyledRestoreBackup>

View File

@ -231,13 +231,13 @@ class BackupListModalDialog extends React.Component {
<div className="restore_dialog-button">
<Button
primary
size="medium"
size="normal"
label={t("Common:Restore")}
onClick={this.onRestorePortal}
isDisabled={isCopyingToLocal || !isChecked}
/>
<Button
size="medium"
size="normal"
label={t("Common:CloseButton")}
onClick={onModalClose}
/>

View File

@ -37,12 +37,12 @@ export const settingsTree = [
},
],
},
// {
// key: '0-2',
// icon: '',
// link: 'whitelabel',
// tKey: 'WhiteLabel',
// },
{
key: "0-2",
icon: "",
link: "whitelabel",
tKey: "WhiteLabel",
},
],
},
{

View File

@ -16,6 +16,10 @@ const saveData = {
timeZoneID: "Pacific/Tahiti",
};
const saveDataWelcomePageSettings = {
title: "Hello",
};
Scenario("Tfa auth success", async ({ I }) => {
I.mockEndpoint(Endpoints.confirm, "confirm");
I.mockEndpoint(Endpoints.code, "code");
@ -589,3 +593,150 @@ Scenario("Customization cancel button test time zone", async ({ I }) => {
I.see(timeZoneCurrent);
}
});
Scenario("Welcome Page Settings Save button test", async ({ I }) => {
I.mockEndpoint(Endpoints.common, "common");
I.mockEndpoint(Endpoints.cultures, "cultures");
I.mockEndpoint(Endpoints.timezones, "timezones");
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
I.mockEndpoint(Endpoints.build, "build");
I.mockEndpoint(Endpoints.info, "infoSettings");
I.mockEndpoint(Endpoints.self, "selfSettings");
I.mockEndpoint(Endpoints.greetingsettings, "greetingsettings");
if (deviceType !== "mobile") {
if (browser === "webkit") {
I.wait(30);
}
I.amOnPage("/settings/common/customization");
}
if (deviceType === "mobile") {
I.amOnPage("/settings/common/customization/welcome-page-settings");
}
const titleCurrent = await I.grabValueFrom("#textInputContainerWelcomePage");
I.fillField("#textInputContainerWelcomePage", "Hello");
I.seeElement({
react: "TextInput",
props: {
value: "Hello",
},
});
const titleNew = await I.grabValueFrom("#textInputContainerWelcomePage");
if (titleCurrent === titleNew) {
I.dontSee("You have unsaved changes");
I.seeElement({
react: "Button",
props: {
label: "Save",
isDisabled: true,
},
});
}
if (titleCurrent !== titleNew) {
I.see("You have unsaved changes");
I.seeElement({
react: "Button",
props: {
label: "Save",
isDisabled: false,
},
});
I.click({
react: "Button",
props: {
label: "Save",
id: "buttonsWelcomePage",
},
});
I.checkRequest(
"http://localhost:8092/api/2.0/settings/greetingsettings.json",
saveDataWelcomePageSettings,
"settings",
"greetingsettings"
);
I.seeElement({
react: "Button",
props: {
label: "Save",
isDisabled: true,
},
});
I.seeElement({
react: "TextInput",
props: {
value: "Hello",
},
});
I.dontSee("You have unsaved changes");
}
});
Scenario(
"Welcome Page Settings Restore to Default button test",
async ({ I }) => {
I.mockEndpoint(Endpoints.common, "common");
I.mockEndpoint(Endpoints.cultures, "cultures");
I.mockEndpoint(Endpoints.timezones, "timezones");
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
I.mockEndpoint(Endpoints.build, "build");
I.mockEndpoint(Endpoints.info, "infoSettings");
I.mockEndpoint(Endpoints.self, "selfSettings");
I.mockEndpoint(Endpoints.restore, "restore");
if (deviceType !== "mobile") {
if (browser === "webkit") {
I.wait(30);
}
I.amOnPage("/settings/common/customization");
}
if (deviceType === "mobile") {
I.amOnPage("/settings/common/customization/welcome-page-settings");
}
I.fillField("#textInputContainerWelcomePage", "Hello");
I.seeElement({
react: "TextInput",
props: {
value: "Hello",
},
});
I.click({
react: "Button",
props: {
label: "Restore to Default",
id: "buttonsWelcomePage",
},
});
I.checkRequest(
"http://localhost:8092/api/2.0/settings/greetingsettings/restore.json",
"",
"settings",
"restore"
);
I.seeElement({
react: "TextInput",
props: {
value: "Cloud Office Applications",
},
});
}
);

View File

@ -17,6 +17,20 @@ module.exports = class Endpoints {
baseDir: "settings",
};
static restore = {
url: [
"http://localhost:8092/api/2.0/settings/greetingsettings/restore.json",
],
method: "POST",
baseDir: "settings",
};
static greetingsettings = {
url: ["http://localhost:8092/api/2.0/settings/greetingsettings.json"],
method: "POST",
baseDir: "settings",
};
static common = {
url: ["http://localhost:8092/api/2.0/settings/customschemas/Common.json"],
method: "GET",

View File

@ -0,0 +1,6 @@
{
"value": {
"Status": 1,
"Message": "Welcome Page settings have been successfully saved"
}
}

View File

@ -0,0 +1,7 @@
{
"value": {
"Status": 1,
"Message": "Welcome Page settings have been successfully saved",
"CompanyName": "Cloud Office Applications"
}
}

View File

@ -355,3 +355,44 @@ if (deviceType === "mobile") {
});
});
}
Scenario("Welcome Page Settings mobile render test", async ({ I }) => {
I.mockEndpoint(Endpoints.common, "common");
I.mockEndpoint(Endpoints.cultures, "cultures");
I.mockEndpoint(Endpoints.timezones, "timezones");
I.mockEndpoint(Endpoints.settings, "settingsCustomization");
I.mockEndpoint(Endpoints.build, "build");
I.mockEndpoint(Endpoints.info, "infoSettings");
I.mockEndpoint(Endpoints.self, "selfSettings");
I.amOnPage("/settings/common/customization/welcome-page-settings");
if (deviceType === "mobile") {
I.see("Welcome Page Settings");
I.seeElement("div", ".settings-block");
I.seeElement({
react: "Button",
props: {
label: "Save",
isDisabled: true,
},
});
I.seeElement({
react: "Button",
props: {
label: "Restore to Default",
},
});
I.saveScreenshot(`10.welcome-page-settings-mobile.png`);
if (!isModel) {
I.seeVisualDiff(`10.welcome-page-settings-mobile.png`, {
tolerance: 1,
prepareBaseImage: false,
});
}
}
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB