Merge branch 'master' into davidh/eng-527-dropdown-interaction

pluralsh · Aug 24, 2022 · 8484391 · 8484391
2 parents a409d79 + 767e6e5
commit 8484391
Show file tree

Hide file tree

Showing 10 changed files with 191 additions and 120 deletions.
diff --git a/www/src/components/marketplace/MarketplaceRepositories.js b/www/src/components/marketplace/MarketplaceRepositories.js
@@ -252,12 +252,14 @@ function MarketplaceRepositories({ installed }) {
           >
             <LinkTabWrap
               key="marketplace"
+              textValue="Marketplace"
               to="/marketplace"
             >
               <Tab>Marketplace</Tab>
             </LinkTabWrap>
             <LinkTabWrap
               key="installed"
+              textValue="Installed"
               to="/installed"
             >
               <Tab>Installed</Tab>

diff --git a/www/src/components/marketplace/MarketplaceSidebar.js b/www/src/components/marketplace/MarketplaceSidebar.js
@@ -12,13 +12,30 @@ import { capitalize } from '../../utils/string'
 
 import { CATEGORIES_QUERY, TAGS_QUERY } from './queries'
 
-function MarketplaceSidebarCheckbox({ toggled, onClick, label }) {
+function AccordionWithExpanded({ children, ...props }) {
+  const [expanded, setExpanded] = useState(false)
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onExpand={() => setExpanded(!expanded)}
+      {...props}
+    >
+      {children(expanded)}
+    </Accordion>
+  )
+}
+
+function MarketplaceSidebarCheckbox({
+  toggled, onClick, label, trapFocus = false,
+}) {
   return (
     <Checkbox
       mb={0.25}
       small
       checked={toggled}
       onChange={onClick}
+      tabIndex={trapFocus ? 0 : -1}
     >
       <P
         body2
@@ -77,42 +94,44 @@ function MarketplaceSidebar(props) {
     const sortedCategories = filteredCategories.slice().sort((a, b) => a.category.localeCompare(b.category))
 
     return (
-      <Accordion
+      <AccordionWithExpanded
         ghost
         defaultExpanded
         title={`Categories (${sortedCategories.length})`}
         borderBottom="1px solid border !important"
       >
-        {sortedCategories.map(({ category }) => (
+        {expanded => sortedCategories.map(({ category }) => (
           <MarketplaceSidebarCheckbox
             key={category}
             toggled={isToggled('category', category)}
             onClick={() => handleToggle('category', category)}
             label={capitalize(category)}
+            trapFocus={expanded}
           />
         ))}
-      </Accordion>
+      </AccordionWithExpanded>
     )
   }
 
   function renderPublishers() {
     const sortedPublishers = ['Plural']
 
     return (
-      <Accordion
+      <AccordionWithExpanded
         ghost
         title={`Publisher (${sortedPublishers.length})`}
         borderBottom="1px solid border !important"
       >
-        {sortedPublishers.map(publisher => (
+        {expanded => sortedPublishers.map(publisher => (
           <MarketplaceSidebarCheckbox
             key={publisher}
             toggled={isToggled('publisher', publisher)}
             onClick={() => handleToggle('publisher', publisher)}
             label={capitalize(publisher)}
+            trapFocus={expanded}
           />
         ))}
-      </Accordion>
+      </AccordionWithExpanded>
     )
   }
 
@@ -122,45 +141,54 @@ function MarketplaceSidebar(props) {
     const resultTags = search ? fuse.search(search).map(({ item }) => item) : sortedTags.filter((x, i) => i < nDisplayedTags)
 
     return (
-      <Accordion
+      <AccordionWithExpanded
         ghost
         defaultExpanded
         title={`Tags (${sortedTags.length}${((nDisplayedTags < tags.length) || hasMoreTags) ? '+' : ''})`}
       >
-        <Input
-          medium
-          width="100%"
-          placeholder="Filter"
-          value={search}
-          onChange={event => setSearch(event.target.value)}
-          endIcon={search ? (
-            <CloseIcon
-              size={8}
-              mt={0.2}
-              cursor="pointer"
-              onClick={() => setSearch('')}
+        {expanded => (
+          <>
+            <Input
+              medium
+              width="100%"
+              placeholder="Filter"
+              value={search}
+              onChange={event => setSearch(event.target.value)}
+              inputProps={{
+                tabIndex: expanded ? 0 : -1,
+              }}
+              endIcon={search ? (
+                <CloseIcon
+                  size={8}
+                  mt={0.2}
+                  cursor="pointer"
+                  onClick={() => setSearch('')}
+                />
+              ) : null}
             />
-          ) : null}
-        />
-        {resultTags.map(({ tag, count }) => (
-          <MarketplaceSidebarCheckbox
-            key={tag}
-            toggled={isToggled('tag', tag)}
-            onClick={() => handleToggle('tag', tag)}
-            label={`${tag} (${count})`}
-          />
-        ))}
-        {((nDisplayedTags < tags.length) || hasMoreTags) && !search && (
-          <A
-            mt={0.5}
-            ml="22px"
-            color="text-light"
-            onClick={handleMoreTagsClick}
-          >
-            See More +
-          </A>
+            {resultTags.map(({ tag, count }) => (
+              <MarketplaceSidebarCheckbox
+                key={tag}
+                toggled={isToggled('tag', tag)}
+                onClick={() => handleToggle('tag', tag)}
+                label={`${tag} (${count})`}
+                trapFocus={expanded}
+              />
+            ))}
+            {((nDisplayedTags < tags.length) || hasMoreTags) && !search && (
+              <A
+                mt={0.5}
+                ml="22px"
+                color="text-light"
+                onClick={handleMoreTagsClick}
+                tabIndex={expanded ? 0 : -1}
+              >
+                See More +
+              </A>
+            )}
+          </>
         )}
-      </Accordion>
+      </AccordionWithExpanded>
     )
   }
 

diff --git a/www/src/components/profile/MyProfile.js b/www/src/components/profile/MyProfile.js
@@ -71,6 +71,7 @@ export function MyProfile() {
           {DIRECTORY.map(({ label, path }) => (
             <LinkTabWrap
               key={path}
+              textValue={label}
               to={path}
             >
               <Tab>{label}</Tab>
@@ -79,11 +80,12 @@ export function MyProfile() {
         </TabList>
       </ResponsiveLayoutSidenavContainer>
       <ResponsiveLayoutSpacer />
-      <ResponsiveLayoutContentContainer>
-        <TabPanel stateRef={tabStateRef}>
-          <Outlet />
-        </TabPanel>
-      </ResponsiveLayoutContentContainer>
+      <TabPanel
+        as={<ResponsiveLayoutContentContainer />}
+        stateRef={tabStateRef}
+      >
+        <Outlet />
+      </TabPanel>
       <ResponsiveLayoutSpacer />
     </Flex>
   )

diff --git a/www/src/components/repos/Chart.js b/www/src/components/repos/Chart.js
@@ -259,13 +259,14 @@ export default function Chart() {
           </TabList>
         </ResponsiveLayoutSidenavContainer>
         <ResponsiveLayoutSpacer />
-        <ResponsiveLayoutContentContainer>
-          <TabPanel stateRef={tabStateRef}>
-            <Outlet
-              context={{ helmChart: chart, currentHelmChart: currentVersion }}
-            />
-          </TabPanel>
-        </ResponsiveLayoutContentContainer>
+        <TabPanel
+          as={<ResponsiveLayoutContentContainer />}
+          stateRef={tabStateRef}
+        >
+          <Outlet
+            context={{ helmChart: chart, currentHelmChart: currentVersion }}
+          />
+        </TabPanel>
         <ResponsiveLayoutSidecarContainer width="200px">
           <Box
             direction="column"

diff --git a/www/src/components/repos/Docker.js b/www/src/components/repos/Docker.js
@@ -215,11 +215,12 @@ export function Docker() {
           </TabList>
         </ResponsiveLayoutSidenavContainer>
         <ResponsiveLayoutSpacer />
-        <ResponsiveLayoutContentContainer>
-          <TabPanel stateRef={tabStateRef}>
-            <Outlet context={{ image, filter, setFilter }} />
-          </TabPanel>
-        </ResponsiveLayoutContentContainer>
+        <TabPanel
+          as={<ResponsiveLayoutContentContainer />}
+          stateRef={tabStateRef}
+        >
+          <Outlet context={{ image, filter, setFilter }} />
+        </TabPanel>
         <ResponsiveLayoutSidecarContainer width="200px">
           <Codeline marginBottom="xlarge">{`docker pull ${imageName}`}</Codeline>
           <DetailContainer

diff --git a/www/src/components/repos/Terraform.js b/www/src/components/repos/Terraform.js
@@ -161,16 +161,17 @@ export default function Terraform() {
           </TabList>
         </ResponsiveLayoutSidenavContainer>
         <ResponsiveLayoutSpacer />
-        <ResponsiveLayoutContentContainer>
-          <TabPanel stateRef={tabStateRef}>
-            <Outlet
-              context={{
-                terraformChart: terraformModule,
-                currentTerraformChart: currentVersion,
-              }}
-            />
-          </TabPanel>
-        </ResponsiveLayoutContentContainer>
+        <TabPanel
+          as={<ResponsiveLayoutContentContainer />}
+          stateRef={tabStateRef}
+        >
+          <Outlet
+            context={{
+              terraformChart: terraformModule,
+              currentTerraformChart: currentVersion,
+            }}
+          />
+        </TabPanel>
         <ResponsiveLayoutSidecarContainer width="200px">
           <Box
             direction="column"

diff --git a/www/src/components/repos/common/ImagePullMetrics.js b/www/src/components/repos/common/ImagePullMetrics.js
@@ -3,24 +3,39 @@ import { Box } from 'grommet'
 import { useOutletContext } from 'react-router-dom'
 
 import { DURATIONS, Graph } from 'components/utils/Graph'
-import { useMemo } from 'react'
+import { useMemo, useRef } from 'react'
 import moment from 'moment'
-import { PageTitle, SubTab } from 'pluralsh-design-system'
+import {
+  PageTitle, SubTab, TabList, TabPanel,
+} from 'pluralsh-design-system'
 import { generateColor } from 'components/utils/colors'
 
 function RangePicker({ duration, setDuration }) {
+  const tabStateRef = useRef()
+  const selectedKey = `${duration.offset}+${duration.step}`
+
   return (
-    <Box direction="row">
-      {DURATIONS.map((d, i) => (
+    <TabList
+      stateRef={tabStateRef}
+      stateProps={{
+        orientation: 'horizontal',
+        selectedKey,
+        onSelectionChange: key => {
+          const dur = DURATIONS.find(d => key === `${d.offset}+${d.step}`)
+
+          if (dur) setDuration(dur)
+        },
+      }}
+    >
+      {DURATIONS.map(d => (
         <SubTab
-          key={i}
-          active={duration.step === d.step && duration.offset === d.offset}
-          onClick={() => setDuration(d)}
+          key={`${d.offset}+${d.step}`}
+          textValue={d.label}
         >
           {d.label}
         </SubTab>
       ))}
-    </Box>
+    </TabList>
   )
 }
 
@@ -34,7 +49,9 @@ export default function ImagePullMetrics() {
       data: values.map(({ time, value }) => ({ x: moment(time).toDate(), y: value })),
       color: generateColor(i),
     }
-  }), [dockerRepository.metrics, dockerRepository.name])
+  }),
+  [dockerRepository.metrics, dockerRepository.name])
+  const tabStateRef = useRef()
 
   return (
     <Box
@@ -44,23 +61,32 @@ export default function ImagePullMetrics() {
     >
       <PageTitle heading="Pull metrics">
         <RangePicker
+          tabStateRef={tabStateRef}
           duration={{ offset: filter.offset, step: filter.precision }}
           setDuration={({ offset, step, tick }) => setFilter({
-            ...filter, offset, precision: step, tick,
+            ...filter,
+            offset,
+            precision: step,
+            tick,
           })}
         />
       </PageTitle>
-      <Box
-        overflow={{ vertical: 'hidden' }}
-        height="350px"
+      <TabPanel
+        stateRef={tabStateRef}
+        as={(
+          <Box
+            overflow={{ vertical: 'hidden' }}
+            height="350px"
+          />
+        )}
       >
         <Graph
           data={data}
           precision={filter.precision}
           offset={filter.offset}
           tick={filter.tick}
         />
-      </Box>
+      </TabPanel>
     </Box>
   )
 }