WIP: Adding support page (#1030)

* WIP: Adding support page

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* lint

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/renderer/components/+support/index.tsx

@@ -0,0 +1,2 @@
+export * from "./support.route"
+export * from "./support"

src/renderer/components/+support/support.route.ts

@@ -0,0 +1,8 @@
+import { RouteProps } from "react-router";
+import { buildURL } from "../../navigation";
+
+export const supportRoute: RouteProps = {
+  path: "/support"
+}
+
+export const supportURL = buildURL(supportRoute.path)

src/renderer/components/+support/support.scss

@@ -0,0 +1,67 @@
+.Support {
+  position: fixed!important; // Allows to cover ClustersMenu
+  z-index: 1;
+
+  .WizardLayout {
+    grid-template-columns: unset;
+    grid-template-rows: 76px 1fr;
+    padding: 0;
+
+    .content-col {
+      padding: $padding * 8 0;
+      background-color: $clusterSettingsBackground;
+
+      h2 {
+        margin-bottom: $margin * 2;
+
+        &:not(:first-child) {
+          margin-top: $margin * 3;
+        }
+      }
+
+      .SubTitle {
+        text-transform: none;
+        margin: 0!important;
+      }
+
+      .repos {
+        position: relative;
+
+        .Badge {
+          display: flex;
+          margin: 0;
+          margin-bottom: 1px;
+          padding: $padding $padding * 2;
+        }
+      }
+
+      .hint {
+        margin-top: -$margin;
+      }
+    }
+
+    span.supportLink {
+      cursor: pointer;
+      color: $primary;
+      text-decoration: underline;
+      position: relative;
+    }
+  }
+
+  .is-mac & {
+    .WizardLayout .head-col {
+      padding-top: 32px;
+      overflow: hidden;
+
+      .Icon {
+        margin-top: -$margin * 2;
+      }
+    }
+  }
+
+  .Select {
+    &__control {
+      box-shadow: 0 0 0 1px $borderFaintColor;
+    }
+  }
+}

src/renderer/components/+support/support.tsx

@@ -0,0 +1,51 @@
+import "./support.scss"
+import React from "react"
+import { observer } from "mobx-react"
+import { Icon } from "../icon"
+import { WizardLayout } from "../layout/wizard-layout"
+import { history } from "../../navigation"
+import { Trans } from "@lingui/macro"
+import { shell } from "electron"
+import { issuesTrackerUrl, slackUrl } from "../../../common/vars";
+import { t } from "@lingui/macro";
+import { _i18n } from "../../i18n";
+
+@observer
+export class Support extends React.Component {
+
+  async componentDidMount() {
+    window.addEventListener('keydown', this.onEscapeKey);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this.onEscapeKey);
+  }
+
+  onEscapeKey = (evt: KeyboardEvent) => {
+    if (evt.code === "Escape") {
+      evt.stopPropagation();
+      history.goBack();
+    }
+  }
+
+  render() {
+    const header = (
+      <>
+        <h2>Support</h2>
+        <Icon material="close" big onClick={history.goBack}/>
+      </>
+    );
+    return (
+      <div className="Support">
+        <WizardLayout header={header} centered>
+          <h2><Trans>Community Slack Channel</Trans></h2>
+          <p>{_i18n._(t`Ask a question, see what's being discussed, join the conversation`)} <span className="supportLink" title={_i18n._(t`here`)} onClick={() => shell.openExternal(slackUrl) }>here</span></p>
+          <h2><Trans>Report an Issue</Trans></h2>
+          <p>{_i18n._(t`Review existing issues or open a new one`)} <span className="supportLink" title={_i18n._(t`here`)} onClick={() => shell.openExternal(issuesTrackerUrl) }>here</span></p>
+          <h2><Trans>Commercial Support</Trans></h2>
+          <p>TBD</p>
+        </WizardLayout>
+      </div>
+    );
+  }
+}

src/renderer/components/cluster-manager/bottom-bar.scss

@@ -10,4 +10,9 @@
     --flex-gap: #{$spacing};
     cursor: pointer;
   }
+
+  #support {
+    --flex-gap: #{$spacing};
+    cursor: pointer;
+  }
 }

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -5,6 +5,9 @@ import { Icon } from "../icon";
 import { WorkspaceMenu } from "../+workspaces/workspace-menu";
 import { workspaceStore } from "../../../common/workspace-store";
 
+import { supportURL } from "../+support/support.route";
+import { navigate } from "../../navigation";
+
 @observer
 export class BottomBar extends React.Component {
   render() {
@@ -16,6 +19,13 @@ export class BottomBar extends React.Component {
           <span className="workspace-name">{currentWorkspace.name}</span>
         </div>
         <WorkspaceMenu htmlFor="current-workspace"/>
+        <div id="support" className="flex gaps align-center box right">
+          <Icon 
+            small
+            svg="support"
+            onClick={() => navigate(supportURL())}
+          />
+        </div>
       </div>
     )
   }

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -7,6 +7,7 @@ import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
 import { LandingPage, landingRoute, landingURL } from "../+landing-page";
 import { Preferences, preferencesRoute } from "../+preferences";
+import { Support, supportRoute } from "../+support";
 import { Workspaces, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
@@ -59,6 +60,7 @@ export class ClusterManager extends React.Component {
           <Switch>
             <Route component={LandingPage} {...landingRoute} />
             <Route component={Preferences} {...preferencesRoute} />
+            <Route component={Support} {...supportRoute} />
             <Route component={Workspaces} {...workspacesRoute} />
             <Route component={AddCluster} {...addClusterRoute} />
             <Route component={ClusterView} {...clusterViewRoute} />

src/renderer/components/icon/support.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" <g><path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M19.46,9.12l-2.78,1.15 c-0.51-1.36-1.58-2.44-2.95-2.94l1.15-2.78C16.98,5.35,18.65,7.02,19.46,9.12z M12,15c-1.66,0-3-1.34-3-3s1.34-3,3-3s3,1.34,3,3 S13.66,15,12,15z M9.13,4.54l1.17,2.78c-1.38,0.5-2.47,1.59-2.98,2.97L4.54,9.13C5.35,7.02,7.02,5.35,9.13,4.54z M4.54,14.87 l2.78-1.15c0.51,1.38,1.59,2.46,2.97,2.96l-1.17,2.78C7.02,18.65,5.35,16.98,4.54,14.87z M14.88,19.46l-1.15-2.78 c1.37-0.51,2.45-1.59,2.95-2.97l2.78,1.17C18.65,16.98,16.98,18.65,14.88,19.46z"/></g></svg>