add tooltips to instance oidc and managers

Author: jsladerman

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",

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>

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 */}

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}

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
+}

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