Fix minor bugs

src/components/Filter/FilterSearch.tsx

@@ -22,7 +22,7 @@ const useStyles = makeStyles(
       display: "inline-block"
     },
     tabActionContainer: {
-      borderBottom: "1px solid #e8e8e8",
+      borderBottom: `1px solid ${theme.palette.divider}`,
       display: "flex",
       justifyContent: "flex-end",
       marginTop: theme.spacing.unit,

src/components/FilterBar/FilterBar.tsx

@@ -64,6 +64,9 @@ const FilterBar: React.FC<FilterBarProps> = ({
           return (
             <FilterChips
               currencySymbol={currencySymbol}
+              displayTabAction={
+                !!initialSearch ? (isCustom ? "save" : "delete") : null
+              }
               menu={filterMenu}
               filtersList={filtersList}
               filterLabel={filterLabel}

src/components/SearchBar/SearchBar.tsx

@@ -23,9 +23,7 @@ const SearchBar: React.FC<SearchBarProps> = props => {
     onTabDelete,
     onTabSave
   } = props;
-  const [search, setSearch] = React.useState(initialSearch);
   const intl = useIntl();
-  React.useEffect(() => setSearch(initialSearch), [initialSearch]);
 
   const isCustom = currentTab === tabs.length + 1;
 
@@ -50,7 +48,9 @@ const SearchBar: React.FC<SearchBarProps> = props => {
         )}
       </FilterTabs>
       <FilterSearch
-        displaySearchAction={!!search ? (isCustom ? "save" : "delete") : null}
+        displaySearchAction={
+          !!initialSearch ? (isCustom ? "save" : "delete") : null
+        }
         initialSearch={initialSearch}
         searchPlaceholder={searchPlaceholder}
         onSearchChange={onSearchChange}

src/components/TableFilter/FilterChips.tsx

@@ -28,7 +28,7 @@ const useStyles = makeStyles(
       justifyContent: "space-around",
       margin: `0 ${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
       marginLeft: 0,
-      padding: "0 16px"
+      padding: `0 ${theme.spacing.unit * 2}px`
     },
     filterChipContainer: {
       display: "flex",
@@ -76,6 +76,7 @@ const useStyles = makeStyles(
 );
 
 interface FilterChipProps extends FilterActionsProps {
+  displayTabAction: "save" | "delete" | null;
   filtersList: Filter[];
   search: string;
   isCustomSearch: boolean;
@@ -85,6 +86,7 @@ interface FilterChipProps extends FilterActionsProps {
 
 export const FilterChips: React.FC<FilterChipProps> = ({
   currencySymbol,
+  displayTabAction,
   filtersList,
   menu,
   filterLabel,
@@ -93,8 +95,7 @@ export const FilterChips: React.FC<FilterChipProps> = ({
   search,
   onFilterAdd,
   onFilterSave,
-  onFilterDelete,
-  isCustomSearch
+  onFilterDelete
 }) => {
   const theme = useTheme();
   const classes = useStyles({ theme });
@@ -127,7 +128,7 @@ export const FilterChips: React.FC<FilterChipProps> = ({
               </div>
             ))}
           </div>
-          {isCustomSearch ? (
+          {displayTabAction === "save" ? (
             <Link onClick={onFilterSave}>
               <FormattedMessage
                 defaultMessage="Save Custom Search"
@@ -135,12 +136,14 @@ export const FilterChips: React.FC<FilterChipProps> = ({
               />
             </Link>
           ) : (
-            <Link onClick={onFilterDelete}>
-              <FormattedMessage
-                defaultMessage="Delete Search"
-                description="button"
-              />
-            </Link>
+            displayTabAction === "delete" && (
+              <Link onClick={onFilterDelete}>
+                <FormattedMessage
+                  defaultMessage="Delete Search"
+                  description="button"
+                />
+              </Link>
+            )
           )}
         </div>
       ) : (