Web: Client: Settings: add integration routes

web/ASC.Web.Client/src/components/pages/Settings/categories/integration/index.js

@@ -1,45 +1,73 @@
-import React, { lazy, Suspense } from "react";
-import { Route, Switch } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import Submenu from "@appserver/components/submenu";
 import { withRouter } from "react-router";
-import Loader from "@appserver/components/loader";
+import { withTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+import { AppServerConfig } from "@appserver/common/constants";
 import { combineUrl } from "@appserver/common/utils";
-import AppServerConfig from "@appserver/common/constants/AppServerConfig";
+import config from "../../../../../../package.json";
 
-const ThirdPartyServices = lazy(() => import("./ThirdPartyServicesSettings"));
-const SingleSignOn = lazy(() => import("./SingleSignOn"));
+import SSO from "./SingleSignOn";
+import ThirdParty from "./ThirdPartyServicesSettings";
 
-const PROXY_BASE_URL = combineUrl(
-  AppServerConfig.proxyURL,
-  "/settings/integration"
-);
+import AppLoader from "@appserver/common/components/AppLoader";
 
-const Integration = ({ match }) => {
+const IntegrationWrapper = (props) => {
+  const { t, history, loadBaseInfo } = props;
+  const [currentTab, setCurrentTab] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const data = [
+    {
+      id: "single-sign-on",
+      name: t("SingleSignOn"),
+      content: <SSO />,
+    },
+    {
+      id: "third-party-services",
+      name: t("ThirdPartyTitle"),
+      content: <ThirdParty />,
+    },
+  ];
+
+  const load = async () => {
+    await loadBaseInfo();
+    const path = location.pathname;
+    const currentTab = data.findIndex((item) => path.includes(item.id));
+    if (currentTab !== -1) setCurrentTab(currentTab);
+    setIsLoading(true);
+  };
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const onSelect = (e) => {
+    history.push(
+      combineUrl(
+        AppServerConfig.proxyURL,
+        config.homepage,
+        `/settings/integration/${e.id}`
+      )
+    );
+  };
+
+  if (!isLoading) return <AppLoader />;
   return (
-    <Suspense
-      fallback={<Loader className="pageLoader" type="rombs" size="40px" />}
-    >
-      <Switch>
-        <Route
-          exact
-          path={[
-            combineUrl(PROXY_BASE_URL, "/third-party-services"),
-            combineUrl(AppServerConfig.proxyURL, "/integration"),
-            match.path,
-          ]}
-          component={ThirdPartyServices}
-        />
-        <Route
-          exact
-          path={[
-            combineUrl(PROXY_BASE_URL, "/single-sign-on"),
-            combineUrl(AppServerConfig.proxyURL, "/integration"),
-            match.path,
-          ]}
-          component={SingleSignOn}
-        />
-      </Switch>
-    </Suspense>
+    <Submenu
+      data={data}
+      startSelect={currentTab}
+      onSelect={(e) => onSelect(e)}
+    />
   );
 };
 
-export default withRouter(Integration);
+export default inject(({ setup }) => {
+  const { initSettings } = setup;
+
+  return {
+    loadBaseInfo: async () => {
+      await initSettings();
+    },
+  };
+})(withTranslation("Settings")(withRouter(observer(IntegrationWrapper))));

web/ASC.Web.Client/src/components/pages/Settings/index.js

@@ -30,12 +30,15 @@ const PortalRenaming = lazy(() =>
   import("./categories/common/settingsCustomization/portal-renaming")
 );
 const TeamTemplate = lazy(() => import("./categories/common/team-template"));
-const ThirdPartyServices = lazy(() =>
+
+const Integration = lazy(() => import("./categories/integration"));
+const ThirdParty = lazy(() =>
   import("./categories/integration/ThirdPartyServicesSettings")
 );
 const SingleSignOn = lazy(() =>
   import("./categories/integration/SingleSignOn")
 );
+
 const DataManagementSettings = lazy(() =>
   import("./categories/data-management/backup")
 );
@@ -97,6 +100,12 @@ const TRUSTED_MAIL_PAGE_URL = combineUrl(
 );
 
 const ADMINS_URL = combineUrl(PROXY_BASE_URL, "/security/access-rights/admins");
+
+const INTEGRATION_URLS = [
+  combineUrl(PROXY_BASE_URL, "/integration/third-party-services"),
+  combineUrl(PROXY_BASE_URL, "/integration/single-sign-on"),
+];
+
 const THIRD_PARTY_URL = combineUrl(
   PROXY_BASE_URL,
   "/integration/third-party-services"
@@ -151,7 +160,8 @@ const Settings = (props) => {
             component={TrustedMailPage}
           />
 
-          <Route exact path={THIRD_PARTY_URL} component={ThirdPartyServices} />
+          <Route exact path={INTEGRATION_URLS} component={Integration} />
+          <Route exact path={THIRD_PARTY_URL} component={ThirdParty} />
           <Route exact path={SSO_URL} component={SingleSignOn} />
           <Route
             exact