TypeScript version of pds-toolkit-react (#9177)

* Update pds-toolkit Testing first TS version * Update releaseNoteCategories.json Update to use new tag numbering * fix typo * Update pds-toolkit-react * Revert "Update releaseNoteCategories.json" This reverts commit 497ef26. * Update tag colors for release notes categories * Update pds-toolkit version * Alternate: more contrast for a11y * Update releaseNotePopoverCategorySelector.js Remove `updateQueryStrings()` call — this had been moved to the template file. * Use useLayoutEffect to set isLoaded state and add isDisabled state to PopoverButton * fix: handle null categories in release notes filtering to prevent errors --------- Co-authored-by: M Miller <[email protected]> Co-authored-by: gfbollingerHakuna <[email protected]>
pantheon-systems · Sep 23, 2024 · d398893 · d398893
1 parent 840e166
commit d398893
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 58 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/source/releasenotescategories/releaseNoteCategories.json b/source/releasenotescategories/releaseNoteCategories.json
@@ -3,37 +3,37 @@
     {
       "slug": "account-management",
       "displayName": "Account management",
-      "color": "color-1",
+      "color": "color-3",
       "description": "Highlights updates related to account permissions, user roles, and any changes that impact how users manage and interact with their accounts"
     },
     {
       "slug": "action-required",
       "displayName": "Action required",
-      "color": "color-3",
+      "color": "color-2",
       "description": "Requires customer to act in order to avoid disruption"
     },
     {
       "slug": "billing",
       "displayName": "Billing & Finance",
-      "color": "color-1",
+      "color": "color-5",
       "description": "Covers finance and billing-related updates, allowing billing and finance managers to track changes affecting their financial aspects"
     },
     {
       "slug": "deprecated",
       "displayName": "Deprecated",
-      "color": "color-4",
+      "color": "color-6",
       "description": "Reserved for updates indicating the phasing out or discontinuation of specific features or functionalities"
     },
     {
       "slug": "documentation",
       "displayName": "Pantheon Docs",
-      "color": "color-4",
+      "color": "color-18",
       "description": "Reserved for updates that involve substantive changes, additions, or clarifications within Pantheon Docs — the centralized hub containing manuals and essential documentation for Pantheon users"
     },
     {
       "slug": "drupal",
       "displayName": "Drupal",
-      "color": "color-9",
+      "color": "color-7",
       "description": "Tailored for updates specific to the Drupal content management system, helping Drupal users stay informed about platform changes that directly impact their workflows"
     },
     {
@@ -45,19 +45,19 @@
     {
       "slug": "front-end-sites",
       "displayName": "Front-End Sites",
-      "color": "color-9",
+      "color": "color-12",
       "description": "Focuses on updates related to Front-End Site (FES) enhancements, ensuring that developers and designers stay informed about changes affecting how they use the product"
     },
     {
       "slug": "general",
       "displayName": "General",
-      "color": "color-4",
+      "color": "color-6",
       "description": "Serves as a catch-all for updates that don't neatly fit into specific categories, offering a broad overview of general changes on the Pantheon platform"
     },
     {
       "slug": "infrastructure",
       "displayName": "Infrastructure",
-      "color": "color-8",
+      "color": "color-9",
       "description": "Details changes related to the underlying technology and architecture of the Pantheon platform, providing insights into changes that may impact performance and reliability"
     },
     {
@@ -69,49 +69,49 @@
     {
       "slug": "new-feature",
       "displayName": "New feature",
-      "color": "color-7",
+      "color": "color-19",
       "description": "Consolidates information about both new features and improvements, providing users with insights into enhancements that contribute to a better overall experience"
     },
     {
       "slug": "performance",
       "displayName": "Performance",
-      "color": "color-6",
+      "color": "color-16",
       "description": "Highlights updates focused on optimizing the speed, efficiency, and overall performance of the Pantheon platform, giving users insights into improvements that enhance user experience"
     },
     {
       "slug": "policy",
       "displayName": "Policy",
-      "color": "color-10",
+      "color": "color-8",
       "description": "Communicates updates related to platform policies, ensuring users are aware of any changes in rules or guidelines that may impact their usage"
     },
     {
       "slug": "security",
       "displayName": "Security",
-      "color": "color-5",
+      "color": "color-15",
       "description": "Addresses security-related updates, emphasizing the importance of staying informed about changes aimed at maintaining a secure and protected environment for users"
     },
     {
       "slug": "tools-apis",
       "displayName": "Tools & APIs",
-      "color": "color-2",
+      "color": "color-1",
       "description": "Keeps users informed about updates related to tools and APIs, helping developers understand changes that may impact their workflows and integrations"
     },
     {
       "slug": "user-interface",
       "displayName": "User interface",
-      "color": "color-2",
+      "color": "color-11",
       "description": "Highlights updates related to changes in the user interface, ensuring that designers, marketers, and other users are aware of alterations to the visual and interactive elements of the platform"
     },
     {
       "slug": "wordpress",
       "displayName": "WordPress",
-      "color": "color-9",
+      "color": "color-10",
       "description": "Tailored for updates specific to the WordPress content management system, helping WordPress users stay informed about platform changes that directly impact their workflows"
     },
     {
       "slug": "plugins",
       "displayName": "Plugins",
-      "color": "color-7",
+      "color": "color-10",
       "description": "Keeps users informed about updates to WordPress plugins that we maintain."
     },
     {

diff --git a/src/components/releaseNotePopoverCategorySelector.js b/src/components/releaseNotePopoverCategorySelector.js
@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { activeReleaseNoteCategories } from "../data/releaseNoteCategories"
 import { Button, FlexContainer, Popover } from "@pantheon-systems/pds-toolkit-react"
 
-const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage, updateQueryStrings}) => {
+const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage, isDisabled}) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
 
   // Get the active categories data.
@@ -25,7 +25,6 @@ const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage
 
     // Move pager to the first page
     setCurrentPage(1)
-    updateQueryStrings()
   }
 
   const handleClearCategoriesFilters = () => {
@@ -104,6 +103,7 @@ const ReleaseNotePopoverCategorySelector = ({filters, setFilters, setCurrentPage
       iconName={popoverTriggerIcon}
       displayType='icon-end'
       onClick={() => setIsPopoverOpen(true)}
+      disabled={isDisabled}
     />
   )
 

diff --git a/src/components/releaseNotesPager.js b/src/components/releaseNotesPager.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { Icon } from "@pantheon-systems/pds-toolkit-react"
 import { navigate } from 'gatsby'
 
-const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStrings }) => {
+const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStrings, setIsPageLoaded }) => {
   const scrollToTop = () => {
     window.scrollTo({
       top: 0,
@@ -11,6 +11,7 @@ const ReleaseNotesPager = ({currentPage, setCurrentPage, totalPagesRef, queryStr
   }
 
   const handlePageChange = (newPage) => {
+    setIsPageLoaded(false)
     setCurrentPage(newPage)
     navigate(`/release-notes/${newPage}/?${queryStrings}`)
     scrollToTop()

diff --git a/src/templates/releaseNotesListing/index.js b/src/templates/releaseNotesListing/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from "react"
+import React, { useEffect, useState, useRef, useLayoutEffect } from "react"
 import { graphql, navigate } from "gatsby"
 import debounce from "lodash.debounce"
 import Mark from "mark.js"
@@ -37,6 +37,7 @@ const ReleaseNotesListingTemplate = ({ data }) => {
   })
   const [currentPage, setCurrentPage] = useState(1)
   const [queryStrings, setQueryStrings] = useState('')
+  const [isLoaded, setIsLoaded] = useState(false);
 
   const notesPerPage = 8
   let totalPagesRef = useRef(0)
@@ -79,8 +80,10 @@ const ReleaseNotesListingTemplate = ({ data }) => {
       // If there are selected categories, filter the data to include only items that belong to at least one of those categories
       if(filters.categories.length > 0){
         newFilteredData = newFilteredData.filter(item => {
+          const categories = item.node.frontmatter.categories || []
+
           // Check if any category of the current item matches any of the selected categories
-          return item.node.frontmatter.categories.some(category => {
+          return categories.some(category => {
             return filters.categories.some(filterCategory => filterCategory.slug === category)
           })
         })
@@ -241,6 +244,10 @@ const ReleaseNotesListingTemplate = ({ data }) => {
   // Preprocess intro text.
   const introText = data.releasenotesYaml.introText
 
+  useLayoutEffect(() => {
+    setIsLoaded(true);
+  }, []);
+
   return (
     <Layout containerWidth={containerWidth} excludeSearch footerBorder>
       <SEO
@@ -285,14 +292,8 @@ const ReleaseNotesListingTemplate = ({ data }) => {
                 onChange={debouncedHandleInputChange}
               />
             </div>
-            <FlexContainer flexWrap='wrap' className='rn-popover-tigger-and-tags' >
-              <ReleaseNotePopoverCategorySelector
-                filters={filters}
-                setFilters={setFilters}
-                setCurrentPage={setCurrentPage}
-                updateQueryStrings={updateQueryStrings}
-                queryStrings={queryStrings}
-              />
+            <FlexContainer flexWrap='wrap' className='rn-popover-trigger-and-tags' >
+              <ReleaseNotePopoverCategorySelector filters={filters} setFilters={setFilters} setCurrentPage={setCurrentPage} isDisabled={!isLoaded} />
               <FlexContainer mobileFlex='same' spacing='narrow' flexWrap='wrap' >
                 {
                   filters && filters.categories.map(item => {
@@ -321,7 +322,7 @@ const ReleaseNotesListingTemplate = ({ data }) => {
             setCurrentPage={setCurrentPage}
             totalPagesRef={totalPagesRef}
             queryStrings={queryStrings}
-            updateQueryStrings={updateQueryStrings}
+            setIsPageLoaded={setIsLoaded}
           />
         </Container>
       </main>

diff --git a/src/templates/releaseNotesListing/style.css b/src/templates/releaseNotesListing/style.css
@@ -28,13 +28,13 @@
   z-index: 100;
 }
 
-.rn-popover-tigger-and-tags{
+.rn-popover-trigger-and-tags{
   align-items: center;
   justify-content: flex-start;
 }
 
 @media(max-width: 640px){
-  .rn-popover-tigger-and-tags{
+  .rn-popover-trigger-and-tags{
     align-items: flex-start;
   }
 }
@@ -94,4 +94,4 @@
 
 .rss-feed-link-icon{
   color: var(--pds-color-social-rss);
-}
+}