fix: Tags Polish II (#25496)

apache · Oct 4, 2023 · 5301339 · 5301339
1 parent 3e63c82
commit 5301339
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 25 deletions.
diff --git a/superset-frontend/src/features/tags/BulkTagModal.tsx b/superset-frontend/src/features/tags/BulkTagModal.tsx
@@ -17,14 +17,20 @@
  * 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';
 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<BulkTagModalProps> = ({
       },
     })
       .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<BulkTagModalProps> = ({
         </div>
       }
     >
-      <>
-        <>{t('You are adding tags to the %s entities', selected.length)}</>
-        <br />
+      <BulkTagModalContainer>
+        <div className="bulk-tag-text">
+          {t('You are adding tags to %s %ss', selected.length, resourceName)}
+        </div>
         <FormLabel>{t('tags')}</FormLabel>
         <AsyncSelect
           ariaLabel="tags"
@@ -114,7 +121,7 @@ const BulkTagModal: React.FC<BulkTagModalProps> = ({
           placeholder={t('Select Tags')}
           mode="multiple"
         />
-      </>
+      </BulkTagModalContainer>
     </Modal>
   );
 };

diff --git 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<TagModalProps> = ({
         </div>
       }
     >
-      <FormLabel>{t('Tag name')}</FormLabel>
-      <Input
-        onChange={handleTagNameChange}
-        placeholder={t('Name of your tag')}
-        value={tagName}
-      />
-      <FormLabel>{t('Description')}</FormLabel>
-      <Input
-        onChange={handleDescriptionChange}
-        placeholder={t('Add description of your tag')}
-        value={description}
-      />
-      <Divider />
       <StyledModalBody>
+        <FormLabel>{t('Tag name')}</FormLabel>
+        <Input
+          className="tag-input"
+          onChange={handleTagNameChange}
+          placeholder={t('Name of your tag')}
+          value={tagName}
+        />
+        <FormLabel>{t('Description')}</FormLabel>
+        <Input
+          className="tag-input"
+          onChange={handleDescriptionChange}
+          placeholder={t('Add description of your tag')}
+          value={description}
+        />
+        <Divider />
         <AsyncSelect
+          className="tag-input"
           ariaLabel={t('Select dashboards')}
           mode="multiple"
           name="dashboards"
@@ -300,6 +306,7 @@ const TagModal: React.FC<TagModalProps> = ({
           allowClear
         />
         <AsyncSelect
+          className="tag-input"
           ariaLabel={t('Select charts')}
           mode="multiple"
           name="charts"
@@ -311,6 +318,7 @@ const TagModal: React.FC<TagModalProps> = ({
           allowClear
         />
         <AsyncSelect
+          className="tag-input"
           ariaLabel={t('Select saved queries')}
           mode="multiple"
           name="savedQueries"

diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx
@@ -97,22 +97,28 @@ function AllEntities() {
     label: t('dataset name'),
   };
 
-  const description: Description = {
-    type: MetadataType.DESCRIPTION,
-    value: tag?.description || '',
-  };
+  const items = [];
+  if (tag?.description) {
+    const description: Description = {
+      type: MetadataType.DESCRIPTION,
+      value: tag?.description || '',
+    };
+    items.push(description);
+  }
 
   const owner: Owner = {
     type: MetadataType.OWNER,
     createdBy: `${tag?.created_by.first_name} ${tag?.created_by.last_name}`,
     createdOn: tag?.created_on_delta_humanized || '',
   };
+  items.push(owner);
+
   const lastModified: LastModified = {
     type: MetadataType.LAST_MODIFIED,
     value: tag?.changed_on_delta_humanized || '',
     modifiedBy: `${tag?.changed_by.first_name} ${tag?.changed_by.last_name}`,
   };
-  const items = [description, owner, lastModified];
+  items.push(lastModified);
 
   useEffect(() => {
     // 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')}{' '}
               </Button>