From 87c5296cd8c179e4eea5c906f3e1b447f7eb6a24 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Thu, 6 Jul 2023 06:57:53 -0700
Subject: [PATCH] Scaffolding

Summary:
Scaffolding connectivity hub. The final place may be different though.

But at least for now whilst we iterate on the solution, this should be enough.

Reviewed By: passy

Differential Revision: D47230905

fbshipit-source-id: e3b3f7d773e1bf8b0dd9821cf25c6fa8e77669f4
---
 .../chrome/ConnectionTroubleshootTools.tsx    | 15 ++++++++++++
 .../src/sandy-chrome/LeftRail.tsx             | 23 +++++++++++++++++++
 .../src/sandy-chrome/SandyApp.tsx             |  7 +++++-
 3 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 desktop/flipper-ui-core/src/chrome/ConnectionTroubleshootTools.tsx

diff --git a/desktop/flipper-ui-core/src/chrome/ConnectionTroubleshootTools.tsx b/desktop/flipper-ui-core/src/chrome/ConnectionTroubleshootTools.tsx
new file mode 100644
index 000000000..1179fb91d
--- /dev/null
+++ b/desktop/flipper-ui-core/src/chrome/ConnectionTroubleshootTools.tsx
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Layout} from '../ui';
+import React from 'react';
+
+export function ConnectionTroubleshootTools() {
+  return <Layout.Container grow>Connection Troubleshoot</Layout.Container>;
+}
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
index 127b5140a..062347bc6 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
@@ -29,6 +29,7 @@ import {
   RocketOutlined,
   BugOutlined,
   WarningOutlined,
+  ApiOutlined,
 } from '@ant-design/icons';
 import {SidebarLeft, SidebarRight} from './SandyIcons';
 import {useDispatch, useStore} from '../utils/useStore';
@@ -184,6 +185,12 @@ export const LeftRail = withTrackingScope(function LeftRail({
             toplevelSelection={toplevelSelection}
             setToplevelSelection={setToplevelSelection}
           />
+          {getRenderHostInstance().GK('flipper_connection_troubleshoot') && (
+            <ConnectionTroubleshootButton
+              toplevelSelection={toplevelSelection}
+              setToplevelSelection={setToplevelSelection}
+            />
+          )}
           <LeftRailDivider />
           <DebugLogsButton
             toplevelSelection={toplevelSelection}
@@ -415,6 +422,22 @@ function DebugLogsButton({
   );
 }
 
+function ConnectionTroubleshootButton({
+  toplevelSelection,
+  setToplevelSelection,
+}: ToplevelProps) {
+  return (
+    <LeftRailButton
+      icon={<ApiOutlined />}
+      title="Connection Troubleshoot"
+      selected={toplevelSelection === 'connectivity'}
+      onClick={() => {
+        setToplevelSelection('connectivity');
+      }}
+    />
+  );
+}
+
 function ExportEverythingEverywhereAllAtOnceStatusModal({
   status,
   setStatus,
diff --git a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx b/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx
index 9758af51c..4f7f2365b 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/SandyApp.tsx
@@ -44,11 +44,13 @@ import {isFBEmployee} from '../utils/fbEmployee';
 import {notification} from 'antd';
 import isProduction from '../utils/isProduction';
 import {getRenderHostInstance} from 'flipper-frontend-core';
+import {ConnectionTroubleshootTools} from '../chrome/ConnectionTroubleshootTools';
 
 export type ToplevelNavItem =
   | 'appinspect'
   | 'flipperlogs'
   | 'notification'
+  | 'connectivity'
   | undefined;
 export type ToplevelProps = {
   toplevelSelection: ToplevelNavItem;
@@ -64,7 +66,7 @@ export function SandyApp() {
   const staticView = useStore((state) => state.connections.staticView);
 
   /**
-   * top level navigation uses two pieces of state, selection stored here, and selection that is based on what is stored in the reducer (which might be influenced by redux action dispatches to different means).
+   * Top level navigation uses two pieces of state, selection stored here, and selection that is based on what is stored in the reducer (which might be influenced by redux action dispatches to different means).
    * The logic here is to sync both, but without modifying the navigation related reducers to not break classic Flipper.
    * It is possible to simplify this in the future.
    */
@@ -88,6 +90,9 @@ export function SandyApp() {
         case 'flipperlogs':
           dispatch(setStaticView(FlipperDevTools));
           break;
+        case 'connectivity':
+          dispatch(setStaticView(ConnectionTroubleshootTools));
+          break;
         default:
       }
       setStoredToplevelSelection(newSelection);