1 files changed, 203 insertions, 0 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.tsx b/src/components/settings/navigation/SettingsNavigation.tsx
new file mode 100644
index 000000000..95c69027c
--- /dev/null
+++ b/src/components/settings/navigation/SettingsNavigation.tsx
@@ -0,0 +1,203 @@
+import { Component } from 'react';
+import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl';
+import { inject, observer } from 'mobx-react';
+import { NavLink } from 'react-router-dom';
+import { StoresProps } from '../../../@types/ferdium-components.types';
+import {
+  LOCAL_SERVER,
+  LIVE_FERDIUM_API,
+  LIVE_FRANZ_API,
+} from '../../../config';
+import globalMessages from '../../../i18n/globalMessages';
+
+const messages = defineMessages({
+  availableServices: {
+    id: 'settings.navigation.availableServices',
+    defaultMessage: 'Available services',
+  },
+  yourServices: {
+    id: 'settings.navigation.yourServices',
+    defaultMessage: 'Your services',
+  },
+  yourWorkspaces: {
+    id: 'settings.navigation.yourWorkspaces',
+    defaultMessage: 'Your workspaces',
+  },
+  account: {
+    id: 'settings.navigation.account',
+    defaultMessage: 'Account',
+  },
+  team: {
+    id: 'settings.navigation.team',
+    defaultMessage: 'Manage Team',
+  },
+  releaseNotes: {
+    id: 'settings.navigation.releaseNotes',
+    defaultMessage: 'Release Notes',
+  },
+  supportFerdium: {
+    id: 'settings.navigation.supportFerdium',
+    defaultMessage: 'About Ferdium',
+  },
+  logout: {
+    id: 'settings.navigation.logout',
+    defaultMessage: 'Logout',
+  },
+});
+
+interface IProps extends Partial<StoresProps>, WrappedComponentProps {
+  serviceCount: number;
+  workspaceCount: number;
+}
+
+@inject('stores', 'actions')
+@observer
+class SettingsNavigation extends Component<IProps> {
+  constructor(props: IProps) {
+    super(props);
+  }
+
+  handleLogout(): void {
+    const isUsingWithoutAccount =
+      this.props.stores!.settings.app.server === LOCAL_SERVER;
+
+    // Remove current auth token
+    localStorage.removeItem('authToken');
+
+    if (isUsingWithoutAccount) {
+      // Reset server back to Ferdium API
+      this.props.actions!.settings.update({
+        type: 'app',
+        data: {
+          server: LIVE_FERDIUM_API,
+        },
+      });
+    }
+    this.props.stores!.user.isLoggingOut = true;
+
+    this.props.stores!.router.push('/auth/welcome');
+
+    // Reload Ferdium, otherwise many settings won't sync correctly with the server
+    // after logging into another account
+    window.location.reload();
+  }
+
+  render() {
+    const { serviceCount, workspaceCount, stores, intl } = this.props;
+    const isUsingWithoutAccount = stores!.settings.app.server === LOCAL_SERVER;
+    const isUsingFranzServer = stores!.settings.app.server === LIVE_FRANZ_API;
+
+    return (
+      <div className="settings-navigation">
+        <NavLink
+          to="/settings/recipes"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.availableServices)}
+        </NavLink>
+        <NavLink
+          to="/settings/services"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.yourServices)}{' '}
+          <span className="badge">{serviceCount}</span>
+        </NavLink>
+        <NavLink
+          to="/settings/workspaces"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.yourWorkspaces)}{' '}
+          <span className="badge">{workspaceCount}</span>
+        </NavLink>
+        {!isUsingWithoutAccount && (
+          <NavLink
+            to="/settings/user"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
+          >
+            {intl.formatMessage(messages.account)}
+          </NavLink>
+        )}
+        {isUsingFranzServer && (
+          <NavLink
+            to="/settings/team"
+            className={({ isActive }) =>
+              isActive
+                ? 'settings-navigation__link is-active'
+                : 'settings-navigation__link'
+            }
+          >
+            {intl.formatMessage(messages.team)}
+          </NavLink>
+        )}
+        <NavLink
+          to="/settings/app"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(globalMessages.settings)}
+          {stores!.settings.app.automaticUpdates &&
+            (stores!.ui.showServicesUpdatedInfoBar ||
+              stores!.app.updateStatus ===
+                stores!.app.updateStatusTypes.AVAILABLE ||
+              stores!.app.updateStatus ===
+                stores!.app.updateStatusTypes.DOWNLOADED) && (
+              <span className="update-available">•</span>
+            )}
+        </NavLink>
+        <NavLink
+          to="/settings/releasenotes"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.releaseNotes)}
+        </NavLink>
+        <NavLink
+          to="/settings/support"
+          className={({ isActive }) =>
+            isActive
+              ? 'settings-navigation__link is-active'
+              : 'settings-navigation__link'
+          }
+        >
+          {intl.formatMessage(messages.supportFerdium)}
+        </NavLink>
+        <span className="settings-navigation__expander" />
+        <button
+          type="button"
+          // @ts-ignore
+          to="/auth/logout" // TODO - [TS DEBT] Need to check if button take this prop
+          className="settings-navigation__link"
+          onClick={this.handleLogout.bind(this)}
+        >
+          {!isUsingWithoutAccount
+            ? intl.formatMessage(messages.logout)
+            : 'Exit session'}
+        </button>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(SettingsNavigation);