diff --git a/superset-frontend/src/features/tags/BulkTagModal.tsx b/superset-frontend/src/features/tags/BulkTagModal.tsx index 3fff056f41329..9854cf3d2a118 100644 --- a/superset-frontend/src/features/tags/BulkTagModal.tsx +++ b/superset-frontend/src/features/tags/BulkTagModal.tsx @@ -17,7 +17,7 @@ * under the License. */ import React, { useState, useEffect } from 'react'; -import { t, SupersetClient } from '@superset-ui/core'; +import { t, styled, SupersetClient } from '@superset-ui/core'; import { FormLabel } from 'src/components/Form'; import Modal from 'src/components/Modal'; import AsyncSelect from 'src/components/Select/AsyncSelect'; @@ -25,6 +25,12 @@ import Button from 'src/components/Button'; import { loadTags } from 'src/components/Tags/utils'; import { TaggableResourceOption } from 'src/features/tags/TagModal'; +const BulkTagModalContainer = styled.div` + .bulk-tag-text { + margin-bottom: ${({ theme }) => theme.gridUnit * 2.5}px; + } +`; + interface BulkTagModalProps { onHide: () => void; refreshData: () => void; @@ -61,7 +67,7 @@ const BulkTagModal: React.FC = ({ }, }) .then(({ json = {} }) => { - addSuccessToast(t('Tagged %s items', selected.length)); + addSuccessToast(t('Tagged %s %ss', selected.length, resourceName)); }) .catch(err => { addDangerToast(t('Failed to tag items')); @@ -99,9 +105,10 @@ const BulkTagModal: React.FC = ({ } > - <> - <>{t('You are adding tags to the %s entities', selected.length)} -
+ +
+ {t('You are adding tags to %s %ss', selected.length, resourceName)} +
{t('tags')} = ({ placeholder={t('Select Tags')} mode="multiple" /> - +
); }; diff --git a/superset-frontend/src/features/tags/TagModal.tsx b/superset-frontend/src/features/tags/TagModal.tsx index 90d6391e8b554..fde448d4b48fd 100644 --- a/superset-frontend/src/features/tags/TagModal.tsx +++ b/superset-frontend/src/features/tags/TagModal.tsx @@ -30,7 +30,10 @@ import { fetchObjects } from 'src/features/tags/tags'; const StyledModalBody = styled.div` .ant-select-dropdown { - max-height: ${({ theme }) => theme.gridUnit * 25}px; + max-height: ${({ theme }) => theme.gridUnit * 40}px; + } + .tag-input { + margin-bottom: ${({ theme }) => theme.gridUnit * 3}px; } `; @@ -272,21 +275,24 @@ const TagModal: React.FC = ({ } > - {t('Tag name')} - - {t('Description')} - - + {t('Tag name')} + + {t('Description')} + + = ({ allowClear /> = ({ allowClear /> { // fetch single tag met @@ -159,6 +165,7 @@ function AllEntities() { data-test="bulk-select-action" buttonStyle="secondary" onClick={() => setShowTagModal(true)} + showMarginRight={false} > {t('Edit Tag')}{' '}