Merge pull request #174 from GoogleChromeLabs/update-rws-panel

Update RWS panel
GoogleChromeLabs · Oct 10, 2023 · ec833ff · ec833ff
2 parents 8ea93c6 + e38275d
commit ec833ff
Show file tree

Hide file tree

Showing 17 changed files with 120 additions and 106 deletions.
diff --git a/packages/design-system/src/components/bulletList/index.tsx b/packages/design-system/src/components/bulletList/index.tsx
@@ -41,9 +41,15 @@ const BulletList = ({ rows, heading }: BulletListProps) => {
         </>
       )}
       <div className="space-y-4">
-        {rows.map((rowItem) => (
-          <ListRow row={rowItem} key={rowItem?.key ?? rowItem.title} />
-        ))}
+        {rows.length === 0 ? (
+          <p className="text-darkest-gray dark:text-bright-gray">No News</p>
+        ) : (
+          <>
+            {rows.map((rowItem) => (
+              <ListRow row={rowItem} key={rowItem?.key ?? rowItem.title} />
+            ))}
+          </>
+        )}
       </div>
     </>
   );

diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
@@ -76,7 +76,7 @@ const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
             className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray"
             onClick={() => setOpen((prevOpen) => !prevOpen)}
           >
-            {title && <h1>{title}</h1>}
+            {title && <h1 className="text-left">{title}</h1>}
             <ArrowUp
               className={classNames(!open && 'rotate-180 -translate-y-1')}
             />
@@ -113,7 +113,7 @@ const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
                   href="https://privacysandbox.com/news/"
                   target="_blank"
                   rel="noreferrer"
-                  className="leading-6 text-sm text-analytics font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
+                  className="leading-6 text-sm text-analytics dark:text-medium-persian-blue font-semibold px-3 border border-american-silver dark:border-quartz rounded inline-flex gap-2 items-center"
                 >
                   View More <ChevronRight />
                 </a>

diff --git a/packages/design-system/src/icons/check.svg b/packages/design-system/src/icons/check.svg
diff --git a/packages/extension/src/view/design-system/components/infoCard/index.tsx b/packages/extension/src/view/design-system/components/infoCard/index.tsx
@@ -33,10 +33,10 @@ import classNames from 'classnames';
 interface InfoCardProps {
   infoKey: PSInfoKeyType;
   setTitle?: React.Dispatch<React.SetStateAction<string>>;
-  hasHeader?: boolean;
+  className?: string;
 }
 
-const InfoCard = ({ infoKey, setTitle, hasHeader }: InfoCardProps) => {
+const InfoCard = ({ infoKey, setTitle, className }: InfoCardProps) => {
   const [PSInfo, setPSInfo] = useState({} as PSInfoType);
 
   useEffect(() => {
@@ -51,29 +51,12 @@ const InfoCard = ({ infoKey, setTitle, hasHeader }: InfoCardProps) => {
   return (
     <>
       {Object.keys(PSInfo).length ? (
-        <div className={classNames('max-w-2xl', hasHeader && 'm-3')}>
-          <div
-            className={classNames(
-              'p-6 dark:bg-davys-grey',
-              hasHeader
-                ? 'border border-gray-200 dark:border-quartz rounded-lg shadow'
-                : 'pl-4'
-            )}
-          >
-            {hasHeader && (
-              <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
-                {PSInfo.name}
-              </h5>
-            )}
-            <p
-              className={classNames(
-                'mb-3 text-gray-700 dark:text-bright-gray',
-                !hasHeader && 'text-sm'
-              )}
-              dangerouslySetInnerHTML={{ __html: PSInfo.description }}
-            />
-            <LearnMoreDropdown PSInfo={PSInfo} hasSeparator={hasHeader} />
-          </div>
+        <div className={classNames('py-6 ', className)}>
+          <p
+            className="mb-3 text-gray-700 dark:text-bright-gray text-sm"
+            dangerouslySetInnerHTML={{ __html: PSInfo.description }}
+          />
+          <LearnMoreDropdown PSInfo={PSInfo} />
         </div>
       ) : (
         <div className="w-full h-full flex items-center justify-center">

diff --git a/packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx b/packages/extension/src/view/design-system/components/infoCard/tests/infoCard.test.tsx
@@ -56,10 +56,7 @@ describe('should match the json file data with the component', () => {
   test.each(tests)(
     'should match component with enum key prop to json data',
     async ({ input, output }) => {
-      render(<InfoCard infoKey={input} hasHeader={true} />);
-
-      const name = await screen.findByText(output.name);
-      expect(name).toBeInTheDocument();
+      render(<InfoCard infoKey={input} />);
 
       const learnMoreButton = await screen.findByText('Learn more');
       fireEvent.click(learnMoreButton);

diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
@@ -31,7 +31,7 @@ const BounceTracking = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="w-full h-full overflow-auto"
+        className="px-4 max-w-2xl h-full overflow-auto"
         data-testid="bounce-tracking-content"
       >
         <InfoCard infoKey={PSInfoKey.BounceTracking} setTitle={setPageTitle} />

diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
@@ -31,7 +31,7 @@ const Fingerprinting = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="w-full h-full overflow-auto"
+        className="px-4 max-w-2xl h-full overflow-auto"
         data-testid="fingerprinting-content"
       >
         <InfoCard

diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
@@ -31,7 +31,7 @@ const Attribution = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="w-full h-full overflow-auto"
+        className="px-4 max-w-2xl h-full overflow-auto"
         data-testid="attribution-content"
       >
         <InfoCard

diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
@@ -30,7 +30,10 @@ const Topics = () => {
 
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div className="w-full h-full overflow-auto" data-testid="topics-content">
+      <div
+        className="px-4 max-w-2xl h-full overflow-auto"
+        data-testid="topics-content"
+      >
         <InfoCard infoKey={PSInfoKey.Topics} setTitle={setPageTitle} />
       </div>
     </LandingPage>

diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
@@ -30,7 +30,10 @@ const Chips = () => {
 
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
-      <div className="w-full h-full overflow-auto" data-testid="chips-content">
+      <div
+        className="px-4 max-w-2xl h-full overflow-auto"
+        data-testid="chips-content"
+      >
         <InfoCard infoKey={PSInfoKey.Chips} setTitle={setPageTitle} />
       </div>
     </LandingPage>

diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
@@ -25,28 +25,36 @@ import InfoCard from '../../../../design-system/components/infoCard';
 import { PSInfoKey } from '../../../../../utils/fetchPSInfo';
 import RWSJsonGenerator from './jsonGenerator';
 import Insights from './insights';
-import { Button } from '@cookie-analysis-tool/design-system';
+import { Button, LandingPage } from '@cookie-analysis-tool/design-system';
 
 const RelatedWebsiteSets = () => {
   const [showForm, setShowForm] = useState(false);
+  const [pageTitle, setPageTitle] = useState('');
 
   return (
-    <div
-      className="w-full h-full overflow-auto"
-      data-testid="related-website-sets-content"
-    >
-      <InfoCard infoKey={PSInfoKey.RelatedWebsiteSets} hasHeader={true} />
-      <div className="text-raisin-black dark:text-bright-gray max-w-2xl dark:bg-davys-grey border border-gray-200 dark:border-quartz rounded-lg shadow p-6 m-3 flex flex-col gap-3 divide-y divide-gray-200 dark:divide-gray-500">
-        <Insights />
-        <RWSJsonGenerator open={showForm} />
-        <div className="pt-4">
-          <Button
-            text={showForm ? 'Close' : 'Generate RWS JSON Resources'}
-            onClick={() => setShowForm(!showForm)}
-          />
+    <LandingPage title={pageTitle} isLoading={!pageTitle}>
+      <div
+        className="px-4 max-w-2xl h-full overflow-auto divide-y divide-gray-200 dark:divide-gray-500"
+        data-testid="related-website-sets-content"
+      >
+        <InfoCard
+          infoKey={PSInfoKey.RelatedWebsiteSets}
+          setTitle={setPageTitle}
+        />
+        <div className="py-6 text-raisin-black dark:text-bright-gray flex flex-col gap-3">
+          <Insights />
+          <RWSJsonGenerator open={showForm} setOpen={setShowForm} />
+          {!showForm && (
+            <div className="pt-4">
+              <Button
+                text="Generate RWS JSON Resources"
+                onClick={() => setShowForm(true)}
+              />
+            </div>
+          )}
         </div>
       </div>
-    </div>
+    </LandingPage>
   );
 };
 

diff --git a/...tension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx b/...tension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/insights/index.tsx
@@ -27,6 +27,7 @@ import checkURLInRWS, {
   type CheckURLInRWSOutputType,
 } from './utils/checkURLInRWS';
 import SitesList from './sitesList';
+import { Cross } from '@cookie-analysis-tool/design-system';
 
 const Insights = () => {
   const [insightsData, setInsightsData] =
@@ -86,12 +87,16 @@ const Insights = () => {
           <div className="w-6 h-6 rounded-full animate-spin border-t-transparent border-solid border-blue-700 border-2" />
         </div>
       ) : (
-        <div>
+        <div className="space-y-3">
+          <h3 className="text-xl font-semibold">
+            Related Website Sets Membership
+          </h3>
           {insightsData?.isURLInRWS ? (
-            <div>
-              <h4 className="text-lg font-semibold">
-                This site belongs to &quot;Related Website Sets&quot;
-              </h4>
+            <>
+              <p className="text-lg font-medium">
+                <span className="font-serif text-green-700">✓</span> This site
+                belongs to a &quot;Related Website Set&quot;
+              </p>
               <p className="text-sm">
                 Primary Domain:{' '}
                 <a
@@ -104,30 +109,28 @@ const Insights = () => {
                   {insightsData.relatedWebsiteSet?.primary}
                 </a>
               </p>
-              <div>
-                {!insightsData.primary ? (
-                  <>
-                    {Object.entries(
-                      insightsData.relatedWebsiteSet?.rationaleBySite || {}
+              {!insightsData.primary ? (
+                <>
+                  {Object.entries(
+                    insightsData.relatedWebsiteSet?.rationaleBySite || {}
+                  )
+                    .filter(
+                      ([domain]) => getDomain(domain) === insightsData.domain
                     )
-                      .filter(
-                        ([domain]) => getDomain(domain) === insightsData.domain
-                      )
-                      .map(([domain, value]) => (
-                        <p key={domain} className="text-sm mt-4">
-                          Rationale:{' '}
-                          <span className="underline">{value as string}</span>
-                        </p>
-                      ))}
-                  </>
-                ) : (
-                  <p className="mt-4">
-                    This site is the primary domain of the Related Website Set.
-                  </p>
-                )}
-              </div>
+                    .map(([domain, value]) => (
+                      <p key={domain} className="text-sm">
+                        Rationale:{' '}
+                        <span className="underline">{value as string}</span>
+                      </p>
+                    ))}
+                </>
+              ) : (
+                <p>
+                  This site is the primary domain of the Related Website Set.
+                </p>
+              )}
 
-              <div className="flex flex-row gap-4 mt-4 overflow-auto">
+              <div className="flex flex-row gap-4 overflow-auto">
                 <SitesList
                   title="Associated Sites"
                   sites={insightsData.relatedWebsiteSet?.associatedSites || []}
@@ -138,11 +141,12 @@ const Insights = () => {
                 />
                 <SitesList title="ccTLDs" sites={cctlds} />
               </div>
-            </div>
+            </>
           ) : (
-            <h4 className="text-lg font-semibold">
-              This site does not belong to &quot;Related Website Sets&quot;
-            </h4>
+            <p className="text-lg font-medium flex items-center gap-2">
+              <Cross />
+              This site does not belong to a &quot;Related Website Set&quot;
+            </p>
           )}
         </div>
       )}

diff --git a/...on/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx b/...on/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx
@@ -29,13 +29,14 @@ import ServiceSites from './serviceSites';
 import CountrySites from './countrySites';
 import JsonOutput from './jsonOutput';
 import useGeneratorForm from './useGeneratorForm';
-import { Button } from '@cookie-analysis-tool/design-system';
+import { Button, Cross } from '@cookie-analysis-tool/design-system';
 
 interface RWSJsonGeneratorProps {
   open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const RWSJsonGenerator = ({ open }: RWSJsonGeneratorProps) => {
+const RWSJsonGenerator = ({ open, setOpen }: RWSJsonGeneratorProps) => {
   const {
     state: {
       contact,
@@ -93,8 +94,8 @@ const RWSJsonGenerator = ({ open }: RWSJsonGeneratorProps) => {
               required technical validations (see full requirements{' '}
               <a
                 className="text-bright-navy-blue dark:text-jordy-blue hover:opacity-80"
-                title="https://github.com/GoogleChrome/first-party-sets/blob/main/FPS-Submission_Guidelines.md"
-                href="https://github.com/GoogleChrome/first-party-sets/blob/main/FPS-Submission_Guidelines.md"
+                title="https://github.com/GoogleChrome/related-website-sets/blob/main/RWS-Submission_Guidelines.md"
+                href="https://github.com/GoogleChrome/related-website-sets/blob/main/RWS-Submission_Guidelines.md"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -103,6 +104,14 @@ const RWSJsonGenerator = ({ open }: RWSJsonGeneratorProps) => {
               ).
             </p>
             <div className="my-4 bg-anti-flash-white dark:bg-charleston-green border rounded-xl border-gray-200 dark:border-quartz px-4 py-3 shadow">
+              <button
+                onClick={() => {
+                  setOpen(false);
+                }}
+                className="float-right pt-1"
+              >
+                <Cross />
+              </button>
               <p className="text-base my-3">
                 Enter your Related Website Sets details below:
               </p>
@@ -158,7 +167,7 @@ const RWSJsonGenerator = ({ open }: RWSJsonGeneratorProps) => {
                     </div>
                   ) : (
                     <div className="flex gap-2">
-                      <Button text="Submit" type="submit" />
+                      <Button text="Generate" type="submit" />
                       <Button text="Reset" type="reset" variant="secondary" />
                     </div>
                   )}

diff --git a/.../devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/jsonOutput/index.tsx b/.../devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/jsonOutput/index.tsx
@@ -81,8 +81,8 @@ const JsonOutput = ({
           <PullRequestOutput primaryWellKnownOutput={primaryWellKnownOutput} />
           <div className="flex justify-between items-center py-4">
             <a
-              title="https://github.com/GoogleChrome/first-party-sets/pulls"
-              href="https://github.com/GoogleChrome/first-party-sets/pulls"
+              title="https://github.com/GoogleChrome/related-website-sets/pulls"
+              href="https://github.com/GoogleChrome/related-website-sets/pulls"
               target="_blank"
               rel="noreferrer"
             >

diff --git a/...mponents/siteBoundaries/relatedWebsiteSets/jsonGenerator/jsonOutput/pullRequestOutput.tsx b/...mponents/siteBoundaries/relatedWebsiteSets/jsonGenerator/jsonOutput/pullRequestOutput.tsx
@@ -42,8 +42,8 @@ const PullRequestOutput = ({
           Submit a GitHub PR with your Related Site Set to the{' '}
           <a
             className="text-blue-500 hover:opacity-70"
-            title="https://github.com/GoogleChrome/first-party-sets/blob/main/first_party_sets.JSON"
-            href="https://github.com/GoogleChrome/first-party-sets/blob/main/first_party_sets.JSON"
+            title="https://github.com/GoogleChrome/related-website-sets/blob/main/related_website_sets.JSON"
+            href="https://github.com/GoogleChrome/related-website-sets/blob/main/related_website_sets.JSON"
             target="_blank"
             rel="noreferrer"
           >