From 3b19b0db12484d8d18d2de0b21a22df4218608dd Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Wed, 9 Oct 2024 10:25:51 -0500
Subject: [PATCH] add tooltips to cloud instance oidc and manager edit buttons
 (#1376)

---
 www/package.json                              |  2 +-
 www/src/App.tsx                               | 61 +++++++++++--------
 .../plural-cloud/CloudInstanceTableCols.tsx   | 10 +--
 .../plural-cloud/ConsoleInstanceOIDC.tsx      | 18 ++++--
 www/src/utils/shouldForwardProp.ts            | 11 ++++
 www/yarn.lock                                 | 10 +--
 6 files changed, 70 insertions(+), 42 deletions(-)
 create mode 100644 www/src/utils/shouldForwardProp.ts

diff --git a/www/package.json b/www/package.json
index 201338e37..98403ef29 100644
--- a/www/package.json
+++ b/www/package.json
@@ -44,7 +44,7 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "3.74.3",
+    "@pluralsh/design-system": "3.74.4",
     "@react-spring/web": "9.7.3",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",
diff --git a/www/src/App.tsx b/www/src/App.tsx
index 62371c4a3..77951e303 100644
--- a/www/src/App.tsx
+++ b/www/src/App.tsx
@@ -15,11 +15,16 @@ import {
 } from '@pluralsh/design-system'
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
 import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'
-import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import styled, {
+  StyleSheetManager,
+  ThemeProvider as StyledThemeProvider,
+} from 'styled-components'
 import { mergeDeep } from '@apollo/client/utilities'
 import mpRecipe from 'honorable-recipe-mp'
 import { GrowthBook, GrowthBookProvider } from '@growthbook/growthbook-react'
 
+import { shouldForwardProp } from './utils/shouldForwardProp'
+
 import { PluralErrorBoundary } from './components/utils/PluralErrorBoundary'
 
 import { client } from './helpers/client'
@@ -172,31 +177,35 @@ function App() {
       <ApolloProvider client={client}>
         <IntercomProvider appId={INTERCOM_APP_ID}>
           <ThemeProvider theme={honorableTheme}>
-            <StyledThemeProvider theme={mergedStyledTheme}>
-              <GrowthBookProvider growthbook={growthbook as any as GrowthBook}>
-                <CursorPositionProvider>
-                  <MarkdocContextProvider value={{ variant: 'console' }}>
-                    <NavContextProvider>
-                      <OverlayContextProvider>
-                        <BreadcrumbsProvider>
-                          <CssBaseline />
-                          <GlobalStyle />
-                          <Grommet
-                            full
-                            theme={mergedStyledTheme as any as ThemeType}
-                            themeMode="dark"
-                          >
-                            <PluralErrorBoundary>
-                              <RootBoxSC>{routes}</RootBoxSC>
-                            </PluralErrorBoundary>
-                          </Grommet>
-                        </BreadcrumbsProvider>
-                      </OverlayContextProvider>
-                    </NavContextProvider>
-                  </MarkdocContextProvider>
-                </CursorPositionProvider>
-              </GrowthBookProvider>
-            </StyledThemeProvider>
+            <StyleSheetManager shouldForwardProp={shouldForwardProp}>
+              <StyledThemeProvider theme={mergedStyledTheme}>
+                <GrowthBookProvider
+                  growthbook={growthbook as any as GrowthBook}
+                >
+                  <CursorPositionProvider>
+                    <MarkdocContextProvider value={{ variant: 'console' }}>
+                      <NavContextProvider>
+                        <OverlayContextProvider>
+                          <BreadcrumbsProvider>
+                            <CssBaseline />
+                            <GlobalStyle />
+                            <Grommet
+                              full
+                              theme={mergedStyledTheme as any as ThemeType}
+                              themeMode="dark"
+                            >
+                              <PluralErrorBoundary>
+                                <RootBoxSC>{routes}</RootBoxSC>
+                              </PluralErrorBoundary>
+                            </Grommet>
+                          </BreadcrumbsProvider>
+                        </OverlayContextProvider>
+                      </NavContextProvider>
+                    </MarkdocContextProvider>
+                  </CursorPositionProvider>
+                </GrowthBookProvider>
+              </StyledThemeProvider>
+            </StyleSheetManager>
           </ThemeProvider>
         </IntercomProvider>
       </ApolloProvider>
diff --git a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
index 7bceca22b..cf5dfa3b3 100644
--- a/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
+++ b/www/src/components/overview/clusters/plural-cloud/CloudInstanceTableCols.tsx
@@ -5,6 +5,7 @@ import {
   ConsoleIcon,
   Flex,
   ListBoxItem,
+  Tooltip,
 } from '@pluralsh/design-system'
 import { createColumnHelper } from '@tanstack/react-table'
 import { ProviderIcon } from 'components/utils/ProviderIcon'
@@ -194,18 +195,19 @@ const ColActions = columnHelper.accessor((instance) => instance, {
           <ListBoxItem
             key={MenuItemKey.EditSize}
             label="Edit instance size"
-            textValue="Edit instance size"
           />
           <ListBoxItem
             key={MenuItemKey.EditOidc}
-            label="Edit cluster managers"
-            textValue="Edit cluster managers"
+            label={
+              <Tooltip label="Allow other team members to reconfigure this console instance">
+                <span>Edit cluster managers</span>
+              </Tooltip>
+            }
           />
           <ListBoxItem
             key={MenuItemKey.Delete}
             destructive
             label="Delete instance"
-            textValue="Delete instance"
           />
         </MoreMenu>
         {/* Modals */}
diff --git a/www/src/components/overview/clusters/plural-cloud/ConsoleInstanceOIDC.tsx b/www/src/components/overview/clusters/plural-cloud/ConsoleInstanceOIDC.tsx
index 92d6e883c..5d526d20c 100644
--- a/www/src/components/overview/clusters/plural-cloud/ConsoleInstanceOIDC.tsx
+++ b/www/src/components/overview/clusters/plural-cloud/ConsoleInstanceOIDC.tsx
@@ -6,6 +6,7 @@ import {
   FormField,
   Modal,
   Spinner,
+  Tooltip,
 } from '@pluralsh/design-system'
 import {
   BindingInput,
@@ -42,7 +43,7 @@ export function ConsoleInstanceOIDC({
       fallback={
         <Spinner
           size={24}
-          css={{ width: '100%' }}
+          css={{ minWidth: '70px' }}
         />
       }
     >
@@ -51,12 +52,17 @@ export function ConsoleInstanceOIDC({
         renderIndicators={false}
       >
         <>
-          <Button
-            secondary
-            onClick={() => setOpen(true)}
+          <Tooltip
+            placement="top"
+            label="Enable login for your team members for this console instance"
           >
-            OIDC
-          </Button>
+            <Button
+              secondary
+              onClick={() => setOpen(true)}
+            >
+              OIDC
+            </Button>
+          </Tooltip>
           <Modal
             onOpenAutoFocus={(e) => e.preventDefault()}
             open={open}
diff --git a/www/src/utils/shouldForwardProp.ts b/www/src/utils/shouldForwardProp.ts
new file mode 100644
index 000000000..d46b91fb1
--- /dev/null
+++ b/www/src/utils/shouldForwardProp.ts
@@ -0,0 +1,11 @@
+import isPropValid from '@emotion/is-prop-valid'
+
+// context: https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default
+// there are very few cases of this between the DS and app, but this'll catch any remaining that are missed
+export function shouldForwardProp(propName, target) {
+  if (typeof target === 'string') {
+    return isPropValid(propName)
+  }
+
+  return true
+}
diff --git a/www/yarn.lock b/www/yarn.lock
index bd55c2079..a592b599e 100644
--- a/www/yarn.lock
+++ b/www/yarn.lock
@@ -4025,9 +4025,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@pluralsh/design-system@npm:3.74.3":
-  version: 3.74.3
-  resolution: "@pluralsh/design-system@npm:3.74.3"
+"@pluralsh/design-system@npm:3.74.4":
+  version: 3.74.4
+  resolution: "@pluralsh/design-system@npm:3.74.4"
   dependencies:
     "@floating-ui/react-dom-interactions": 0.13.3
     "@loomhq/loom-embed": 1.5.0
@@ -4073,7 +4073,7 @@ __metadata:
     react-dom: ">=18.3.1"
     react-transition-group: ">=4.4.5"
     styled-components: ">=6.1.13"
-  checksum: 8d9246768e5f2cb42011aff03b4e54d25d0eb9962f084e849219502567a491d2f051dd7cd8869ac4dc4531f9956cb7e0daf767f42bd4843797d68523733a937d
+  checksum: b50d9b7f2fda9e769911de1895ed83318771e7fae74fb6c4c3ce8ca88562f4890d4859e806af1bf8fc3175841ca1639e7b64376d1e6d7966d980a8c2e5fcd01a
   languageName: node
   linkType: hard
 
@@ -20092,7 +20092,7 @@ __metadata:
     "@nivo/geo": 0.83.0
     "@nivo/line": 0.83.0
     "@octokit/core": 4.2.1
-    "@pluralsh/design-system": 3.74.3
+    "@pluralsh/design-system": 3.74.4
     "@pluralsh/eslint-config-typescript": 2.5.150
     "@pluralsh/stylelint-config": 2.0.10
     "@react-spring/web": 9.7.3