Merge pull request cockroachdb#68517 from cockroachdb/blathers/backpo…

…rt-release-21.1-68429

release-21.1: [CRDB-8149] Add CES survey link

pkg/ui/src/components/globalNavigation/globalNavigation.styl

@@ -21,4 +21,5 @@
   order 1
 
 .right-side-panel
+  display flex
   order 2

pkg/ui/src/views/app/components/feedbackSurveyLink/feedbackSurveyLink.styl

@@ -0,0 +1,29 @@
+// Copyright 2019 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+@require '~src/components/core/index.styl'
+
+.feedback-survey-link
+  display flex
+  flex-direction row
+  font-family $font-family--base
+  align-items center
+  border-right 1px solid #C0C6D9
+  margin-right $spacing-smaller
+  cursor pointer
+  &__title
+    margin-right $spacing-x-small
+  .image-container
+    width 32px
+    height 32px
+    display flex
+    justify-content center
+    align-items center
+    border-radius 16px

pkg/ui/src/views/app/components/feedbackSurveyLink/feedbackSurveyLink.tsx

@@ -0,0 +1,46 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React from "react";
+import { useSelector } from "react-redux";
+
+import externalLinkIcon from "!!raw-loader!assets/external-link.svg";
+import { trustIcon } from "src/util/trust";
+import {
+  singleVersionSelector,
+  clusterIdSelector,
+} from "../../../../redux/nodes";
+import "./feedbackSurveyLink.styl";
+
+const FeedBackSurveyLink = () => {
+  const singleVersion = useSelector(singleVersionSelector);
+  const clusterId = useSelector(clusterIdSelector);
+  const feedbackLink = new URL("https://www.cockroachlabs.com/survey/");
+  feedbackLink.searchParams.append("clusterId", clusterId);
+  feedbackLink.searchParams.append("clusterVersion", singleVersion);
+  if (!clusterId || !singleVersion) {
+    return <></>;
+  }
+  return (
+    <div
+      className="feedback-survey-link"
+      onClick={() => window.open(feedbackLink.toString())}
+    >
+      <div
+        className="image-container"
+        title="Share Feedback"
+        dangerouslySetInnerHTML={trustIcon(externalLinkIcon)}
+      />
+      <div className="feedback-survey-link__title">Share feedback</div>
+    </div>
+  );
+};
+
+export default FeedBackSurveyLink;

pkg/ui/src/views/app/containers/layout/index.tsx

@@ -24,6 +24,7 @@ import {
 } from "src/redux/nodes";
 import { AdminUIState } from "src/redux/state";
 import LoginIndicator from "src/views/app/components/loginIndicator";
+import FeedbackSurveyLink from "src/views/app/components/feedbackSurveyLink/feedbackSurveyLink";
 import {
   GlobalNavigation,
   CockroachLabsLockupIcon,
@@ -80,6 +81,7 @@ class Layout extends React.Component<LayoutProps & RouteComponentProps> {
                 <CockroachLabsLockupIcon height={26} />
               </Left>
               <Right>
+                <FeedbackSurveyLink />
                 <LoginIndicator />
               </Right>
             </GlobalNavigation>