lyndsiWilliams commented on code in PR #20876:
URL: https://github.com/apache/superset/pull/20876#discussion_r947216424
##########
superset-frontend/plugins/legacy-preset-chart-deckgl/package.json:
##########
@@ -48,6 +48,7 @@
"react-dom": "^16.13.1",
"react-map-gl": "^4.0.10",
"mapbox-gl": "*"
+
Review Comment:
Nit: remove this space.
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
Review Comment:
```suggestion
border-radius: ${({ theme }) => theme.borderRadius}px;
```
Border-radius values should stay within the Superset theme, the current
value is 4 as seen
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L55).
##########
superset-frontend/src/components/ObjectTags/index.tsx:
##########
@@ -0,0 +1,166 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled, SupersetClient, t } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+
+import './ObjectTags.css';
+import { TagsList } from 'src/components/Tags';
+import rison from 'rison';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import {
+ ClientErrorObject,
+ getClientErrorObject,
+} from 'src/utils/getClientErrorObject';
+import { deleteTag, fetchTags } from 'src/tags';
+
+export interface ObjectTagsProps {
+ objectType: string;
+ objectId: number;
+ includeTypes: boolean;
+ editMode: boolean;
+ maxTags: number | undefined;
+ onChange?: (tags: Tag[]) => void;
+}
+
+const StyledTagsDiv = styled.div`
+ margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ max-width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
+`;
+
+const localCache = new Map<string, any>();
+
+const cachedSupersetGet = cacheWrapper(
+ SupersetClient.get,
+ localCache,
+ ({ endpoint }) => endpoint || '',
+);
+
+type SelectTagsValue = {
+ value: string | number | undefined;
+ label: string;
+};
+
+export const tagToSelectOption = (
+ item: Tag & { table_name: string },
+): SelectTagsValue => ({
+ value: item.id,
+ label: item.name,
+});
+
+export const loadTags = async (
+ search: string,
+ page: number,
+ pageSize: number,
+) => {
+ const searchColumn = 'name';
+ const query = rison.encode({
+ filters: [{ col: searchColumn, opr: 'ct', value: search }],
+ page,
+ page_size: pageSize,
+ order_column: searchColumn,
+ order_direction: 'asc',
+ });
+
+ const getErrorMessage = ({ error, message }: ClientErrorObject) => {
+ let errorText = message || error || t('An error has occurred');
+ if (message === 'Forbidden') {
+ errorText = t('You do not have permission to edit this dashboard');
+ }
+ return errorText;
+ };
+
+ return cachedSupersetGet({
+ endpoint: `/api/v1/tag/?q=${query}`,
+ // endpoint: `/api/v1/tags/?q=${query}`,
Review Comment:
Nit: Remove this comment
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
Review Comment:
```suggestion
color: ${({ theme }) => theme.colors.grayscale.dark2};
```
Color values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
Review Comment:
```suggestion
padding: ${({ theme }) => theme.gridUnit * 1.5}px
${({ theme }) => theme.gridUnit * 2}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.tsx:
##########
@@ -362,6 +364,20 @@ function SavedQueryList({
accessor: 'changed_on_delta_humanized',
size: 'xl',
},
+ {
+ Cell: ({
+ row: {
+ original: { tags = [] },
+ },
+ }: any) => (
Review Comment:
Nit: Describe `any`
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
Review Comment:
I see that this border is being set to `0px` but also setting a color. Is
the intent to hide the border or set it as a different color?
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
Review Comment:
```suggestion
margin: 0 ${({ theme }) => theme.gridUnit * 2.5}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
Review Comment:
```suggestion
font-size: ${({ theme }) => theme.gridUnit * 3}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
Review Comment:
```suggestion
padding: ${({ theme }) => theme.gridUnit * 1.5}px
${({ theme }) => theme.gridUnit * 2}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
+}
+
+.react-tags__suggestions li mark {
+ text-decoration: underline;
+ background: none;
+ font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+ cursor: pointer;
+ background: #eee;
+}
+
+.react-tags__suggestions li.is-active {
+ background: #b7cfe0;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
Review Comment:
```suggestion
line-height: ${({ theme }) => theme.gridUnit * 5}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
Review Comment:
```suggestion
padding: 0 ${({ theme }) => theme.gridUnit * 1.75}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/Tags/TagsList.tsx:
##########
@@ -0,0 +1,111 @@
+/**
+ * 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: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
Review Comment:
```suggestion
display: flex;
flex-direction: row;
flex-wrap: wrap;
```
Emotion uses the [Stylis CSS
Preprocessor](https://github.com/thysultan/stylis), which handles these
prefixes on runtime. See [this
thread](https://github.com/emotion-js/emotion/issues/1523#issuecomment-535865527)
for more info
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
Review Comment:
```suggestion
border-radius: ${({ theme }) => theme.borderRadius}px;
```
Border-radius values should stay within the Superset theme, the current
value is 4 as seen
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L55).
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
Review Comment:
```suggestion
z-index: ${({ theme }) => theme.zIndex.max};
```
Z-index values should stay within the Superset theme.
Our theme sets the max z-index as 3000. Will that work for this, or does it
need to be higher?
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
Review Comment:
```suggestion
border: 1px solid ${({ theme }) => theme.colors.grayscale.dark2};
```
Color values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
Review Comment:
```suggestion
width: ${({ theme }) => theme.gridUnit * 60}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/Tags/Tag.tsx:
##########
@@ -0,0 +1,84 @@
+/**
+ * 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, SupersetTheme } 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 customTagStyler = (theme: SupersetTheme) => `
+ margin-top: ${theme.gridUnit * 1}px;
+ margin-bottom: ${theme.gridUnit * 1}px;
+ font-size: ${theme.typography.sizes.s}px;
+`;
+
+const StyledTag = styled(AntdTag)`
+ ${({ theme }) => customTagStyler(theme)}}
+`;
Review Comment:
```suggestion
const StyledTag = styled(AntdTag)`
margin-top: ${({ theme }) => theme.gridUnit}px;
margin-bottom: ${({ theme }) => theme.gridUnit}px;
font-size: ${({ theme }) => theme.typography.sizes.s}px;
`;
```
Nit: Combine these `const`s and remove ` * 1`
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
Review Comment:
```suggestion
@media screen and (min-width: ${({ theme }) => theme.gridUnit * 7.5}em) {
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
Review Comment:
```suggestion
@media screen and (min-width: ${({ theme }) => theme.gridUnit * 7.5}em) {
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
+}
+
+.react-tags__suggestions li mark {
+ text-decoration: underline;
+ background: none;
+ font-weight: 600;
Review Comment:
```suggestion
font-weight: ${({ theme }) => theme.typography.weights.bold};
```
Font-weight values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
+}
+
+.react-tags__suggestions li mark {
+ text-decoration: underline;
+ background: none;
+ font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+ cursor: pointer;
+ background: #eee;
+}
+
+.react-tags__suggestions li.is-active {
+ background: #b7cfe0;
+}
+
+.react-tags__suggestions li.is-disabled {
+ opacity: 0.5;
Review Comment:
```suggestion
opacity: calc(${({ theme }) => theme.opacity.mediumHeavy});
```
Opacity values should stay within the Superset theme. The available values
can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L128-L133)
- I believe the closest value for this would be `mediumHeavy` at 60%.
##########
superset-frontend/src/components/ObjectTags/index.tsx:
##########
@@ -0,0 +1,166 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled, SupersetClient, t } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+
+import './ObjectTags.css';
+import { TagsList } from 'src/components/Tags';
+import rison from 'rison';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import {
+ ClientErrorObject,
+ getClientErrorObject,
+} from 'src/utils/getClientErrorObject';
+import { deleteTag, fetchTags } from 'src/tags';
+
+export interface ObjectTagsProps {
+ objectType: string;
+ objectId: number;
+ includeTypes: boolean;
+ editMode: boolean;
+ maxTags: number | undefined;
+ onChange?: (tags: Tag[]) => void;
+}
+
+const StyledTagsDiv = styled.div`
+ margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ max-width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
+`;
+
+const localCache = new Map<string, any>();
+
+const cachedSupersetGet = cacheWrapper(
+ SupersetClient.get,
+ localCache,
+ ({ endpoint }) => endpoint || '',
+);
+
+type SelectTagsValue = {
+ value: string | number | undefined;
+ label: string;
+};
+
+export const tagToSelectOption = (
+ item: Tag & { table_name: string },
+): SelectTagsValue => ({
+ value: item.id,
+ label: item.name,
+});
+
+export const loadTags = async (
+ search: string,
+ page: number,
+ pageSize: number,
+) => {
+ const searchColumn = 'name';
+ const query = rison.encode({
+ filters: [{ col: searchColumn, opr: 'ct', value: search }],
+ page,
+ page_size: pageSize,
+ order_column: searchColumn,
+ order_direction: 'asc',
+ });
+
+ const getErrorMessage = ({ error, message }: ClientErrorObject) => {
+ let errorText = message || error || t('An error has occurred');
+ if (message === 'Forbidden') {
+ errorText = t('You do not have permission to edit this dashboard');
+ }
+ return errorText;
+ };
+
+ return cachedSupersetGet({
+ endpoint: `/api/v1/tag/?q=${query}`,
+ // endpoint: `/api/v1/tags/?q=${query}`,
+ })
+ .then(response => {
+ const data: {
+ label: string;
+ value: string | number;
+ }[] = response.json.result
+ .filter((item: Tag & { table_name: string }) => item.type === 1)
+ .map(tagToSelectOption);
+ return {
+ data,
+ totalCount: response.json.count,
+ };
+ })
+ .catch(async error => {
+ const errorMessage = getErrorMessage(await getClientErrorObject(error));
+ throw new Error(errorMessage);
+ });
+};
+
+export const ObjectTags = ({
+ objectType,
+ objectId,
+ includeTypes,
+ editMode = false,
+ maxTags = undefined,
+ onChange,
+}: ObjectTagsProps) => {
+ const [tags, setTags] = useState<Tag[]>([]);
+
+ useEffect(() => {
+ try {
+ fetchTags(
+ { objectType, objectId, includeTypes },
+ (tags: Tag[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
Review Comment:
Nit: Define `any`
##########
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx:
##########
@@ -340,6 +356,25 @@ const PropertiesModal = ({
updateMetadata: false,
});
+ if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+ // update tags
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.DASHBOARD,
+ objectId: dashboardId,
+ includeTypes: false,
+ },
+ (currentTags: TagType[]) => updateTags(currentTags, tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
Review Comment:
Nit: Define `any`
##########
superset-frontend/src/components/ObjectTags/index.tsx:
##########
@@ -0,0 +1,166 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled, SupersetClient, t } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+
+import './ObjectTags.css';
+import { TagsList } from 'src/components/Tags';
+import rison from 'rison';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import {
+ ClientErrorObject,
+ getClientErrorObject,
+} from 'src/utils/getClientErrorObject';
+import { deleteTag, fetchTags } from 'src/tags';
+
+export interface ObjectTagsProps {
+ objectType: string;
+ objectId: number;
+ includeTypes: boolean;
+ editMode: boolean;
+ maxTags: number | undefined;
+ onChange?: (tags: Tag[]) => void;
+}
+
+const StyledTagsDiv = styled.div`
+ margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ max-width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
+`;
+
+const localCache = new Map<string, any>();
+
+const cachedSupersetGet = cacheWrapper(
+ SupersetClient.get,
+ localCache,
+ ({ endpoint }) => endpoint || '',
+);
+
+type SelectTagsValue = {
+ value: string | number | undefined;
+ label: string;
+};
+
+export const tagToSelectOption = (
+ item: Tag & { table_name: string },
+): SelectTagsValue => ({
+ value: item.id,
+ label: item.name,
+});
+
+export const loadTags = async (
+ search: string,
+ page: number,
+ pageSize: number,
+) => {
+ const searchColumn = 'name';
+ const query = rison.encode({
+ filters: [{ col: searchColumn, opr: 'ct', value: search }],
+ page,
+ page_size: pageSize,
+ order_column: searchColumn,
+ order_direction: 'asc',
+ });
+
+ const getErrorMessage = ({ error, message }: ClientErrorObject) => {
+ let errorText = message || error || t('An error has occurred');
+ if (message === 'Forbidden') {
+ errorText = t('You do not have permission to edit this dashboard');
+ }
+ return errorText;
+ };
+
+ return cachedSupersetGet({
+ endpoint: `/api/v1/tag/?q=${query}`,
+ // endpoint: `/api/v1/tags/?q=${query}`,
+ })
+ .then(response => {
+ const data: {
+ label: string;
+ value: string | number;
+ }[] = response.json.result
+ .filter((item: Tag & { table_name: string }) => item.type === 1)
+ .map(tagToSelectOption);
+ return {
+ data,
+ totalCount: response.json.count,
+ };
+ })
+ .catch(async error => {
+ const errorMessage = getErrorMessage(await getClientErrorObject(error));
+ throw new Error(errorMessage);
+ });
+};
+
+export const ObjectTags = ({
+ objectType,
+ objectId,
+ includeTypes,
+ editMode = false,
+ maxTags = undefined,
+ onChange,
+}: ObjectTagsProps) => {
+ const [tags, setTags] = useState<Tag[]>([]);
+
+ useEffect(() => {
+ try {
+ fetchTags(
+ { objectType, objectId, includeTypes },
+ (tags: Tag[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
##########
superset-frontend/src/components/ObjectTags/index.tsx:
##########
@@ -0,0 +1,166 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled, SupersetClient, t } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+
+import './ObjectTags.css';
+import { TagsList } from 'src/components/Tags';
+import rison from 'rison';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import {
+ ClientErrorObject,
+ getClientErrorObject,
+} from 'src/utils/getClientErrorObject';
+import { deleteTag, fetchTags } from 'src/tags';
+
+export interface ObjectTagsProps {
+ objectType: string;
+ objectId: number;
+ includeTypes: boolean;
+ editMode: boolean;
+ maxTags: number | undefined;
+ onChange?: (tags: Tag[]) => void;
+}
+
+const StyledTagsDiv = styled.div`
+ margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ max-width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
+`;
+
+const localCache = new Map<string, any>();
+
+const cachedSupersetGet = cacheWrapper(
+ SupersetClient.get,
+ localCache,
+ ({ endpoint }) => endpoint || '',
+);
+
+type SelectTagsValue = {
+ value: string | number | undefined;
+ label: string;
+};
+
+export const tagToSelectOption = (
+ item: Tag & { table_name: string },
+): SelectTagsValue => ({
+ value: item.id,
+ label: item.name,
+});
+
+export const loadTags = async (
+ search: string,
+ page: number,
+ pageSize: number,
+) => {
+ const searchColumn = 'name';
+ const query = rison.encode({
+ filters: [{ col: searchColumn, opr: 'ct', value: search }],
+ page,
+ page_size: pageSize,
+ order_column: searchColumn,
+ order_direction: 'asc',
+ });
+
+ const getErrorMessage = ({ error, message }: ClientErrorObject) => {
+ let errorText = message || error || t('An error has occurred');
+ if (message === 'Forbidden') {
+ errorText = t('You do not have permission to edit this dashboard');
+ }
+ return errorText;
+ };
+
+ return cachedSupersetGet({
+ endpoint: `/api/v1/tag/?q=${query}`,
+ // endpoint: `/api/v1/tags/?q=${query}`,
+ })
+ .then(response => {
+ const data: {
+ label: string;
+ value: string | number;
+ }[] = response.json.result
+ .filter((item: Tag & { table_name: string }) => item.type === 1)
+ .map(tagToSelectOption);
+ return {
+ data,
+ totalCount: response.json.count,
+ };
+ })
+ .catch(async error => {
+ const errorMessage = getErrorMessage(await getClientErrorObject(error));
+ throw new Error(errorMessage);
+ });
+};
+
+export const ObjectTags = ({
+ objectType,
+ objectId,
+ includeTypes,
+ editMode = false,
+ maxTags = undefined,
+ onChange,
+}: ObjectTagsProps) => {
+ const [tags, setTags] = useState<Tag[]>([]);
+
+ useEffect(() => {
+ try {
+ fetchTags(
+ { objectType, objectId, includeTypes },
+ (tags: Tag[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
+ console.log(error);
+ }
+ }, [objectType, objectId, includeTypes]);
+
+ const onDelete = (tagIndex: number) => {
+ deleteTag(
+ { objectType, objectId },
+ tags[tagIndex],
+ () => setTags(tags.filter((_, i) => i !== tagIndex)),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
##########
superset-frontend/src/views/CRUD/tags/TagsTable.tsx:
##########
@@ -0,0 +1,124 @@
+/**
+ * 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, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { t, styled } from '@superset-ui/core';
+import TableView, { EmptyWrapperType } from 'src/components/TableView';
+import { fetchObjects } from '../../../tags';
+import Loading from '../../../components/Loading';
+
+const TagsTableContainer = styled.div`
+ text-align: left;
+ border-radius: ${({ theme }) => theme.gridUnit * 1}px 0;
Review Comment:
```suggestion
border-radius: ${({ theme }) => theme.borderRadius}px 0;
```
Border-radius values should stay within the Superset theme, the current
value is 4 as seen
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L55).
##########
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx:
##########
@@ -521,6 +557,67 @@ const PropertiesModal = ({
}
}, [dashboardInfo, dashboardTitle, form]);
+ useEffect(() => {
+ if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.DASHBOARD,
+ objectId: dashboardId,
+ includeTypes: false,
+ },
+ (tags: TagType[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
Review Comment:
Nit: Define `any`
##########
superset-frontend/src/components/Tags/TagsList.test.tsx:
##########
@@ -0,0 +1,76 @@
+/**
+ * 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, screen } 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 findAllTags = () => screen.getAllByRole('link')! as HTMLElement[];
+
+test('should render', () => {
+ const { container } = render(<TagsList {...mockedProps} />);
+ expect(container).toBeInTheDocument();
+ // console.log(screen.getAllByRole("tag"));
Review Comment:
Nit: remove comment
##########
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx:
##########
@@ -618,6 +715,31 @@ const PropertiesModal = ({
</p>
</Col>
</Row>
+ <Row gutter={16}>
+ <Col xs={24} md={12}>
+ <h3 style={{ marginTop: '1em' }}>{t('Tags')}</h3>
Review Comment:
```suggestion
<h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3>
```
Use `css` for any inline styles
##########
superset-frontend/src/explore/components/PropertiesModal/index.tsx:
##########
@@ -182,6 +224,71 @@ function PropertiesModal({
setName(slice.slice_name || '');
}, [slice.slice_name]);
+ useEffect(() => {
+ if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.CHART,
+ objectId: slice.slice_id,
+ includeTypes: false,
+ },
+ (tags: TagType[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
Review Comment:
Nit: Describe `any`
##########
superset-frontend/src/explore/components/ExploreChartHeader/index.jsx:
##########
@@ -60,6 +61,11 @@ const saveButtonStyles = theme => css`
}
`;
+// const StyledButtons = styled.span`
+// display: flex;
+// align-items: center;
+// `;
+
Review Comment:
Nit: Remove commented code
##########
superset-frontend/src/explore/components/PropertiesModal/index.tsx:
##########
@@ -314,6 +421,26 @@ function PropertiesModal({
)}
</StyledHelpBlock>
</FormItem>
+ {isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && (
+ <h3 style={{ marginTop: '1em' }}>{t('Tags')}</h3>
Review Comment:
```suggestion
<h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3>
```
Use `css` for any inline styles.
##########
superset-frontend/src/views/CRUD/dashboard/DashboardList.tsx:
##########
@@ -339,6 +347,25 @@ function DashboardList(props: DashboardListProps) {
disableSortBy: true,
size: 'xl',
},
+ {
+ Cell: ({
+ row: {
+ original: { tags = [] },
+ },
+ }: any) => (
Review Comment:
Nit: Describe `any`
##########
superset-frontend/src/views/CRUD/tags/Tags.tsx:
##########
@@ -0,0 +1,95 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+import { StringParam, useQueryParam } from 'use-query-params';
+import withToasts from 'src/components/MessageToasts/withToasts';
+import SelectControl from 'src/explore/components/controls/SelectControl';
+import { fetchSuggestions } from 'src/tags';
+import TagsTable from './TagsTable';
+
+const TagsContainer = styled.div`
+ background-color: ${({ theme }) => theme.colors.grayscale.light4};
+ .select-control {
+ margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-right: ${({ theme }) => theme.gridUnit * 4}px;
+ margin-bottom: ${({ theme }) => theme.gridUnit * 2}px;
+ }
+ .select-control-label {
+ text-transform: uppercase;
+ font-size: ${({ theme }) => theme.gridUnit * 3}px;
+ color: ${({ theme }) => theme.colors.grayscale.base};
+ margin-bottom: ${({ theme }) => theme.gridUnit * 1}px;
+ }
+`;
+
+const TagsNav = styled.div`
+ height: 50px;
Review Comment:
```suggestion
height: ${({ theme }) => theme.gridUnit * 12.5}px;
```
Unit values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
Review Comment:
```suggestion
box-shadow: 0 ${({ theme }) => theme.gridUnit * 0.5}px
${({ theme }) => theme.gridUnit * 1.5}px
rgba(0, 0, 0, ${({ theme }) => theme.opacity.light});
```
Opacity and unit values should stay within the Superset theme. The available
opacity values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L128-L133)
- I believe the closest value would be either `light` at 10% or `mediumLight`
at 35%.
##########
superset-frontend/src/views/CRUD/chart/ChartList.tsx:
##########
@@ -366,6 +370,27 @@ function ChartList(props: ChartListProps) {
disableSortBy: true,
size: 'xl',
},
+ {
+ Cell: ({
+ row: {
+ original: { tags = [] },
+ },
+ }: any) => (
Review Comment:
Nit: Describe `any`
##########
superset-frontend/src/views/CRUD/tags/TagsTable.tsx:
##########
@@ -0,0 +1,124 @@
+/**
+ * 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, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { t, styled } from '@superset-ui/core';
+import TableView, { EmptyWrapperType } from 'src/components/TableView';
+import { fetchObjects } from '../../../tags';
+import Loading from '../../../components/Loading';
+
+const TagsTableContainer = styled.div`
+ text-align: left;
+ border-radius: ${({ theme }) => theme.gridUnit * 1}px 0;
+ margin: 0 ${({ theme }) => theme.gridUnit * 4}px;
+ .table {
+ table-layout: fixed;
+ }
+ .td {
+ width: 33%;
+ }
+`;
+
+interface TaggedObject {
+ id: number;
+ type: string;
+ name: string;
+ url: string;
+ changed_on: moment.MomentInput;
+ created_by: number | undefined;
+ creator: string;
+}
+
+interface TaggedObjects {
+ dashboard: TaggedObject[];
+ chart: TaggedObject[];
+ query: TaggedObject[];
+}
+
+interface TagsTableProps {
+ search?: string;
+}
+
+export default function TagsTable({ search = '' }: TagsTableProps) {
+ const [objects, setObjects] = useState<TaggedObjects>({
+ dashboard: [],
+ chart: [],
+ query: [],
+ });
+
+ useEffect(() => {
+ const fetchResults = (search: string) => {
+ fetchObjects(
+ { tags: search, types: null },
+ (data: TaggedObject[]) => {
+ const objects = { dashboard: [], chart: [], query: [] };
+ data.forEach(object => {
+ objects[object.type].push(object);
+ });
+ setObjects(objects);
+ },
+ (error: Response) => {
+ console.log(error.json());
+ },
+ );
+ };
+ fetchResults(search);
+ }, [search]);
+
+ const renderTable = (type: any) => {
+ const data = objects[type].map((o: TaggedObject) => ({
+ [type]: <a href={o.url}>{o.name}</a>,
+ // eslint-disable-next-line react/no-danger
+ creator: <div dangerouslySetInnerHTML={{ __html: o.creator }} />,
Review Comment:
```suggestion
creator: <div>o.creator</div>,
```
I feel like it would be safer to set this in a div normally, is there a
reason for using `dangerouslySetInnerHTML` instead?
##########
superset-frontend/src/explore/components/PropertiesModal/index.tsx:
##########
@@ -148,6 +170,25 @@ function PropertiesModal({
}[]
).map(o => o.value);
}
+ if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+ // update tags
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.CHART,
+ objectId: slice.slice_id,
+ includeTypes: false,
+ },
+ (currentTags: TagType[]) => updateTags(currentTags, tags),
+ () => {
+ /* TODO: handle error */
+ },
+ );
+ } catch (error: any) {
Review Comment:
Nit: Describe `any`
##########
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx:
##########
@@ -521,6 +557,67 @@ const PropertiesModal = ({
}
}, [dashboardInfo, dashboardTitle, form]);
+ useEffect(() => {
+ if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.DASHBOARD,
+ objectId: dashboardId,
+ includeTypes: false,
+ },
+ (tags: TagType[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
##########
superset-frontend/src/explore/components/PropertiesModal/index.tsx:
##########
@@ -182,6 +224,71 @@ function PropertiesModal({
setName(slice.slice_name || '');
}, [slice.slice_name]);
+ useEffect(() => {
+ if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.CHART,
+ objectId: slice.slice_id,
+ includeTypes: false,
+ },
+ (tags: TagType[]) => setTags(tags),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
##########
superset-frontend/src/components/Tags/Tag.tsx:
##########
@@ -0,0 +1,84 @@
+/**
+ * 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, SupersetTheme } 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 customTagStyler = (theme: SupersetTheme) => `
+ margin-top: ${theme.gridUnit * 1}px;
+ margin-bottom: ${theme.gridUnit * 1}px;
+ font-size: ${theme.typography.sizes.s}px;
+`;
+
+const StyledTag = styled(AntdTag)`
+ ${({ theme }) => customTagStyler(theme)}}
+`;
+
+const Tag = ({
+ name,
+ id,
+ index = undefined,
+ onDelete = null,
+ editable = false,
+ onClick = null,
+}: 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}`}>
Review Comment:
Could you set this to open in a new tab instead of the same page?
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
Review Comment:
I see that this border is being set to `0px` but also setting a color. Is
the intent to hide the border or set it as a different color?
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
Review Comment:
```suggestion
background: ${({ theme }) => theme.colors.grayscale.light5};
```
Color values should stay within the Superset theme
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
+
+ /* shared font styles */
+ font-size: 12px;
+ line-height: 1.2;
+
+ /* clicking anywhere will focus the input */
+ cursor: text;
+}
+
+.react-tags__selected {
+ display: inline;
+}
+
+.react-tags__selected-tag {
+ display: inline-block;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 6px 8px;
+ border: 0px solid #f5f5f5;
+ border-radius: 2px;
+ background: #f1f1f1;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search {
+ display: inline-block;
+
+ /* new tag border layout */
+ border: 1px dashed #d9d9d9;
+
+ /* match tag layout */
+ line-height: 20px;
+ margin-bottom: 0;
+ padding: 0 7px;
+
+ /* prevent autoresize overflowing the container */
+ max-width: 100%;
+}
+
+.react-tags__search:focus-within {
+ border: 1px solid #000000;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__search {
+ /* this will become the offsetParent for suggestions */
+ position: relative;
+ }
+}
+
+.react-tags__search input {
+ max-width: 150%;
+
+ /* remove styles and layout from this element */
+ margin: 0;
+ margin-left: 0;
+ padding: 0;
+ border: 0;
+ outline: none;
+
+ /* match the font styles */
+ font-size: inherit;
+ line-height: inherit;
+}
+
+.react-tags__search input::-ms-clear {
+ display: none;
+}
+
+.react-tags__suggestions {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ z-index: 9999;
+}
+
+@media screen and (min-width: 30em) {
+ .react-tags__suggestions {
+ width: 240px;
+ }
+}
+
+.react-tags__suggestions ul {
+ margin: 4px -1px;
+ padding: 0;
+ list-style: none;
+ background: white;
+ border: 1px solid #d1d1d1;
+ border-radius: 2px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+.react-tags__suggestions li {
+ border-bottom: 1px solid #ddd;
+ padding: 6px 8px;
+}
+
+.react-tags__suggestions li mark {
+ text-decoration: underline;
+ background: none;
+ font-weight: 600;
+}
+
+.react-tags__suggestions li:hover {
+ cursor: pointer;
+ background: #eee;
Review Comment:
Color values should stay within the Superset theme. The available color
values can be found
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L56-L127).
##########
superset-frontend/src/explore/components/PropertiesModal/index.tsx:
##########
@@ -148,6 +170,25 @@ function PropertiesModal({
}[]
).map(o => o.value);
}
+ if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+ // update tags
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.CHART,
+ objectId: slice.slice_id,
+ includeTypes: false,
+ },
+ (currentTags: TagType[]) => updateTags(currentTags, tags),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
##########
superset-frontend/src/components/ObjectTags/index.tsx:
##########
@@ -0,0 +1,166 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { styled, SupersetClient, t } from '@superset-ui/core';
+import Tag from 'src/types/TagType';
+
+import './ObjectTags.css';
+import { TagsList } from 'src/components/Tags';
+import rison from 'rison';
+import { cacheWrapper } from 'src/utils/cacheWrapper';
+import {
+ ClientErrorObject,
+ getClientErrorObject,
+} from 'src/utils/getClientErrorObject';
+import { deleteTag, fetchTags } from 'src/tags';
+
+export interface ObjectTagsProps {
+ objectType: string;
+ objectId: number;
+ includeTypes: boolean;
+ editMode: boolean;
+ maxTags: number | undefined;
+ onChange?: (tags: Tag[]) => void;
+}
+
+const StyledTagsDiv = styled.div`
+ margin-left: ${({ theme }) => theme.gridUnit * 2}px;
+ max-width: 100%;
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-direction: row;
+ -webkit-flex-wrap: wrap;
Review Comment:
```suggestion
display: flex;
flex-direction: row;
flex-wrap: wrap;
```
Emotion uses the [Stylis CSS
Preprocessor](https://github.com/thysultan/stylis), which handles these
prefixes on runtime. See [this
thread](https://github.com/emotion-js/emotion/issues/1523#issuecomment-535865527)
for more info
##########
superset-frontend/src/components/ObjectTags/ObjectTags.css:
##########
@@ -0,0 +1,149 @@
+/**
+ * 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.
+ */
+.ant-tag {
+ color: black;
+}
+
+.react-tags {
+ position: relative;
+ display: inline-block;
+ padding: 1px 0 0 1px;
+ margin: 0 10px;
+ border: 0px solid #f5f5f5;
+ border-radius: 1px;
Review Comment:
```suggestion
border-radius: ${({ theme }) => theme.borderRadius}px;
```
Border-radius values should stay within the Superset theme, the current
value is 4 as seen
[here](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/style/index.tsx#L55).
##########
superset-frontend/src/dashboard/components/PropertiesModal/index.tsx:
##########
@@ -340,6 +356,25 @@ const PropertiesModal = ({
updateMetadata: false,
});
+ if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+ // update tags
+ try {
+ fetchTags(
+ {
+ objectType: OBJECT_TYPES.DASHBOARD,
+ objectId: dashboardId,
+ includeTypes: false,
+ },
+ (currentTags: TagType[]) => updateTags(currentTags, tags),
+ () => {
+ /* TODO: handle error */
+ },
Review Comment:
Will this be implemented in this PR?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
