refactor(DrillDetailTableControls): Upgrade DrillDetailTableControls component to Ant Design 5

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.stories.tsx

@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import TableControls, { TableControlsProps } from './DrillDetailTableControls';
+
+export default {
+  title: 'DrillDetailTableControls',
+  component: TableControls,
+};
+
+export const InteractiveTableControls = (args: TableControlsProps) => (
+  <TableControls {...args} />
+);
+
+InteractiveTableControls.args = {
+  totalCount: 100,
+  filters: [
+    { op: '>', col: 'tz_offset', val: 200 },
+    { op: '==', col: 'platform', val: 'GB' },
+  ],
+};

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.test.tsx

@@ -101,7 +101,6 @@ test('should remove the filters on close', () => {
   expect(screen.getByText('platform')).toBeInTheDocument();
   expect(screen.getByText('GB')).toBeInTheDocument();
 
-  userEvent.click(screen.getByRole('img', { name: 'close' }));
-
+  userEvent.click(screen.getByRole('button', { name: 'close' }));
   expect(setFilters).toHaveBeenCalledWith([]);
 });

superset-frontend/src/components/Chart/DrillDetail/DrillDetailTableControls.tsx

@@ -18,7 +18,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { Tag } from 'antd';
+import { Tag } from 'src/components/Tags';
 import {
   BinaryQueryObjectFilterClause,
   css,
@@ -29,19 +29,21 @@ import {
 import RowCountLabel from 'src/explore/components/RowCountLabel';
 import Icons from 'src/components/Icons';
 
+export type TableControlsProps = {
+  filters: BinaryQueryObjectFilterClause[];
+  setFilters: (filters: BinaryQueryObjectFilterClause[]) => void;
+  totalCount?: number;
+  loading: boolean;
+  onReload: () => void;
+};
+
 export default function TableControls({
   filters,
   setFilters,
   totalCount,
   loading,
   onReload,
-}: {
-  filters: BinaryQueryObjectFilterClause[];
-  setFilters: (filters: BinaryQueryObjectFilterClause[]) => void;
-  totalCount?: number;
-  loading: boolean;
-  onReload: () => void;
-}) {
+}: TableControlsProps) {
   const theme = useTheme();
   const filterMap: Record<string, BinaryQueryObjectFilterClause> = useMemo(
     () =>
@@ -89,23 +91,16 @@ export default function TableControls({
         css={css`
           display: flex;
           flex-wrap: wrap;
-          margin-bottom: -${theme.gridUnit * 4}px;
         `}
       >
-        {filterTags.map(({ colName, val }) => (
+        {filterTags.map(({ colName, val }, index) => (
           <Tag
-            closable
-            onClose={removeFilter.bind(null, colName)}
+            editable
+            onDelete={removeFilter.bind(null, colName)}
+            index={index}
+            id={index}
             key={colName}
-            css={css`
-              height: ${theme.gridUnit * 6}px;
-              display: flex;
-              align-items: center;
-              padding: ${theme.gridUnit / 2}px ${theme.gridUnit * 2}px;
-              margin-right: ${theme.gridUnit * 4}px;
-              margin-bottom: ${theme.gridUnit * 4}px;
-              line-height: 1.2;
-            `}
+            name={`${colName}=${val}`}
             data-test="filter-col"
           >
             <span

superset-frontend/src/components/Tags/Tag.tsx

@@ -43,11 +43,13 @@ const Tag = ({
   editable = false,
   onClick = undefined,
   toolTipTitle = name,
+  children,
+  ...rest
 }: TagType) => {
   const isLongTag = useMemo(() => name.length > MAX_DISPLAY_CHAR, [name]);
   const tagDisplay = isLongTag ? `${name.slice(0, MAX_DISPLAY_CHAR)}...` : name;
 
-  const handleClose = () => (index ? onDelete?.(index) : null);
+  const handleClose = () => (index !== undefined ? onDelete?.(index) : null);
 
   const whatRole = onClick ? (!id ? 'button' : 'link') : undefined;
 
@@ -59,25 +61,32 @@ const Tag = ({
             key={id}
             closable={editable}
             onClose={handleClose}
-            color="blue"
             closeIcon={editable ? CustomCloseIcon : undefined}
+            {...rest}
           >
-            {tagDisplay}
+            {children || tagDisplay}
           </StyledTag>
         </Tooltip>
       ) : (
         <Tooltip title={toolTipTitle} key={toolTipTitle}>
-          <StyledTag data-test="tag" key={id} onClick={onClick} role={whatRole}>
+          <StyledTag
+            data-test="tag"
+            key={id}
+            onClick={onClick}
+            role={whatRole}
+            {...rest}
+          >
+            {' '}
             {id ? (
               <a
                 href={`/superset/all_entities/?id=${id}`}
                 target="_blank"
                 rel="noreferrer"
               >
-                {tagDisplay}
+                {children || tagDisplay}
               </a>
             ) : (
-              tagDisplay
+              children || tagDisplay
             )}
           </StyledTag>
         </Tooltip>

superset-frontend/src/types/TagType.ts

@@ -28,6 +28,7 @@ export interface TagType {
   name: string;
   index?: number | undefined;
   toolTipTitle?: string;
+  children?: React.ReactNode;
 }
 
 export default TagType;