Merge pull request #119 from GoogleChromeLabs/add-desc

Add `description` key into `Filter` and info icon to show description
GoogleChromeLabs · Aug 21, 2023 · d4cad97 · d4cad97
2 parents bf5f523 + c65f035
commit d4cad97
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/packages/extension/src/view/devtools/components/tabContent/cookies/cookieFilter/listItem.tsx b/packages/extension/src/view/devtools/components/tabContent/cookies/cookieFilter/listItem.tsx
@@ -21,8 +21,7 @@ import React, { useState } from 'react';
 /**
  * Internal dependencies.
  */
-// eslint-disable-next-line import/no-relative-packages
-import { ArrowDown } from '../../../../../../icons';
+import { ArrowDown, InfoIcon } from '../../../../../../icons';
 import SubList from './subList';
 import type {
   SelectedFilters,
@@ -80,16 +79,23 @@ const ListItem: React.FC<ListItemProps> = ({
 
   return (
     <li className="py-[3px]">
-      <a
-        href="#"
-        className="flex items-center text-asteriod-black dark:text-bright-gray"
-        onClick={toggleSubList}
-      >
-        <span className={showSubList ? '' : '-rotate-90'}>
-          <ArrowDown />
-        </span>
-        <p className="ml-1 leading-normal font-semi-thick">{filter.name}</p>
-      </a>
+      <div className="flex gap-2 items-center">
+        <a
+          href="#"
+          className="flex items-center text-asteriod-black dark:text-bright-gray"
+          onClick={toggleSubList}
+        >
+          <span className={showSubList ? '' : '-rotate-90'}>
+            <ArrowDown />
+          </span>
+          <p className="ml-1 leading-normal font-semi-thick">{filter.name}</p>
+        </a>
+        {filter.description && (
+          <p title={filter.description}>
+            <InfoIcon />
+          </p>
+        )}
+      </div>
       {showSubList && (
         <>
           <SubList

diff --git a/packages/extension/src/view/devtools/stateProviders/filterManagementStore/constants.ts b/packages/extension/src/view/devtools/stateProviders/filterManagementStore/constants.ts
@@ -61,6 +61,8 @@ export const FILTER_MAPPING = [
     keys: 'isCookieSet',
     type: 'boolean',
     order: 10,
+    description:
+      "Whether the cookie was accepted(set) in Chrome's Cookie Store",
   },
 ];
 

diff --git a/packages/extension/src/view/devtools/stateProviders/filterManagementStore/types.ts b/packages/extension/src/view/devtools/stateProviders/filterManagementStore/types.ts
@@ -25,4 +25,5 @@ export interface Filter {
   default?: string;
   sort?: boolean;
   order: number;
+  description?: string;
 }