diff --git a/superset-frontend/src/components/TableSelector.less b/superset-frontend/src/components/WarningIconWithTooltip/WarningIconWithTooltip.stories.tsx
similarity index 60%
rename from superset-frontend/src/components/TableSelector.less
rename to superset-frontend/src/components/WarningIconWithTooltip/WarningIconWithTooltip.stories.tsx
index c5c1c11e4..99a5c1ea3 100644
--- a/superset-frontend/src/components/TableSelector.less
+++ b/superset-frontend/src/components/WarningIconWithTooltip/WarningIconWithTooltip.stories.tsx
@@ -16,27 +16,29 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-@import '../../stylesheets/less/variables.less';
+import React from 'react';
+import WarningIconWithTooltip, { WarningIconWithTooltipProps } from '.';
 
-.TableSelector .fa-refresh {
-  padding-left: 9px;
-}
+export default {
+  title: 'WarningIconWithTooltip',
+  component: WarningIconWithTooltip,
+};
 
-.TableSelector .section {
-  padding-bottom: 5px;
-  display: flex;
-  flex-direction: row;
-}
+export const InteractiveWarningIcon = (args: WarningIconWithTooltipProps) => (
+  <div css={{ margin: 40 }}>
+    <WarningIconWithTooltip {...args} />
+  </div>
+);
 
-.TableSelector .select {
-  flex-grow: 1;
-}
+InteractiveWarningIcon.args = {
+  warningMarkdown: 'Markdown example',
+  size: 20,
+};
 
-.TableSelector .divider {
-  border-bottom: 1px solid @gray-bg;
-  margin: 15px 0;
-}
-
-.TableLabel {
-  white-space: nowrap;
-}
+InteractiveWarningIcon.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};
diff --git a/superset-frontend/src/components/WarningIconWithTooltip.tsx b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
similarity index 88%
rename from superset-frontend/src/components/WarningIconWithTooltip.tsx
rename to superset-frontend/src/components/WarningIconWithTooltip/index.tsx
index 616d43d1d..abd57d3f3 100644
--- a/superset-frontend/src/components/WarningIconWithTooltip.tsx
+++ b/superset-frontend/src/components/WarningIconWithTooltip/index.tsx
@@ -17,11 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { supersetTheme, SafeMarkdown } from '@superset-ui/core';
+import { useTheme, SafeMarkdown } from '@superset-ui/core';
 import Icon from 'src/components/Icon';
 import { Tooltip } from 'src/components/Tooltip';
 
-interface WarningIconWithTooltipProps {
+export interface WarningIconWithTooltipProps {
   warningMarkdown: string;
   size?: number;
 }
@@ -30,13 +30,14 @@ function WarningIconWithTooltip({
   warningMarkdown,
   size = 24,
 }: WarningIconWithTooltipProps) {
+  const theme = useTheme();
   return (
     <Tooltip
       id="warning-tooltip"
       title={<SafeMarkdown source={warningMarkdown} />}
     >
       <Icon
-        color={supersetTheme.colors.alert.base}
+        color={theme.colors.alert.base}
         height={size}
         width={size}
         name="alert-solid"