feat: Frontend tagging (#20876)

Co-authored-by: cccs-nik <68961854+cccs-nik@users.noreply.github.com>
Co-authored-by: GITHUB_USERNAME <EMAIL>

superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts

@@ -61,6 +61,7 @@ export enum FeatureFlag {
   SQL_VALIDATORS_BY_ENGINE = 'SQL_VALIDATORS_BY_ENGINE',
   THUMBNAILS = 'THUMBNAILS',
   USE_ANALAGOUS_COLORS = 'USE_ANALAGOUS_COLORS',
+  TAGGING_SYSTEM = 'TAGGING_SYSTEM',
   UX_BETA = 'UX_BETA',
   VERSIONED_EXPORT = 'VERSIONED_EXPORT',
   SSH_TUNNELING = 'SSH_TUNNELING',

superset-frontend/src/components/ListView/types.ts

@@ -118,4 +118,7 @@ export enum FilterOperator {
   datasetIsCertified = 'dataset_is_certified',
   dashboardHasCreatedBy = 'dashboard_has_created_by',
   chartHasCreatedBy = 'chart_has_created_by',
+  dashboardTags = 'dashboard_tags',
+  chartTags = 'chart_tags',
+  savedQueryTags = 'saved_query_tags',
 }

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

@@ -0,0 +1,35 @@
+/**
+ * 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 React from 'react';
+import { render } from 'spec/helpers/testing-library';
+import TagType from 'src/types/TagType';
+import Tag from './Tag';
+
+const mockedProps: TagType = {
+  name: 'example-tag',
+  id: 1,
+  onDelete: undefined,
+  editable: false,
+  onClick: undefined,
+};
+
+test('should render', () => {
+  const { container } = render(<Tag {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});

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

@@ -0,0 +1,86 @@
+/**
+ * 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 { styled } from '@superset-ui/core';
+import TagType from 'src/types/TagType';
+import AntdTag from 'antd/lib/tag';
+import React, { useMemo } from 'react';
+import { Tooltip } from 'src/components/Tooltip';
+
+const StyledTag = styled(AntdTag)`
+  ${({ theme }) => `
+  margin-top: ${theme.gridUnit}px;
+  margin-bottom: ${theme.gridUnit}px;
+  font-size: ${theme.typography.sizes.s}px;
+  `};
+`;
+
+const Tag = ({
+  name,
+  id,
+  index = undefined,
+  onDelete = undefined,
+  editable = false,
+  onClick = undefined,
+}: TagType) => {
+  const isLongTag = useMemo(() => name.length > 20, [name]);
+
+  const handleClose = () => (index ? onDelete?.(index) : null);
+
+  const tagElem = (
+    <>
+      {editable ? (
+        <StyledTag
+          key={id}
+          closable={editable}
+          onClose={handleClose}
+          color="blue"
+        >
+          {isLongTag ? `${name.slice(0, 20)}...` : name}
+        </StyledTag>
+      ) : (
+        <StyledTag role="link" key={id} onClick={onClick}>
+          {id ? (
+            <a
+              href={`/superset/tags/?tags=${name}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {isLongTag ? `${name.slice(0, 20)}...` : name}
+            </a>
+          ) : isLongTag ? (
+            `${name.slice(0, 20)}...`
+          ) : (
+            name
+          )}
+        </StyledTag>
+      )}
+    </>
+  );
+
+  return isLongTag ? (
+    <Tooltip title={name} key={name}>
+      {tagElem}
+    </Tooltip>
+  ) : (
+    tagElem
+  );
+};
+
+export default Tag;

superset-frontend/src/components/Tags/TagsList.stories.tsx

@@ -0,0 +1,58 @@
+/**
+ * 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 React from 'react';
+import TagType from 'src/types/TagType';
+import { TagsList } from '.';
+import { TagsListProps } from './TagsList';
+
+export default {
+  title: 'Tags',
+  component: TagsList,
+};
+
+export const InteractiveTags = ({ tags, editable, maxTags }: TagsListProps) => (
+  <TagsList tags={tags} editable={editable} maxTags={maxTags} />
+);
+
+const tags: TagType[] = [
+  { name: 'tag1' },
+  { name: 'tag2' },
+  { name: 'tag3' },
+  { name: 'tag4' },
+  { name: 'tag5' },
+  { name: 'tag6' },
+];
+
+const editable = true;
+
+const maxTags = 3;
+
+InteractiveTags.args = {
+  tags,
+  editable,
+  maxTags,
+};
+
+InteractiveTags.story = {
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+};

superset-frontend/src/components/Tags/TagsList.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * 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 React from 'react';
+import { render, waitFor } from 'spec/helpers/testing-library';
+import TagsList, { TagsListProps } from './TagsList';
+
+const testTags = [
+  {
+    name: 'example-tag1',
+    id: 1,
+  },
+  {
+    name: 'example-tag2',
+    id: 2,
+  },
+  {
+    name: 'example-tag3',
+    id: 3,
+  },
+  {
+    name: 'example-tag4',
+    id: 4,
+  },
+  {
+    name: 'example-tag5',
+    id: 5,
+  },
+];
+
+const mockedProps: TagsListProps = {
+  tags: testTags,
+  onDelete: undefined,
+  maxTags: 5,
+};
+
+const getElementsByClassName = (className: string) =>
+  document.querySelectorAll(className)! as NodeListOf<HTMLElement>;
+
+const findAllTags = () => waitFor(() => getElementsByClassName('.ant-tag'));
+
+test('should render', () => {
+  const { container } = render(<TagsList {...mockedProps} />);
+  expect(container).toBeInTheDocument();
+});
+
+test('should render 5 elements', async () => {
+  render(<TagsList {...mockedProps} />);
+  const tagsListItems = await findAllTags();
+  expect(tagsListItems).toHaveLength(5);
+  expect(tagsListItems[0]).toHaveTextContent(testTags[0].name);
+  expect(tagsListItems[1]).toHaveTextContent(testTags[1].name);
+  expect(tagsListItems[2]).toHaveTextContent(testTags[2].name);
+  expect(tagsListItems[3]).toHaveTextContent(testTags[3].name);
+  expect(tagsListItems[4]).toHaveTextContent(testTags[4].name);
+});
+
+test('should render 3 elements when maxTags is set to 3', async () => {
+  render(<TagsList {...mockedProps} maxTags={3} />);
+  const tagsListItems = await findAllTags();
+  expect(tagsListItems).toHaveLength(3);
+  expect(tagsListItems[2]).toHaveTextContent('+3...');
+});

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

@@ -0,0 +1,112 @@
+/**
+ * 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 React, { useMemo, useState } from 'react';
+import { styled } from '@superset-ui/core';
+import TagType from 'src/types/TagType';
+import Tag from './Tag';
+
+export type TagsListProps = {
+  tags: TagType[];
+  editable?: boolean;
+  /**
+   * OnDelete:
+   * Only applies when editable is true
+   * Callback for when a tag is deleted
+   */
+  onDelete?: ((index: number) => void) | undefined;
+  maxTags?: number | undefined;
+};
+
+const TagsDiv = styled.div`
+  max-width: 100%;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+
+const TagsList = ({
+  tags,
+  editable = false,
+  onDelete,
+  maxTags,
+}: TagsListProps) => {
+  const [tempMaxTags, setTempMaxTags] = useState<number | undefined>(maxTags);
+
+  const handleDelete = (index: number) => {
+    onDelete?.(index);
+  };
+
+  const expand = () => setTempMaxTags(undefined);
+
+  const collapse = () => setTempMaxTags(maxTags);
+
+  const tagsIsLong: boolean | null = useMemo(
+    () => (tempMaxTags ? tags.length > tempMaxTags : null),
+    [tags.length, tempMaxTags],
+  );
+
+  const extraTags: number | null = useMemo(
+    () =>
+      typeof tempMaxTags === 'number' ? tags.length - tempMaxTags + 1 : null,
+    [tagsIsLong, tags.length, tempMaxTags],
+  );
+
+  return (
+    <TagsDiv className="tag-list">
+      {tagsIsLong && typeof tempMaxTags === 'number' ? (
+        <>
+          {tags.slice(0, tempMaxTags - 1).map((tag: TagType, index) => (
+            <Tag
+              id={tag.id}
+              key={tag.id}
+              name={tag.name}
+              index={index}
+              onDelete={handleDelete}
+              editable={editable}
+            />
+          ))}
+          {tags.length > tempMaxTags ? (
+            <Tag name={`+${extraTags}...`} onClick={expand} />
+          ) : null}
+        </>
+      ) : (
+        <>
+          {tags.map((tag: TagType, index) => (
+            <Tag
+              id={tag.id}
+              key={tag.id}
+              name={tag.name}
+              index={index}
+              onDelete={handleDelete}
+              editable={editable}
+            />
+          ))}
+          {maxTags ? (
+            tags.length > maxTags ? (
+              <Tag name="..." onClick={collapse} />
+            ) : null
+          ) : null}
+        </>
+      )}
+    </TagsDiv>
+  );
+};
+
+export default TagsList;