Browse Source

fix(toolbar): Do not import Button into toolbar (#80880)

Not all core components are supported inside the
app/components/toolbar/* folder, Button is one of them.

What's going on inside this folder is we've created a new react context,
and mounted the toolbar into it. So stuff like `useOrganization` and
`useRoutes` doesn't work because we didn't inject the providers. So
instead we need to make our own buttons and any other core components
that depend on these, also core, providers.

--- 

By using `<button>` instead of `<Button>` the Custom Feature Flag
override slide-out is fixed, and so is the "Overrides" list view.

These were previously working on dev but not prod. The reason is that
there's a `process.env.NODE_ENV` invariant inside the core react context
codepath, which runs differently depending on the build :(
Ryan Albrecht 3 months ago
parent
commit
5d71b5a16d

+ 13 - 3
static/app/components/devtoolbar/components/featureFlags/customOverride.tsx

@@ -1,6 +1,7 @@
 import {useContext, useState} from 'react';
+import {css} from '@emotion/react';
 
-import {Button} from 'sentry/components/button';
+import {resetButtonCss} from 'sentry/components/devtoolbar/styles/reset';
 import Input from 'sentry/components/input';
 import Switch from 'sentry/components/switchButton';
 import {IconAdd} from 'sentry/icons';
@@ -59,9 +60,18 @@ export default function CustomOverride({
         }}
         css={{background: 'white'}}
       />
-      <Button size="xs" type="submit" css={{width: '28px'}} disabled={!name.length}>
+      <button
+        type="submit"
+        css={[
+          resetButtonCss,
+          css`
+            width: 28px;
+          `,
+        ]}
+        disabled={!name.length}
+      >
         <IconAdd />
-      </Button>
+      </button>
     </form>
   );
 }

+ 9 - 5
static/app/components/devtoolbar/components/featureFlags/featureFlagsPanel.tsx

@@ -1,6 +1,6 @@
 import {type Dispatch, Fragment, type SetStateAction, useState} from 'react';
+import {css} from '@emotion/react';
 
-import {Button} from 'sentry/components/button';
 import {resetButtonCss, resetFlexRowCss} from 'sentry/components/devtoolbar/styles/reset';
 import Input from 'sentry/components/input';
 import {PanelTable} from 'sentry/components/panels/panelTable';
@@ -203,9 +203,13 @@ function FlagTable({prefilter, searchTerm}: {prefilter: Prefilter; searchTerm: s
             {display: 'block', textAlign: 'center'},
           ]}
         >
-          <Button
-            size="xs"
-            css={{width: '100%'}}
+          <button
+            css={[
+              resetButtonCss,
+              css`
+                width: 100%;
+              `,
+            ]}
             onClick={() => {
               clearOverrides();
             }}
@@ -222,7 +226,7 @@ function FlagTable({prefilter, searchTerm}: {prefilter: Prefilter; searchTerm: s
             >
               <IconClose isCircled size="xs" /> Remove All
             </span>
-          </Button>
+          </button>
         </div>
       )}
     </span>