Refactoring

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerItem.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Text, ToggleButton, Icons } from "asc-web-components";
-import ConsumerModalDialog from "./modal-dialog";
+import ConsumerModalDialog from "./consumerModalDialog";
 
 class ConsumerItem extends React.Component {
     constructor(props) {
@@ -19,7 +19,7 @@ class ConsumerItem extends React.Component {
     }
 
     render() {
-        const { name, description, dialogVisible, consumers, onModalClose, onToggleClick, selectedConsumer } = this.props;
+        const { dialogVisible, consumer, consumers, onModalClose, selectedConsumer } = this.props;
         const { toggleActive } = this.state;
         const { onModalButtonClick } = this;
 
@@ -28,12 +28,13 @@ class ConsumerItem extends React.Component {
                 <Box displayProp="flex" flexDirection="column">
                     <Box displayProp="flex" justifyContent="space-between" widthProp="100%" marginProp="21px 0 0 0">
                         <div>
-                            {React.createElement(Icons[`${name}Icon`], { size: "scale" })}
+                            <Text>{consumer.name}</Text>
+                            {/* {React.createElement(Icons[`${name}Icon`], { size: "scale" })} */}
                         </div>
                     </Box>
                     <Box displayProp="flex" marginProp="21px 0 0 0">
                         <Text>
-                            {description}
+                            {consumer.instruction}
                         </Text>
                     </Box>
                 </Box>

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerModalDialog.js

@@ -28,20 +28,20 @@ const ConsumerModalDialog = (props) => {
         return consumers.find((consumer) => consumer.name === selectedConsumer).name;
     }
     const getInnerDescription = () => {
-        return consumers.find((consumer) => consumer.name === selectedConsumer).innerDescription;
+        return consumers.find((consumer) => consumer.name === selectedConsumer).instruction;
     }
     const getInputFields = () => {
         return consumers
             .find((consumer) => consumer.name === selectedConsumer)
-            .tokens
+            .props
-            .map((token, i) =>
+            .map((prop, i) =>
                 <React.Fragment key={i}>
                     <Box displayProp="flex" flexDirection="column">
                         <Box>
-                            <Text isBold={true}>{token}:</Text>
+                            <Text isBold={true}>{prop.title}:</Text>
                         </Box>
                         <Box>
-                            <TextInput placeholder={token} isAutoFocussed={i === 0 && true} />
+                            <TextInput placeholder={prop.title} isAutoFocussed={i === 0 && true} />
                         </Box>
                     </Box>
                 </React.Fragment>

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumerToggle.js

@@ -6,7 +6,7 @@ const StyledToggle = styled(ToggleButton)`
    position: relative;
 `;
 
-class ConsumerItemToggle extends React.Component {
+class ConsumerToggle extends React.Component {
 
     constructor(props) {
         super(props);
@@ -22,33 +22,32 @@ class ConsumerItemToggle extends React.Component {
             })
             // TODO: api -> service off -> toastr
         }
-
         // this.setState({
         //     toggleActive: true
         // });
         else {
             this.props.onToggleClick();
         }
-
     }
 
-
-
     render() {
 
-        const { name, onModalOpen } = this.props;
+        const { name, onModalOpen, canSet } = this.props;
         const { toggleActive } = this.state;
         const { onToggleClick } = this;
 
         return (
             <>
                 <Box marginProp="28px 0 0 0">
-                    <StyledToggle onChange={onToggleClick}
+                    <StyledToggle
-                        isChecked={toggleActive} />
+                        onChange={onToggleClick}
+                        isDisabled={!canSet}
+                        isChecked={!canSet ? true : toggleActive}
+                    />
                 </Box>
             </>
         );
     }
 }
 
-export default ConsumerItemToggle;
+export default ConsumerToggle;

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/sub-components/consumers.js

@@ -1,26 +0,0 @@
-export const consumers = [
-    {
-        name: "Amazon",
-        description: "Подключите Amazon AWS S3 для резервного копирования и хранения данных портала.",
-        innerDescription: "Добавив Amazon AWS S3, вы сможете использовать его для создания резервных копий портала, чтобы предотвратить потерю данных. Также используйте его для хранения данных и статического содержимого портала.",
-        tokens: ["Ключ доступа S3", "Секретный ключ доступа S3"]
-    },
-    {
-        name: "Bitly",
-        description: "Подключите это приложение для сокращения пригласительных ссылок на портал и ссылок для доступа к файлам в модуле \"Документы\" с помощью сервиса Bitly.",
-        innerDescription: "Добавив сервис Bitly, Вы будуте получать сокращенные ссылки для приглашения новых пользователей на портал ONLYOFFICE и сокращенные ссылки для документов в модуле \"Документы\", к которым был предоставлен доступ для внешних пользователей.",
-        tokens: ["login", "apiKey"]
-    },
-    {
-        name: "Box",
-        description: "Подключите приложение для управления файлами и папками Box.",
-        innerDescription: "Добавив приложение сервиса Box, Вы сможете подключить свой аккаунт Box в модуле \"Документы\". Это позволит загружать и создавать новые файлы в Box, редактировать существующие, копировать и удалять их, предоставлять доступ к файлам и папкам для пользователей портала ONLYOFFICE.",
-        tokens: ["Box ID", "Ключ Box"]
-    },
-    {
-        name: "Telegram",
-        description: "Подключите аккаунт Telegram для получения оповещений портала через Telegram.",
-        innerDescription: "Добавив приложение сервиса Telegram Вы сможете на странице своего профиля подключить вход на портал используя аккаунт Telegram.",
-        tokens: ["Токен бота", "Имя бота"]
-    }
-]

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/third-party-services.js

@@ -1,11 +1,12 @@
 import React from "react";
-import { consumers } from "./sub-components/consumers";
+import { connect } from "react-redux";
+import { getConsumers } from '../../../../../store/settings/actions';
+import { withTranslation } from 'react-i18next';
+import styled from "styled-components";
+
 import { Box, Text, Link } from "asc-web-components";
 import ConsumerItem from "./sub-components/consumerItem";
-import { withTranslation } from 'react-i18next';
+import ConsumerToggle from "./sub-components/consumerToggle";
-import { connect } from "react-redux";
-import ConsumerItemToggle from "./sub-components/consumerItemToggle";
-import styled from "styled-components";
 
 const RootContainer = styled(Box)`
 
@@ -31,12 +32,16 @@ class ThirdPartyServices extends React.Component {
         document.title = `${t("ThirdPartyAuthorization")} – ${t("OrganizationName")}`;
 
         this.state = {
-            consumers: consumers,
             selectedConsumer: "",
             dialogVisible: false
         }
     }
 
+    componentDidMount() {
+        const { getConsumers } = this.props;
+        getConsumers();
+    }
+
     onModalOpen = () => {
         this.setState({
             dialogVisible: true,
@@ -54,8 +59,8 @@ class ThirdPartyServices extends React.Component {
 
     render() {
 
-        const { t } = this.props;
+        const { t, consumers } = this.props;
-        const { consumers, selectedConsumer, dialogVisible } = this.state;
+        const { selectedConsumer, dialogVisible } = this.state;
         const { titleDescription, onModalOpen, onModalClose } = this;
 
         const consumerRefs = consumers.reduce((acc, consumer) => {
@@ -102,16 +107,17 @@ class ThirdPartyServices extends React.Component {
                                     <Box displayProp="flex" className="consumer-item-container">
                                         <ConsumerItem
                                             ref={el => (consumerRefs[i] = el)}
-                                            name={consumer.name}
+                                            consumer={consumer}
-                                            description={consumer.description}
                                             consumers={consumers}
+
                                             dialogVisible={dialogVisible}
                                             selectedConsumer={selectedConsumer}
                                             onModalClose={onModalClose}
                                         />
-                                        <ConsumerItemToggle
+                                        <ConsumerToggle
                                             ref={el => (toggleRefs[i] = el)}
                                             name={consumer.name}
+                                            canSet={consumer.canSet}
                                             onToggleClick={() => {
                                                 this.setState({ selectedConsumer: consumer.name })
                                                 onModalOpen()
@@ -127,4 +133,9 @@ class ThirdPartyServices extends React.Component {
     }
 }
 
-export default connect(null, null)(withTranslation()(ThirdPartyServices));
+const mapStateToProps = (state) => {
+    const { consumers } = state.settings.integration;
+    return { consumers }
+}
+
+export default connect(mapStateToProps, { getConsumers })(withTranslation()(ThirdPartyServices));