simpler workaround

Author: paula-stacho

packages/compass-components/src/components/leafygreen.tsx

@@ -38,7 +38,8 @@ import { RadioBox, RadioBoxGroup } from '@leafygreen-ui/radio-box-group';
 import { Radio, RadioGroup } from '@leafygreen-ui/radio-group';
 import {
   SegmentedControl,
-  SegmentedControlOption,
+  SegmentedControlOption as LGSegmentedControlOption,
+  type SegmentedControlOptionProps,
 } from '@leafygreen-ui/segmented-control';
 import { Select, Option, OptionGroup } from '@leafygreen-ui/select';
 import {
@@ -85,36 +86,27 @@ import {
   Overline as LGOverline,
   Label as LGLabel,
   Description as LGDescription,
+  type LabelProps,
+  type H1Props,
+  type H2Props,
+  type H3Props,
+  type SubtitleProps,
+  type BodyProps,
+  type OverlineProps,
+  type DescriptionProps,
 } from '@leafygreen-ui/typography';
 
-function createPolymorphicWrapper<T extends React.ElementType = any>(
-  Component: React.ComponentType<any>,
-  displayName?: string
-) {
-  const WrappedComponent = React.forwardRef((props: any, ref: any) => {
-    return React.createElement(Component, { ...props, ref }) as JSX.Element;
-  });
-
-  WrappedComponent.displayName = displayName;
-
-  return WrappedComponent as typeof Component;
-}
-// @ts-expect-error sorry, LG needs to fix it's types
-const H1 = createPolymorphicWrapper(LGH1, 'H1');
-// @ts-expect-error sorry, LG needs to fix it's types
-const H2 = createPolymorphicWrapper(LGH2, 'H2');
-// @ts-expect-error sorry, LG needs to fix it's types
-const H3 = createPolymorphicWrapper(LGH3, 'H3');
-// @ts-expect-error sorry, LG needs to fix it's types
-const Subtitle = createPolymorphicWrapper(LGSubtitle, 'Subtitle');
-// @ts-expect-error sorry, LG needs to fix it's types
-const Body = createPolymorphicWrapper(LGBody, 'Body');
-// @ts-expect-error sorry, LG needs to fix it's types
-const Overline = createPolymorphicWrapper(LGOverline, 'Overline');
-// @ts-expect-error sorry, LG needs to fix it's types
-const Label = createPolymorphicWrapper(LGLabel, 'Label');
-// @ts-expect-error sorry, LG needs to fix it's types
-const Description = createPolymorphicWrapper(LGDescription, 'Description');
+// Workaround until https://jira.mongodb.org/browse/LG-5354 is resolved
+const H1 = LGH1 as React.FC<H1Props>;
+const H2 = LGH2 as React.FC<H2Props>;
+const H3 = LGH3 as React.FC<H3Props>;
+const Subtitle = LGSubtitle as React.FC<SubtitleProps>;
+const Body = LGBody as React.FC<BodyProps>;
+const Overline = LGOverline as React.FC<OverlineProps>;
+const Description = LGDescription as React.FC<DescriptionProps>;
+const Label = LGLabel as React.FC<LabelProps>;
+const SegmentedControlOption =
+  LGSegmentedControlOption as React.FC<SegmentedControlOptionProps>;
 
 import {
   Combobox,

packages/compass-data-modeling/src/components/diagram-card.tsx

@@ -100,7 +100,6 @@ export function DiagramCard({
         <Subtitle
           as="div"
           className={cx(cardTitle, darkmode ? cardTitleDark : cardTitleLight)}
-          title={diagram.name}
         >
           {diagram.name}
         </Subtitle>

packages/compass-generative-ai/src/components/ai-feedback.tsx

@@ -80,8 +80,8 @@ type AIFeedbackProps = {
 function AIFeedback({ onSubmitFeedback }: AIFeedbackProps) {
   const darkMode = useDarkMode();
 
-  const feedbackPositiveButtonRef = useRef<HTMLInputElement>(null);
-  const feedbackNegativeButtonRef = useRef<HTMLInputElement>(null);
+  const feedbackPositiveButtonRef = useRef<HTMLButtonElement>(null);
+  const feedbackNegativeButtonRef = useRef<HTMLButtonElement>(null);
 
   const [chosenFeedbackOption, setChosenFeedbackOption] = useState<
     'none' | 'positive' | 'negative'

packages/compass-global-writes/src/store/reducer.ts

@@ -625,7 +625,8 @@ export const createShardKey = (
 
 // Exporting this for test only to stub it and set
 // its value. This enables to test cancelShardingaction.
-export const showConfirmation = showConfirmationModal;
+export const showConfirmation: typeof showConfirmationModal =
+  showConfirmationModal;
 
 export const cancelSharding = (): GlobalWritesThunkAction<
   Promise<void>,

packages/compass-indexes/src/modules/regular-indexes.ts

@@ -620,7 +620,8 @@ const failedIndexRemoved = (
 
 // Exporting this for test only to stub it and set
 // its value. This enables to test dropIndex action.
-export const showConfirmation = showConfirmationModal;
+export const showConfirmation: typeof showConfirmationModal =
+  showConfirmationModal;
 
 export const dropFailedIndex = (
   indexName: string

packages/compass-indexes/src/modules/search-indexes.ts

@@ -653,7 +653,8 @@ export const pollSearchIndexes = (): IndexesThunkAction<
 
 // Exporting this for test only to stub it and set
 // its value. This enables to test dropSearchIndex action.
-export const showConfirmation = showConfirmationModal;
+export const showConfirmation: typeof showConfirmationModal =
+  showConfirmationModal;
 
 export const dropSearchIndex = (
   name: string

packages/compass-saved-aggregations-queries/src/components/saved-item-card.tsx

@@ -229,7 +229,6 @@ export const SavedItemCard: React.FunctionComponent<
       <Subtitle
         as="div"
         className={cx(cardName, darkMode ? cardNameDark : cardNameLight)}
-        title={name}
       >
         {name}
       </Subtitle>

packages/compass-sidebar/src/components/connections-filter-popover.tsx

@@ -91,7 +91,7 @@ export default function ConnectionsFilterPopover({
       >
         Filter connections
       </Tooltip>
-      <InteractivePopover
+      <InteractivePopover<HTMLButtonElement>
         open={open}
         setOpen={setOpen}
         containerClassName={containerStyles}

packages/compass-telemetry/src/telemetry-events.ts

@@ -2709,7 +2709,8 @@ type ScreenEvent = ConnectionScopedEvent<{
       | 'shell_info_modal'
       | 'update_search_index_modal'
       | 'end_of_life_mongodb_modal'
-      | 'export_diagram_modal';
+      | 'export_diagram_modal'
+      | `${string}_search_index_modal`;
   };
 }>;
 

packages/compass-welcome/src/components/web-welcome-tab.tsx

@@ -42,7 +42,7 @@ export default function WebWelcomeTab() {
           {numConnections === 0 && (
             <>
               <Button
-                as={Link}
+                as={'a'}
                 data-testid="add-new-atlas-cluster-button"
                 variant={ButtonVariant.Primary}
                 href={'#/clusters/starterTemplates'}