From b030693def10ca0d2468d6dc35a7b0c821ace419 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=A8=E5=9B=BD=E7=92=87?=
 <37972689+YangGuoXuan-0503@users.noreply.github.com>
Date: Tue, 20 Aug 2024 18:16:05 +0800
Subject: [PATCH] feat: metadata hide image location (#6591)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: metadata hide image location

* feat: update code

* feat: update code

* feat: update code

---------

Co-authored-by: 杨国璇 <ygx@Hello-word.local>
---
 frontend/src/css/lib-content-view.css         |   1 +
 .../_basic/constants/column/common.js         |   1 +
 .../widgets/filter-item-utils.js              |  24 ++--
 .../filter-item/collaborator-filter/index.css |   4 +-
 .../widgets/filter-item/index.css             |  12 +-
 .../popover/filter-popover/widgets/index.css  | 136 +++++++++---------
 .../popover/filter-popover/widgets/index.js   |   2 +-
 .../groupbys-popover/groupbys/groupby-item.js |  12 +-
 .../components/popover/index.css              |   4 +
 .../components/popover/sort-popover/index.jsx |  12 +-
 .../metadata-view/components/table/index.css  |  14 --
 11 files changed, 107 insertions(+), 115 deletions(-)

diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 0473dcf220..fe666d983d 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -381,6 +381,7 @@
 }
 
 .cur-view-container .cur-view-path .cur-view-path-left {
+  flex: 1;
   border-bottom: none;
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/frontend/src/metadata/metadata-view/_basic/constants/column/common.js b/frontend/src/metadata/metadata-view/_basic/constants/column/common.js
index f2148a7d09..19a22aebf3 100644
--- a/frontend/src/metadata/metadata-view/_basic/constants/column/common.js
+++ b/frontend/src/metadata/metadata-view/_basic/constants/column/common.js
@@ -9,6 +9,7 @@ export const NOT_DISPLAY_COLUMN_KEYS = [
   PRIVATE_COLUMN_KEY.OBJ_ID,
   PRIVATE_COLUMN_KEY.SUFFIX,
   PRIVATE_COLUMN_KEY.FILE_DETAILS,
+  PRIVATE_COLUMN_KEY.LOCATION,
 ];
 
 export const VIEW_NOT_DISPLAY_COLUMN_KEYS = [
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
index 9360c46dd4..32a6669320 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item-utils.js
@@ -12,8 +12,8 @@ class FilterItemUtils {
       value: { column },
       label: (
         <Fragment>
-          <span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
-          <span className='select-option-name'>{name}</span>
+          <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
+          <span className="select-option-name">{name}</span>
         </Fragment>
       )
     };
@@ -22,14 +22,14 @@ class FilterItemUtils {
   static generatorPredicateOption(filterPredicate) {
     return {
       value: { filterPredicate },
-      label: <span className='select-option-name'>{FILTER_PREDICATE_SHOW[filterPredicate]}</span>
+      label: <span className="select-option-name">{FILTER_PREDICATE_SHOW[filterPredicate]}</span>
     };
   }
 
   static generatorTermModifierOption(filterTermModifier) {
     return {
       value: { filterTermModifier },
-      label: <span className='select-option-name'>{FILTER_TERM_MODIFIER_SHOW[filterTermModifier]}</span>
+      label: <span className="select-option-name">{FILTER_TERM_MODIFIER_SHOW[filterTermModifier]}</span>
     };
   }
 
@@ -37,9 +37,9 @@ class FilterItemUtils {
     return {
       value: { columnOption: option },
       label: (
-        <div className='select-option-name single-option-name'>
+        <div className="select-option-name single-option-name">
           <div className="single-select-option" style={{ background: option.color, color: option.textColor || null }} title={option.name} aria-label={option.name}>{option.name}</div>
-          <div className='single-check-icon'>
+          <div className="single-check-icon">
             {selectedOption?.id === option.id && (<Icon iconName="check-mark" />)}
           </div>
         </div>
@@ -51,9 +51,9 @@ class FilterItemUtils {
     return {
       value: { columnOption: option },
       label: (
-        <div className='select-option-name multiple-option-name'>
+        <div className="select-option-name multiple-option-name">
           <div className="multiple-select-option" style={{ background: option.color, color: option.textColor }} title={option.name} aria-label={option.name}>{option.name}</div>
-          <div className='multiple-check-icon'>
+          <div className="multiple-check-icon">
             {filterTerm.indexOf(option.id) > -1 && (<Icon iconName="check-mark" />)}
           </div>
         </div>
@@ -65,11 +65,11 @@ class FilterItemUtils {
     return [
       {
         value: { filterConjunction: 'And' },
-        label: (<span className='select-option-name'>{gettext('And')}</span>)
+        label: (<span className="select-option-name">{gettext('And')}</span>)
       },
       {
         value: { filterConjunction: 'Or' },
-        label: (<span className='select-option-name'>{gettext('Or')}</span>)
+        label: (<span className="select-option-name">{gettext('Or')}</span>)
       }
     ];
   }
@@ -78,12 +78,12 @@ class FilterItemUtils {
     if (conjunction === 'And') {
       return {
         value: { filterConjunction: 'And' },
-        label: (<span className='select-option-name'>{gettext('And')}</span>)
+        label: (<span className="select-option-name">{gettext('And')}</span>)
       };
     }
     return {
       value: { filterConjunction: 'Or' },
-      label: (<span className='select-option-name'>{gettext('Or')}</span>)
+      label: (<span className="select-option-name">{gettext('Or')}</span>)
     };
   }
 }
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/collaborator-filter/index.css b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/collaborator-filter/index.css
index 051577140d..7b4e033847 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/collaborator-filter/index.css
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/collaborator-filter/index.css
@@ -1,9 +1,9 @@
-.sf-metadata-selector-collaborator.sf-metadata-select .option {
+.sf-metadata-selector-collaborator.sf-metadata-select .sf-metadata-option {
   line-height: 20px;
   padding: 5px 10px 5px 10px !important;
 }
 
-.sf-metadata-selector-collaborator.sf-metadata-select .option:hover {
+.sf-metadata-selector-collaborator.sf-metadata-select .sf-metadata-option:hover {
   background-color: #f7f7f7;
   color: #212529;
 }
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/index.css b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/index.css
index 2975bb751b..65435ceac6 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/index.css
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/filter-item/index.css
@@ -4,8 +4,8 @@
   margin: 0;
 }
 
-.sf-metadata-filters .filters-list .single-select-option,
-.sf-metadata-filters .filters-list .multiple-select-option {
+.sf-metadata-filters .sf-metadata-filters-list .single-select-option,
+.sf-metadata-filters .sf-metadata-filters-list .multiple-select-option {
   border-radius: 10px;
   display: block;
   font-size: 13px;
@@ -21,14 +21,14 @@
   width: min-content;
 }
 
-.sf-metadata-selector-single-select .option,
-.sf-metadata-selector-multiple-select .option {
+.sf-metadata-selector-single-select .sf-metadata-option,
+.sf-metadata-selector-multiple-select .sf-metadata-option {
   height: 30px;
   padding: 0 10px;
 }
 
-.sf-metadata-selector-single-select .option:hover,
-.sf-metadata-selector-multiple-select .option:hover {
+.sf-metadata-selector-single-select .sf-metadata-option:hover,
+.sf-metadata-selector-multiple-select .sf-metadata-option:hover {
   background-color: #f7f7f7;
   color: #212529;
 }
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
index 56532c40df..e4c25b69b9 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.css
@@ -1,97 +1,97 @@
-.filters-list {
+.sf-metadata-filters-list {
   min-height: 120px;
   max-height: 100%;
   padding: 15px;
 }
 
-.filters-list.empty-filters-container {
+.sf-metadata-filters-list.empty-filters-container {
   min-height: 80px;
   padding: 16px;
 }
 
-.filters-list.empty-filters-container .empty-filters-list {
+.sf-metadata-filters-list.empty-filters-container .empty-filters-list {
   padding-left: 0;
 }
 
-.filters-list .empty-filters-list {
+.sf-metadata-filters-list .empty-filters-list {
   padding: 0.25rem;
   font-size: 14px;
   color: #666666;
 }
 
-.filters-list .filter-item {
+.sf-metadata-filters-list .filter-item {
   display: flex;
   align-items: center;
   padding: 0.25rem 0;
 }
 
-.filters-list .filter-item .condition {
+.sf-metadata-filters-list .filter-item .condition {
   display: flex;
   flex: 1;
 }
 
-.filters-list .filter-item .condition > div {
+.sf-metadata-filters-list .filter-item .condition > div {
   height: 38px;
   line-height: 38px;
   margin-left: 0.5rem;
 }
 
-.filters-list .filter-item .condition > div:first-child {
+.sf-metadata-filters-list .filter-item .condition > div:first-child {
   margin-left: 0;
 }
 
-.filters-list .filter-item .filter-term {
+.sf-metadata-filters-list .filter-item .filter-term {
   max-width: 300px;
 }
 
-.filters-list .filter-item .filter-term .option-group-content .option.option-active .sf-metadata-icon {
+.sf-metadata-filters-list .filter-item .filter-term .sf-metadata-option-group-content .option.option-active .sf-metadata-icon {
   color: #798d99;
 }
 
-.filters-list .filter-conjunction {
+.sf-metadata-filters-list .filter-conjunction {
   width: 72px;
 }
 
-.filters-list .filter-conjunction-readonly {
+.sf-metadata-filters-list .filter-conjunction-readonly {
   width: 52px;
 }
 
-.filters-list .filter-container {
+.sf-metadata-filters-list .filter-container {
   width: calc(100% - 72px);
   display: flex;
 }
 
-.filters-list .sf-metadata-select .selected-option-show {
+.sf-metadata-filters-list .sf-metadata-select .selected-option-show {
   width: calc(100% - 20px);
   height: 20px;
   line-height: 20px;
 }
 
-.filters-list .sf-metadata-select.disabled .selected-option-show {
+.sf-metadata-filters-list .sf-metadata-select.disabled .selected-option-show {
   width: 100%;
 }
 
-.filters-list .sf-metadata-select .selected-option {
+.sf-metadata-filters-list .sf-metadata-select .selected-option {
   width: auto;
   overflow-x: auto;
   line-height: 1.5;
 }
 
-.filters-list .sf-metadata-select .sf-metadata-icon-drop-down {
+.sf-metadata-filters-list .sf-metadata-select .sf-metadata-icon-drop-down {
   margin-left: 0.5rem;
 }
 
-.filters-list .selected-conjunction-show {
+.sf-metadata-filters-list .selected-conjunction-show {
   padding: 0 10px;
   color: #666666;
 }
 
-.filters-list .filter-column {
+.sf-metadata-filters-list .filter-column {
   max-width: 150px;
 }
 
-.filter-term .selector-multiple-select .option,
-.filter-term .selector-single-select .option {
+.filter-term .selector-multiple-select .sf-metadata-option,
+.filter-term .selector-single-select .sf-metadata-option {
   height: 30px;
   padding: 0 10px;
 }
@@ -101,41 +101,41 @@
   margin-top: 5px;
 }
 
-.filter-term .selector-single-select .option:hover {
+.filter-term .selector-single-select .sf-metadata-option:hover {
   color: #212529;
   background-color: #f7f7f7;
 }
 
-.filter-term .selector-single-select .option:hover .select-option-name,
-.filter-term .selector-multiple-select .option:hover .select-option-name,
-.filter-term .selector-collaborator .option:hover .select-option-name {
+.filter-term .selector-single-select .sf-metadata-option:hover .select-option-name,
+.filter-term .selector-multiple-select .sf-metadata-option:hover .select-option-name,
+.filter-term .selector-collaborator .sf-metadata-option:hover .select-option-name {
   color: unset;
 }
 
-.filters-list .selector-collaborator .selected-option-show {
+.sf-metadata-filters-list .selector-collaborator .selected-option-show {
   text-overflow: unset;
 }
 
-.filters-list .selector-multiple-select .option:hover,
-.filters-list .selector-multiple-select .option.option-active,
-.filters-list .selector-collaborator .option:hover,
-.filters-list .selector-collaborator .option.option-active {
+.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option:hover,
+.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option.sf-metadata-option-active,
+.sf-metadata-filters-list .selector-collaborator .sf-metadata-option:hover,
+.sf-metadata-filters-list .selector-collaborator .sf-metadata-option.sf-metadata-option-active {
   color: #212529;
   background-color: #f7f7f7;
 }
 
-.filters-list .selector-multiple-select .option.option-active .select-option-name,
-.filters-list .selector-collaborator .option.option-active .select-option-name {
+.sf-metadata-filters-list .selector-multiple-select .sf-metadata-option.sf-metadata-option-active .select-option-name,
+.sf-metadata-filters-list .selector-collaborator .sf-metadata-option.sf-metadata-option-active .select-option-name {
   color: #212529;
 }
 
-.filters-list .selected-option .multiple-select-option,
-.filters-list .selected-option .single-select-option {
+.sf-metadata-filters-list .selected-option .multiple-select-option,
+.sf-metadata-filters-list .selected-option .single-select-option {
   margin: 0;
   display: inline-block;
 }
 
-.filters-list .filter-term input {
+.sf-metadata-filters-list .filter-term input {
   display: flex;
   width: 100%;
   height: 38px;
@@ -147,19 +147,19 @@
   font-size: 0.875rem;
 }
 
-.filters-list .filter-term input:hover {
+.sf-metadata-filters-list .filter-term input:hover {
   border-color: rgb(179, 179, 179);
 }
 
-.filters-list .filter-term input:disabled:hover {
+.sf-metadata-filters-list .filter-term input:disabled:hover {
   border-color: rgba(0, 40, 100, 0.12);
 }
 
-.filters-list .filter-term input:hover:focus {
+.sf-metadata-filters-list .filter-term input:hover:focus {
   border-color: #1991eb;
 }
 
-.filters-list .filter-term input:focus {
+.sf-metadata-filters-list .filter-term input:focus {
   color: #495057;
   background-color: #fff;
   border-color: #1991eb;
@@ -167,22 +167,22 @@
   box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
 }
 
-.filters-list .filter-term .date-picker-container input:focus {
+.sf-metadata-filters-list .filter-term .date-picker-container input:focus {
   color: #495057;
   background-color: #fff;
   border: 1px solid #fff;
   outline: 0;
 }
 
-.filters-list .filter-term .date-picker-container table tr {
+.sf-metadata-filters-list .filter-term .date-picker-container table tr {
   height: 30px;
 }
 
-.filters-list .filter-term input[type='checkbox'] {
+.sf-metadata-filters-list .filter-term input[type='checkbox'] {
   width: inherit;
 }
 
-.filters-list .filter-term input[type='checkbox']:focus {
+.sf-metadata-filters-list .filter-term input[type='checkbox']:focus {
   border: 0;
   box-shadow: none;
 }
@@ -193,14 +193,14 @@
   border: 1px solid rgba(0, 40, 100, 0.12);
 }
 
-.filters-list .delete-filter {
+.sf-metadata-filters-list .delete-filter {
   width: 12px;
   height: 20px;
   margin-right: 14px;
   text-align: center;
 }
 
-.filters-list .delete-filter:hover {
+.sf-metadata-filters-list .delete-filter:hover {
   cursor: pointer;
 }
 
@@ -214,13 +214,13 @@
   fill: #666;
 }
 
-.filters-list .multiple-option-name {
+.sf-metadata-filters-list .multiple-option-name {
   display: flex;
   align-items: center;
 }
 
-.filters-list .multiple-check-icon,
-.filters-list .collaborator-check-icon {
+.sf-metadata-filters-list .multiple-check-icon,
+.sf-metadata-filters-list .collaborator-check-icon {
   display: inline-flex;
   width: 20px;
   height: 20px;
@@ -228,8 +228,8 @@
   text-align: center;
 }
 
-.filters-list .multiple-check-icon .sf-metadata-icon-check-mark,
-.filters-list .collaborator-check-icon .sf-metadata-icon-check-mark {
+.sf-metadata-filters-list .multiple-check-icon .sf-metadata-icon-check-mark,
+.sf-metadata-filters-list .collaborator-check-icon .sf-metadata-icon-check-mark {
   fill: #798d99;
   font-size: 12px;
 }
@@ -246,83 +246,83 @@
   background: #eaeaea;
 }
 
-.filters-list .collaborator-show {
+.sf-metadata-filters-list .collaborator-show {
   flex: 1;
 }
 
-.filters-list .collaborator-avatar-container {
+.sf-metadata-filters-list .collaborator-avatar-container {
   width: 16px;
   height: 16px;
   display: flex;
   align-items: center;
 }
 
-.filters-list .collaborator-avatar {
+.sf-metadata-filters-list .collaborator-avatar {
   width: 16px;
   height: 16px;
   border-radius: 50%;
 }
 
-.filters-list .collaborator-name {
+.sf-metadata-filters-list .collaborator-name {
   margin-left: 5px;
   max-width: 200px;
 }
 
-.filters-list .option-collaborator {
+.sf-metadata-filters-list .option-collaborator {
   display: flex;
 }
 
-.filters-list .collaborator-container {
+.sf-metadata-filters-list .collaborator-container {
   flex: 1;
   display: flex;
   align-items: center;
 }
 
-.filters-list .popover-add-tool {
+.sf-metadata-filters-list .popover-add-tool {
   border-top: none;
   color: #666666;
 }
 
-.filters-list .popover-add-tool .popover-add-icon {
+.sf-metadata-filters-list .popover-add-tool .popover-add-icon {
   margin-right: 14px;
 }
 
-.filters-list .option-group {
+.sf-metadata-filters-list .sf-metadata-option-group {
   max-height: 360px;
   overflow: auto;
 }
 
-.filters-list .filter-container-readonly .sf-metadata-select .selected-option-show,
-.filters-list .filter-conjunction-readonly .sf-metadata-select .selected-option-show {
+.sf-metadata-filters-list .filter-container-readonly .sf-metadata-select .selected-option-show,
+.sf-metadata-filters-list .filter-conjunction-readonly .sf-metadata-select .selected-option-show {
   width: 100%;
 }
 
 .dropdown-item .collaborator,
-.filters-list .option-group .option-group-content .collaborator {
+.sf-metadata-filters-list .sf-metadata-option-group .sf-metadata-option-group-content .collaborator {
   background-color: unset;
 }
 
-.filters-list .sf-metadata-select .selected-option-show .remove-container {
+.sf-metadata-filters-list .sf-metadata-select .selected-option-show .remove-container {
   display: none;
 }
 
-.filter-header-icon {
+.sf-metadata-filter-header-icon {
   display: inline-block;
   padding: 0 0.3125rem;
   margin-left: -0.3125rem;
 }
 
-.filter-header-icon .sf-metadata-icon {
+.sf-metadata-filter-header-icon .sf-metadata-icon {
   font-size: 14px;
   fill: #aaa;
   cursor: default;
 }
 
-.option:hover .filter-header-icon .sf-metadata-icon,
-.option.option-active .filter-header-icon .sf-metadata-icon {
+.sf-metadata-option:hover .sf-metadata-filter-header-icon .sf-metadata-icon,
+.sf-metadata-option.sf-metadata-option-active .sf-metadata-filter-header-icon .sf-metadata-icon {
   fill: #fff;
 }
 
-.option:not(.option-active):hover .filter-header-icon .sf-metadata-icon {
+.sf-metadata-option:not(.sf-metadata-option-active):hover .sf-metadata-filter-header-icon .sf-metadata-icon {
   fill: #aaa;
 }
diff --git a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
index af012f81e1..d3aaa68749 100644
--- a/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
+++ b/frontend/src/metadata/metadata-view/components/popover/filter-popover/widgets/index.js
@@ -109,7 +109,7 @@ class FiltersList extends Component {
     let { filters, className, emptyPlaceholder, columns } = this.props;
     const isEmpty = filters.length === 0;
     return (
-      <div className={classnames('filters-list', { 'empty-filters-container': isEmpty }, { [className]: className })}>
+      <div className={classnames('sf-metadata-filters-list', { 'empty-filters-container': isEmpty }, { [className]: className })}>
         {isEmpty && <div className="empty-filters-list">{emptyPlaceholder}</div>}
         {!isEmpty &&
           filters.map((filter, index) => {
diff --git a/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js b/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
index eddd03e258..aaaa41d949 100644
--- a/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
+++ b/frontend/src/metadata/metadata-view/components/popover/groupbys-popover/groupbys/groupby-item.js
@@ -74,8 +74,8 @@ const GroupbyItem = memo(({
         value: { column },
         label: (
           <Fragment>
-            <span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
-            <span className='select-option-name'>{name}</span>
+            <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
+            <span className="select-option-name">{name}</span>
           </Fragment>
         )
       };
@@ -90,10 +90,10 @@ const GroupbyItem = memo(({
     return [
       {
         value: { sortType: SORT_TYPE.UP },
-        label: <span className='select-option-name'>{gettext('Up')}</span>
+        label: <span className="select-option-name">{gettext('Up')}</span>
       }, {
         value: { sortType: SORT_TYPE.DOWN },
-        label: <span className='select-option-name'>{gettext('Down')}</span>
+        label: <span className="select-option-name">{gettext('Down')}</span>
       }
     ];
   }, []);
@@ -108,7 +108,7 @@ const GroupbyItem = memo(({
     return granularityList.map((granularity) => {
       return {
         value: granularity,
-        label: <span className='select-option-name'>{gettext(displayGranularity[granularity])}</span>,
+        label: <span className="select-option-name">{gettext(displayGranularity[granularity])}</span>,
       };
     });
   }, [columns, groupby]);
@@ -118,7 +118,7 @@ const GroupbyItem = memo(({
     const countType = getSelectedCountType(column, count_type);
     if (countType) {
       return {
-        label: <span className='select-option-name'>{gettext(countType)}</span>
+        label: <span className="select-option-name">{gettext(countType)}</span>
       };
     }
   }, [column, groupby]);
diff --git a/frontend/src/metadata/metadata-view/components/popover/index.css b/frontend/src/metadata/metadata-view/components/popover/index.css
index c1ecf778f4..bd7f30fde7 100644
--- a/frontend/src/metadata/metadata-view/components/popover/index.css
+++ b/frontend/src/metadata/metadata-view/components/popover/index.css
@@ -29,3 +29,7 @@
 .sf-metadata-filter-popover .popover-add-tool.disabled {
   color: #c2c2c2;
 }
+
+.sf-metadata-select.custom-select {
+  font-size: 14px;
+}
diff --git a/frontend/src/metadata/metadata-view/components/popover/sort-popover/index.jsx b/frontend/src/metadata/metadata-view/components/popover/sort-popover/index.jsx
index 08ff33c1f9..d670c5061e 100644
--- a/frontend/src/metadata/metadata-view/components/popover/sort-popover/index.jsx
+++ b/frontend/src/metadata/metadata-view/components/popover/sort-popover/index.jsx
@@ -151,8 +151,8 @@ class SortPopover extends Component {
         value: { column },
         label: (
           <Fragment>
-            <span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
-            <span className='select-option-name'>{name}</span>
+            <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
+            <span className=''>{name}</span>
           </Fragment>
         )
       };
@@ -163,7 +163,7 @@ class SortPopover extends Component {
     return SORT_TYPES.map(sortType => {
       return {
         value: { sortType },
-        label: <span className='select-option-name'>{gettext(sortType)}</span>
+        label: <span className="select-option-name">{gettext(sortType)}</span>
       };
     });
   };
@@ -183,15 +183,15 @@ class SortPopover extends Component {
     let selectedColumn = {
       label: (
         <Fragment>
-          <span className="filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
-          <span className='select-option-name' title={name} aria-label={name}>{name}</span>
+          <span className="sf-metadata-filter-header-icon"><Icon iconName={COLUMNS_ICON_CONFIG[type]} /></span>
+          <span className="select-option-name" title={name} aria-label={name}>{name}</span>
         </Fragment>
       )
     };
 
     let selectedTypeShow = sort.sort_type;
     let selectedSortType = selectedTypeShow && {
-      label: <span className='select-option-name'>{gettext(selectedTypeShow)}</span>
+      label: <span className="select-option-name">{gettext(selectedTypeShow)}</span>
     };
 
     return (
diff --git a/frontend/src/metadata/metadata-view/components/table/index.css b/frontend/src/metadata/metadata-view/components/table/index.css
index 903d1d3b7c..dfcf3fc992 100644
--- a/frontend/src/metadata/metadata-view/components/table/index.css
+++ b/frontend/src/metadata/metadata-view/components/table/index.css
@@ -395,20 +395,6 @@
   flex-direction: column;
 }
 
-/* custom table filters */
-.table-filters .filters-list .filter-item .filter-term {
-  max-width: unset;
-}
-
-.table-filters .filters-list .sf-metadata-select.custom-select {
-  max-width: 700px;
-}
-
-.table-filters .filters-list .single-select-option,
-.table-filters .filters-list .multiple-select-option {
-  max-width: 250px;
-}
-
 .sf-metadata-wrapper .sf-metadata-main {
   flex: 1;
   overflow: hidden;