Add support forum link to PS landing page and dashboard (#848)

* Add icons and link for support forum

* Remove support forum item from sidebar

* Add component for support link

* Show support forum link conditionally

* Handle dark mode

packages/design-system/src/components/landingPage/index.tsx

@@ -25,6 +25,7 @@ import classNames from 'classnames';
  */
 import { ArrowUp } from '../../icons';
 import ProgressBar from '../progressBar';
+import SupportLink from './supportLink';
 import QuickLinksList from './quickLinksList';
 import { PSInfoKeyType } from './infoCard/fetchPSInfo';
 import InfoCard from './infoCard';
@@ -40,6 +41,7 @@ interface LandingPageProps {
   iframeBorderClass?: string;
   extraClasses?: string;
   showQuickLinks?: boolean;
+  showSupportLink?: boolean;
 }
 
 const LandingPage = ({
@@ -51,6 +53,7 @@ const LandingPage = ({
   extraClasses,
   contentPanel,
   showQuickLinks = true,
+  showSupportLink = false,
 }: LandingPageProps) => {
   const [loading, setLoading] = useState(iframeSrc ? true : false);
   const [open, setOpen] = useState(true);
@@ -67,19 +70,24 @@ const LandingPage = ({
           'divide-y divide-hex-gray dark:divide-quartz'
         )}
       >
-        <div className="p-4 flex flex-col gap-1">
-          <button
-            className="flex gap-2 text-2xl font-bold items-baseline text-raisin-black dark:text-bright-gray cursor-pointer"
-            onClick={() => setOpen((prevOpen) => !prevOpen)}
-          >
-            {title && <h1 className="text-left">{title}</h1>}
-            <div>
-              <ArrowUp
-                className={classNames(open && 'rotate-180 -translate-y-1')}
-              />
-            </div>
-          </button>
-          <Breadcrumbs items={extractSelectedItemKeyTitles()} />
+        <div className="flex justify-between">
+          <div className="p-4 flex flex-col gap-1">
+            <button
+              className="flex gap-2 text-2xl font-bold items-baseline text-raisin-black dark:text-bright-gray cursor-pointer"
+              onClick={() => setOpen((prevOpen) => !prevOpen)}
+            >
+              {title && <h1 className="text-left">{title}</h1>}
+              <div>
+                <ArrowUp
+                  className={classNames(open && 'rotate-180 -translate-y-1')}
+                />
+              </div>
+            </button>
+            <Breadcrumbs items={extractSelectedItemKeyTitles()} />
+          </div>
+          <div className="p-4 flex items-center">
+            {showSupportLink && <SupportLink />}
+          </div>
         </div>
         <div className={classNames({ hidden: !open && !children })}>
           <div

packages/design-system/src/components/landingPage/supportLink.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import { SupportIcon, ExternalLinkBlack } from '../../icons';
+
+const SupportLink = () => {
+  return (
+    <a
+      className="group dark:text-bright-gray flex items-center hover:text-blue-500 hover:dark:text-blue-400"
+      target="_blank"
+      href="https://github.com/GoogleChromeLabs/ps-analysis-tool/discussions/categories/support-forum"
+      rel="noreferrer"
+    >
+      <span className="mt-[1px] mr-1">
+        <SupportIcon className="fill-current text-black dark:text-bright-gray group-hover:text-blue-500" />
+      </span>
+      <span>Support Forum</span>
+      <span className="ml-[2px] inline-block">
+        <ExternalLinkBlack
+          className="fill-current text-black dark:text-bright-gray group-hover:text-blue-500"
+          width="14"
+        />
+      </span>
+    </a>
+  );
+};
+
+export default SupportLink;

packages/design-system/src/icons/index.tsx

@@ -86,3 +86,4 @@ export { default as ExternalLinkIcon } from './external-link.svg';
 export { default as DoubleArrowIcon } from './double-arrow-icon.svg';
 export { default as Settings } from './settings.svg';
 export { default as MenuOpenIcon } from './menu-open-icon.svg';
+export { default as SupportIcon } from './support.svg';

packages/extension/src/view/devtools/components/dashboard/index.tsx

@@ -28,6 +28,7 @@ const Dashboard = () => {
   return (
     <LandingPage
       title="Dashboard"
+      showSupportLink={true}
       contentPanel={<ContentPanel />}
       showQuickLinks={false}
     />

packages/extension/src/view/devtools/components/privacySandbox/index.tsx

@@ -34,7 +34,11 @@ const PrivacySandbox = () => {
   }, []);
 
   return (
-    <LandingPage title="Privacy Sandbox" contentPanel={<ContentPanel />} />
+    <LandingPage
+      title="Privacy Sandbox"
+      showSupportLink={true}
+      contentPanel={<ContentPanel />}
+    />
   );
 };