[SharedUX] SCSS migration saved_objects_tagging plugin (#215410)

## Summary

This PR is a part of SCSS migration of SharedUX team code.
Here is a [meta](https://github.com/elastic/kibana-team/issues/1417)
issue for it.

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/assign_flyout.scss

@@ -1,12 +0,0 @@
-.tagAssignFlyout__selectionIcon {
-  margin-right: $euiSizeM;
-  margin-left: $euiSizeM;
-}
-
-.tagAssignFlyout_searchContainer {
-  padding: $euiSize $euiSizeL $euiSizeS;
-}
-
-.tagAssignFlyout__actionBar {
-  margin-top: $euiSizeXS;
-}

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/assign_flyout.tsx

@@ -22,8 +22,6 @@ import {
 } from './components';
 import { getKey, sortByStatusAndTitle } from './utils';
 
-import './assign_flyout.scss';
-
 interface AssignFlyoutProps {
   tagIds: string[];
   allowedTypes: string[];
@@ -148,7 +146,7 @@ export const AssignFlyout: FC<AssignFlyoutProps> = ({
       <EuiFlyoutHeader hasBorder>
         <AssignFlyoutHeader tagIds={tagIds} tagCache={tagCache} />
       </EuiFlyoutHeader>
-      <EuiFlyoutHeader hasBorder className="tagAssignFlyout_searchContainer">
+      <EuiFlyoutHeader hasBorder>
         <AssignFlyoutSearchBar
           onChange={({ query: newQuery }) => {
             setQuery(newQuery);

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/components/action_bar.tsx

@@ -8,6 +8,8 @@
 import React, { FC } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '@elastic/eui';
 
 export interface AssignFlyoutActionBarProps {
   resultCount: number;
@@ -27,7 +29,7 @@ export const AssignFlyoutActionBar: FC<AssignFlyoutActionBarProps> = ({
   onDeselectAll,
 }) => {
   return (
-    <div className="tagAssignFlyout__actionBar">
+    <div css={styles}>
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center" gutterSize="m">
         <EuiFlexItem grow={false}>
           <EuiText size="xs" color="subdued">
@@ -98,3 +100,12 @@ export const AssignFlyoutActionBar: FC<AssignFlyoutActionBarProps> = ({
     </div>
   );
 };
+
+const styles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    marginTop: euiTheme.size.xs,
+    '.tagMgt__actionBarDivider': {
+      height: euiTheme.size.base,
+      borderRight: euiTheme.border.thin,
+    },
+  });

x-pack/platform/plugins/shared/saved_objects_tagging/public/components/assign_flyout/components/result_list.tsx

@@ -7,6 +7,8 @@
 
 import React, { FC } from 'react';
 import { EuiIcon, EuiSelectable, EuiSelectableOption, EuiText } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { AssignableObject } from '../../../../common/assignments';
 import { AssignmentAction, AssignmentOverrideMap, AssignmentStatusMap } from '../types';
@@ -62,6 +64,7 @@ export const AssignFlyoutResultList: FC<AssignFlyoutResultListProps> = ({
 
   return (
     <EuiSelectable<ResultInternals>
+      css={styles}
       height="full"
       data-test-subj="assignFlyoutResultList"
       aria-label="Saved objects which can be assigned to this tag"
@@ -107,3 +110,10 @@ const ResultActionLabel: FC<{ action: AssignmentAction }> = ({ action }) => {
     </EuiText>
   );
 };
+
+const styles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    '.tagAssignFlyout__selectionIcon': {
+      margin: ` 0 ${euiTheme.size.m}`,
+    },
+  });

x-pack/platform/plugins/shared/saved_objects_tagging/public/management/components/_action_bar.scss

@@ -1,17 +0,0 @@
-.tagMgt__actionBar + .euiSpacer {
-  display: none;
-}
-
-.tagMgt__actionBarDivider {
-  height: $euiSize;
-  border-right: $euiBorderThin;
-}
-
-.tagMgt__actionBar {
-  border-bottom: $euiBorderThin;
-  padding-bottom: $euiSizeS;
-}
-
-.tagMgt__actionBarIcon {
-  margin-left: $euiSizeXS;
-}

x-pack/platform/plugins/shared/saved_objects_tagging/public/management/components/action_bar.tsx

@@ -6,6 +6,7 @@
  */
 
 import React, { useState, useCallback, useMemo, FC } from 'react';
+import { css } from '@emotion/react';
 import {
   EuiPopover,
   EuiFlexItem,
@@ -15,12 +16,11 @@ import {
   EuiText,
   EuiLink,
   EuiIcon,
+  UseEuiTheme,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { TagBulkAction } from '../types';
 
-import './_action_bar.scss';
-
 export interface ActionBarProps {
   actions: TagBulkAction[];
   totalCount: number;
@@ -70,7 +70,7 @@ export const ActionBar: FC<ActionBarProps> = ({
   }, [actions, onActionSelected, closePopover]);
 
   return (
-    <div className="tagMgt__actionBar">
+    <div css={styles}>
       <EuiFlexGroup justifyContent="flexStart" alignItems="center" gutterSize="m">
         <EuiFlexItem grow={false}>
           <EuiText size="xs" color="subdued">
@@ -121,3 +121,16 @@ export const ActionBar: FC<ActionBarProps> = ({
     </div>
   );
 };
+
+const styles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    borderBottom: euiTheme.border.thin,
+    paddingBotton: euiTheme.size.s,
+    '.tagMgt__actionBarIcon': {
+      marginLeft: euiTheme.size.xs,
+    },
+    '.tagMgt__actionBarDivider': {
+      height: euiTheme.size.base,
+      borderRight: euiTheme.border.thin,
+    },
+  });

x-pack/platform/plugins/shared/saved_objects_tagging/tsconfig.json

@@ -3,11 +3,7 @@
   "compilerOptions": {
     "outDir": "target/types",
   },
-  "include": [
-    "common/**/*",
-    "public/**/*",
-    "server/**/*",
-  ],
+  "include": ["common/**/*", "public/**/*", "server/**/*", "../../../../../typings/emotion.d.ts"],
   "kbn_references": [
     "@kbn/core",
     "@kbn/usage-collection-plugin",
@@ -24,7 +20,7 @@
     "@kbn/core-notifications-browser",
     "@kbn/react-kibana-context-render",
     "@kbn/react-kibana-mount",
-    "@kbn/core-lifecycle-browser",
+    "@kbn/core-lifecycle-browser"
   ],
   "exclude": [
     "target/**/*",