More emotionjs migration changes (#4362)

# What this PR does - Get rid of some of the hardcoded css variables defined in `vars.css`, specifically tags-related, but not only - Migrated a few more components to emotion
grafana · May 27, 2024 · 2b60013 · 2b60013
1 parent 00e4c5d
commit 2b60013
Show file tree

Hide file tree

Showing 68 changed files with 1,674 additions and 1,449 deletions.
diff --git a/src/assets/style/vars.css b/src/assets/style/vars.css
@@ -7,12 +7,6 @@
   --always-gray: #ccccdc;
   --title-marginBottom: 16px;
   --opacity: 0.5;
-  --tag-danger: #e02f44;
-  --tag-warning: #c69b06;
-  --tag-primary: #299c46;
-  --tag-secondary: #464c54;
-  --tag-secondary-transparent: rgba(204, 204, 220, 0.07);
-  --tag-border-link: rgba(56, 113, 220, 0.2);
 }
 
 .theme-light {
@@ -32,25 +26,12 @@
   --oncall-icon-stroke-color: #fff;
   --hover-selected: #f4f5f5;
   --background-canvas: #f4f5f5;
-  --background-primary: #fff;
   --background-secondary: #f4f5f5;
   --border-medium-color: rgba(36, 41, 46, 0.3);
   --border-medium: 1px solid rgba(36, 41, 46, 0.3);
   --border-strong: 1px solid rgba(36, 41, 46, 0.4);
   --border-weak: 1px solid rgba(36, 41, 46, 0.12);
   --shadows-z3: 0 13px 20px 1px rgba(24, 26, 27, 0.18);
-  --tag-background-primary: rgba(50, 116, 217, 0.15);
-  --tag-border-primary: rgb(136, 174, 233);
-  --tag-text-primary: rgb(26, 71, 139);
-  --tag-background-warning: rgba(255, 120, 10, 0.15);
-  --tag-border-warning: rgb(255, 176, 112);
-  --tag-text-warning: rgb(163, 73, 0);
-  --tag-background-success: rgba(86, 166, 75, 0.15);
-  --tag-border-success: rgb(148, 203, 140);
-  --tag-text-success: rgb(50, 96, 43);
-  --tag-background-danger: rgba(224, 47, 68, 0.15);
-  --tag-border-danger: rgb(237, 136, 148);
-  --tag-text-danger: rgb(147, 22, 37);
   --button-background: rgba(36, 41, 46, 0.08);
   --button-hover-background: rgba(36, 41, 46, 0.15);
   --box-background: rgba(244, 245, 245);
@@ -79,25 +60,12 @@
   --hover-selected-hardcoded: #34363d;
   --oncall-icon-stroke-color: #181b1f;
   --background-canvas: #111217;
-  --background-primary: #181b1f;
   --background-secondary: #22252b;
   --border-medium-color: rgba(204, 204, 220, 0.15);
   --border-medium: 1px solid rgba(204, 204, 220, 0.15);
   --border-strong: 1px solid rgba(204, 204, 220, 0.25);
   --border-weak: 1px solid rgba(204, 204, 220, 0.07);
   --shadows-z3: 0 8px 24px rgb(1, 4, 9);
-  --tag-background-primary: rgba(87, 148, 242, 0.15);
-  --tag-border-primary: rgb(13, 72, 163);
-  --tag-text-primary: rgb(158, 193, 247);
-  --tag-background-warning: rgba(255, 152, 48, 0.15);
-  --tag-border-warning: rgb(150, 75, 0);
-  --tag-text-warning: rgb(255, 190, 124);
-  --tag-background-success: rgba(115, 191, 105, 0.15);
-  --tag-border-success: rgb(49, 100, 43);
-  --tag-text-success: rgb(165, 214, 159);
-  --tag-background-danger: rgba(242, 73, 92, 0.15);
-  --tag-border-danger: rgb(151, 11, 27);
-  --tag-text-danger: rgb(247, 144, 156);
   --box-background: rgba(10, 10, 10, 0.4);
   --working-hours-shades-color: rgba(17, 18, 23, 0.15);
   --working-hours-shades-color-light: rgba(17, 18, 23, 0.1);

diff --git a/src/components/CardButton/CardButton.tsx b/src/components/CardButton/CardButton.tsx
@@ -28,8 +28,8 @@ export const CardButton: FC<CardButtonProps> = (props) => {
       className={cx(styles.root, { [styles.rootSelected]: selected })}
       data-testid="test__cardButton"
     >
-      <div className={cx(styles.icon)}>{icon}</div>
-      <div className={cx(styles.meta)}>
+      <div className={styles.icon}>{icon}</div>
+      <div className={styles.meta}>
         <VerticalGroup spacing="xs">
           <Text type="secondary">{description}</Text>
           <Text.Title level={1}>{title}</Text.Title>

diff --git a/src/components/Collapse/Collapse.tsx b/src/components/Collapse/Collapse.tsx
@@ -50,7 +50,7 @@ export const Collapse: FC<CollapseProps> = (props) => {
         data-testid="test__toggle"
       >
         <Icon name={'angle-right'} size="xl" className={cx(styles.icon, { [bem(styles.icon, 'rotated')]: isOpen })} />
-        <div className={cx(styles.label)}> {label}</div>
+        <div className={styles.label}> {label}</div>
       </div>
       {isOpen && (
         <div className={cx(styles.content, contentClassName)} data-testid="test__children">

diff --git a/src/components/GList/GList.tsx b/src/components/GList/GList.tsx
@@ -64,7 +64,7 @@ export const GList = <T extends WithId>(props: GListProps<T>) => {
   }
 
   return (
-    <div className={cx(styles.root)}>
+    <div className={styles.root}>
       {items ? (
         items.map((item) => (
           <div

diff --git a/src/components/GTable/GTable.tsx b/src/components/GTable/GTable.tsx
@@ -116,15 +116,15 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
         key: 'check',
         title: (
           <Checkbox
-            className={cx(styles.checkbox)}
+            className={styles.checkbox}
             onChange={handleMasterCheckboxChange}
             value={data?.length > 0 && rowSelection.selectedRowKeys.length === data?.length}
           />
         ),
         render: (item: any) => {
           return (
             <Checkbox
-              className={cx(styles.checkbox)}
+              className={styles.checkbox}
               value={rowSelection.selectedRowKeys.includes(item[rowKey as string])}
               onChange={getCheckboxClickHandler(item[rowKey as string])}
             />
@@ -136,7 +136,7 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
   }, [rowSelection, columnsProp, data]);
 
   return (
-    <div className={cx(styles.root)} data-testid="test__gTable">
+    <div className={styles.root} data-testid="test__gTable">
       <Table<RT>
         expandable={expandable}
         rowKey={rowKey}
@@ -148,7 +148,7 @@ export const GTable = <RT extends DefaultRecordType = DefaultRecordType>(props:
         {...restProps}
       />
       {pagination && (
-        <div className={cx(styles.pagination)}>
+        <div className={styles.pagination}>
           <Pagination hideWhenSinglePage currentPage={page} numberOfPages={numberOfPages} onNavigate={onNavigate} />
         </div>
       )}

diff --git a/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx b/src/components/IntegrationCollapsibleTreeView/IntegrationCollapsibleTreeView.tsx
@@ -120,7 +120,7 @@ const IntegrationCollapsibleTreeItem: React.FC<{
   return (
     <div className={cx(styles.group, { [bem(styles.group, 'hidden')]: item.isHidden }, 'group')} data-emotion="group">
       <div
-        className={cx(styles.icon)}
+        className={styles.icon}
         style={{
           transform: `translateY(${item.startingElemPosition || 0})`,
         }}
@@ -139,7 +139,7 @@ const IntegrationCollapsibleTreeItem: React.FC<{
   function renderIcon() {
     if (item.isTextIcon && elementPosition) {
       return (
-        <Text type="primary" customTag="h6" className={cx(styles.numberIcon)}>
+        <Text type="primary" customTag="h6" className={styles.numberIcon}>
           {elementPosition}
         </Text>
       );

diff --git a/src/components/IntegrationInputField/IntegrationInputField.tsx b/src/components/IntegrationInputField/IntegrationInputField.tsx
@@ -35,7 +35,7 @@ export const IntegrationInputField: React.FC<IntegrationInputFieldProps> = ({
 
   return (
     <div className={cx(styles.root, { [className]: !!className })}>
-      <div className={cx(styles.inputContainer)}>{renderInputField()}</div>
+      <div className={styles.inputContainer}>{renderInputField()}</div>
 
       <div className={cx(styles.icons, iconsClassName)}>
         <HorizontalGroup spacing={'xs'}>

diff --git a/src/components/Integrations/IntegrationBlock.tsx b/src/components/Integrations/IntegrationBlock.tsx
@@ -41,7 +41,7 @@ export const IntegrationBlock: React.FC<IntegrationBlockProps> = ({
         </Block>
       )}
       {content && (
-        <div className={cx(styles.integrationBlockContent)} onClick={toggle}>
+        <div className={styles.integrationBlockContent} onClick={toggle}>
           {content}
         </div>
       )}

diff --git a/src/components/Integrations/IntegrationBlockItem.tsx b/src/components/Integrations/IntegrationBlockItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
@@ -12,8 +12,8 @@ export const IntegrationBlockItem: React.FC<IntegrationBlockItemProps> = (props)
   const styles = useStyles2(getStyles);
 
   return (
-    <div className={cx(styles.parent)} data-testid="integration-block-item">
-      <div className={cx(styles.content)}>{props.children}</div>
+    <div className={styles.parent} data-testid="integration-block-item">
+      <div className={styles.content}>{props.children}</div>
     </div>
   );
 };

diff --git a/src/components/Integrations/IntegrationTemplateBlock.tsx b/src/components/Integrations/IntegrationTemplateBlock.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, InlineLabel, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 
@@ -41,11 +41,11 @@ export const IntegrationTemplateBlock: React.FC<IntegrationTemplateBlockProps> =
   }
 
   return (
-    <div className={cx(styles.container)}>
+    <div className={styles.container}>
       <InlineLabel width={20} {...inlineLabelProps}>
         {label}
       </InlineLabel>
-      <div className={cx(styles.item)}>
+      <div className={styles.item}>
         {renderInput()}
         {isTemplateEditable && (
           <>

diff --git a/src/components/NewScheduleSelector/NewScheduleSelector.tsx b/src/components/NewScheduleSelector/NewScheduleSelector.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useState } from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { Button, Drawer, HorizontalGroup, Icon, VerticalGroup, useStyles2 } from '@grafana/ui';
 
 import { Block } from 'components/GBlock/Block';
@@ -33,9 +33,9 @@ export const NewScheduleSelector: FC<NewScheduleSelectorProps> = ({ onHide, onCr
 
   return (
     <Drawer scrollableContent title="Create new schedule" onClose={onHide} closeOnMaskClick={false}>
-      <div className={cx(styles.content)}>
+      <div className={styles.content}>
         <VerticalGroup spacing="lg">
-          <Block bordered withBackground className={cx(styles.block)}>
+          <Block bordered withBackground className={styles.block}>
             <HorizontalGroup justify="space-between">
               <HorizontalGroup spacing="md">
                 <Icon name="calendar-alt" size="xl" />
@@ -53,7 +53,7 @@ export const NewScheduleSelector: FC<NewScheduleSelectorProps> = ({ onHide, onCr
               </WithPermissionControlTooltip>
             </HorizontalGroup>
           </Block>
-          <Block bordered withBackground className={cx(styles.block)}>
+          <Block bordered withBackground className={styles.block}>
             <HorizontalGroup justify="space-between">
               <HorizontalGroup spacing="md">
                 <Icon name="download-alt" size="xl" />
@@ -69,7 +69,7 @@ export const NewScheduleSelector: FC<NewScheduleSelectorProps> = ({ onHide, onCr
               </Button>
             </HorizontalGroup>
           </Block>
-          <Block bordered withBackground className={cx(styles.block)}>
+          <Block bordered withBackground className={styles.block}>
             <HorizontalGroup justify="space-between">
               <HorizontalGroup spacing="md">
                 <Icon name="cog" size="xl" />

diff --git a/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx b/src/components/PageErrorHandlingWrapper/PageErrorHandlingWrapper.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { VerticalGroup, useStyles2 } from '@grafana/ui';
 
@@ -52,9 +52,9 @@ export const PageErrorHandlingWrapper = function ({
   const { wrongTeamNoPermissions } = errorData;
 
   return (
-    <div className={cx(styles.notFound)}>
+    <div className={styles.notFound}>
       <VerticalGroup spacing="lg" align="center">
-        <Text.Title level={1} className={cx(styles.errorCode)}>
+        <Text.Title level={1} className={styles.errorCode}>
           403
         </Text.Title>
         {wrongTeamNoPermissions && (

diff --git a/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx b/src/components/ScheduleBorderedAvatar/ScheduleBorderedAvatar.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
 
 interface ScheduleBorderedAvatarProps {
@@ -20,13 +20,13 @@ export const ScheduleBorderedAvatar = function ({
 }: ScheduleBorderedAvatarProps) {
   const styles = useStyles2(getStyles);
 
-  return <div className={cx(styles.root)}>{renderSVG()}</div>;
+  return <div className={styles.root}>{renderSVG()}</div>;
 
   function renderAvatarIcon() {
     return (
       <>
-        <div className={cx(styles.avatar)}>{renderAvatar()}</div>
-        <div className={cx(styles.icon)}>{renderIcon()}</div>
+        <div className={styles.avatar}>{renderAvatar()}</div>
+        <div className={styles.icon}>{renderIcon()}</div>
       </>
     );
   }

diff --git a/src/components/ScheduleFilters/ScheduleFilters.tsx b/src/components/ScheduleFilters/ScheduleFilters.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { InlineSwitch, useStyles2 } from '@grafana/ui';
 
@@ -35,7 +35,7 @@ export const ScheduleFilters = (props: SchedulesFiltersProps) => {
   );
 
   return (
-    <div className={cx(styles.root)}>
+    <div className={styles.root}>
       <InlineSwitch
         showLabel
         label="Highlight my shifts"

diff --git a/src/components/ScheduleQuality/ScheduleQuality.tsx b/src/components/ScheduleQuality/ScheduleQuality.tsx
@@ -41,7 +41,7 @@ export const ScheduleQuality: FC<ScheduleQualityProps> = observer(({ schedule })
 
   return (
     <>
-      <div className={cx(styles.root)} data-testid="schedule-quality">
+      <div className={styles.root} data-testid="schedule-quality">
         {relatedScheduleEscalationChains?.length > 0 && schedule?.number_of_escalation_chains > 0 && (
           <TooltipBadge
             borderType="success"
@@ -88,7 +88,7 @@ export const ScheduleQuality: FC<ScheduleQualityProps> = observer(({ schedule })
           content={<ScheduleQualityDetails quality={quality} getScheduleQualityString={getScheduleQualityString} />}
         >
           <div className={cx(utils.cursorDefault)}>
-            <Tag className={cx(styles.tag)} color={getTagSeverity()}>
+            <Tag className={styles.tag} color={getTagSeverity()}>
               Quality: <strong>{getScheduleQualityString(quality.total_score)}</strong>
             </Tag>
           </div>