Merge branch 'rc-ghes-3.10' into subatoi/codeql-cli-rec-ghes310

witaliy12 · Aug 7, 2023 · 0e6fbc4 · 0e6fbc4
2 parents 0d775bd + c820abc
commit 0e6fbc4
Show file tree

Hide file tree

Showing 107 changed files with 17,747 additions and 4,634 deletions.
diff --git a/.github/workflows/triage-stale-check.yml b/.github/workflows/triage-stale-check.yml
@@ -6,7 +6,7 @@ name: Public Repo Stale Check
 
 on:
   schedule:
-    - cron: '20 16 * * *' # Run every day at 16:20 UTC / 8:20 PST
+    - cron: '20 16 * * 1-5' # Run every weekday at 16:20 UTC / 8:20 PST
 
 permissions:
   issues: write
@@ -21,7 +21,7 @@ jobs:
       - uses: actions/stale@1160a2240286f5da8ec72b1c0816ce2481aabf84
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
-          stale-issue-message: 'A stale label has been added to this issue becuase it has been open for 60 days with no activity. To keep this issue open, add a comment within 3 days.'
+          stale-issue-message: 'A stale label has been added to this issue because it has been open for 60 days with no activity. To keep this issue open, add a comment within 3 days.'
           days-before-issue-stale: 60
           days-before-issue-close: 3
           exempt-issue-labels: 'help wanted,never-stale,waiting for review'
@@ -42,7 +42,7 @@ jobs:
           days-before-pr-close: -1 # Never close
           remove-stale-when-updated: false
           operations-per-run: 100
-          only-labels: 'waiting for review'
+          only-pr-labels: 'waiting for review'
           # The hope is that by setting the stale-pr-label to the same label
           # as the label that the stale check looks for, this will result in
           # a comment being posted every 14 days as an infinite loop, which is what

diff --git a/assets/images/help/writing/alerts-rendered.png b/assets/images/help/writing/alerts-rendered.png
diff --git a/components/page-header/Header.tsx b/components/page-header/Header.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
 import { useRouter } from 'next/router'
-import { AnchoredOverlay, Button, Dialog, IconButton } from '@primer/react'
+import { ActionList, ActionMenu, Dialog, IconButton } from '@primer/react'
 import {
   KebabHorizontalIcon,
   LinkExternalIcon,
@@ -30,16 +30,13 @@ import styles from './Header.module.scss'
 export const Header = () => {
   const router = useRouter()
   const { error } = useMainContext()
-  const { isHomepageVersion, currentProduct, allVersions } = useMainContext()
+  const { isHomepageVersion, currentProduct } = useMainContext()
   const { currentVersion } = useVersion()
   const { t } = useTranslation(['header'])
   const isRestPage = currentProduct && currentProduct.id === 'rest'
   const [isSearchOpen, setIsSearchOpen] = useState(false)
   const [scroll, setScroll] = useState(false)
   const { hasAccount } = useHasAccount()
-  const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const openMenuOverlay = useCallback(() => setIsMenuOpen(true), [setIsMenuOpen])
-  const closeMenuOverlay = useCallback(() => setIsMenuOpen(false), [setIsMenuOpen])
   const [isSidebarOpen, setIsSidebarOpen] = useState(false)
   const openSidebar = useCallback(() => setIsSidebarOpen(true), [isSidebarOpen])
   const closeSidebar = useCallback(() => setIsSidebarOpen(false), [isSidebarOpen])
@@ -50,10 +47,7 @@ export const Header = () => {
   const signupCTAVisible =
     hasAccount === false && // don't show if `null`
     (currentVersion === DEFAULT_VERSION || currentVersion === 'enterprise-cloud@latest')
-  const [windowSize, setWindowSize] = useState(0)
-  const handleWindowResize = useCallback(() => {
-    setWindowSize(window.innerWidth)
-  }, [])
+  const { width } = useWidth()
 
   useEffect(() => {
     function onScroll() {
@@ -95,11 +89,9 @@ export const Header = () => {
     if (bodyDiv && body) {
       // The full sidebar automatically shows at the xl window size so unlock
       // scrolling if the overlay was opened and the window size is increased to xl.
-      body.style.overflow = isSidebarOpen && windowSize < 1280 ? 'hidden' : 'auto'
+      body.style.overflow = isSidebarOpen && width && width < 1280 ? 'hidden' : 'auto'
     }
-    window.addEventListener('resize', handleWindowResize)
-    return () => window.removeEventListener('resize', handleWindowResize)
-  }, [isSidebarOpen, windowSize])
+  }, [isSidebarOpen])
 
   // with client side navigation clicking sidebar overlay links doesn't dismiss
   // the overlay so we close it ourselves when the path changes
@@ -121,6 +113,32 @@ export const Header = () => {
     }
   }, [])
 
+  function useWidth() {
+    const hasWindow = typeof window !== 'undefined'
+
+    function getWidth() {
+      const width = hasWindow ? window.innerWidth : null
+      return {
+        width,
+      }
+    }
+
+    const [width, setWidth] = useState(getWidth())
+
+    useEffect(() => {
+      if (hasWindow) {
+        const handleResize = function () {
+          setWidth(getWidth())
+        }
+
+        window.addEventListener('resize', handleResize)
+        return () => window.removeEventListener('resize', handleResize)
+      }
+    }, [hasWindow])
+
+    return width
+  }
+
   return (
     <>
       <div
@@ -230,15 +248,12 @@ export const Header = () => {
 
               {/* The ... navigation menu at medium and smaller widths */}
               <div>
-                <AnchoredOverlay
-                  anchorRef={menuButtonRef}
-                  renderAnchor={(anchorProps) => (
-                    <Button
+                <ActionMenu aria-labelledby="menu-title">
+                  <ActionMenu.Anchor>
+                    <IconButton
                       data-testid="mobile-menu"
-                      className="px-2"
-                      {...anchorProps}
                       icon={KebabHorizontalIcon}
-                      aria-label="Open Menu Bar"
+                      aria-label="Open Menu"
                       sx={
                         isSearchOpen
                           ? // The ... menu button when the smaller width search UI is open.  Since the search
@@ -271,47 +286,42 @@ export const Header = () => {
                               },
                             }
                       }
-                    >
-                      {}
-                    </Button>
-                  )}
-                  open={isMenuOpen}
-                  onOpen={openMenuOverlay}
-                  onClose={closeMenuOverlay}
-                  aria-labelledby="menu-title"
-                >
-                  <div
-                    data-testid="open-mobile-menu"
-                    className={cx('pt-2', !signupCTAVisible && 'pb-2', styles.menuOverlay)}
-                  >
-                    <span id="menu-title" className="f6 px-3 py-2 mb-1 d-block h6 color-fg-muted">
-                      {t('menu')}
-                    </span>
-                    <span className="px-2 pb-2 m-2 d-block d-sm-none">
-                      <VersionPicker mediumOrLower={true} />
-                    </span>
-                    <span className="px-2 pb-2 m-2 d-block">
-                      <LanguagePicker mediumOrLower={true} />
-                    </span>
-                    {isRestPage && allVersions[currentVersion].apiVersions.length > 0 && (
-                      <span className="px-2 pb-2 m-2 d-block">
-                        <ApiVersionPicker />
-                      </span>
-                    )}
-                    {signupCTAVisible && (
-                      <Link
-                        href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
-                        target="_blank"
-                        rel="noopener"
-                        data-testid="mobile-signup"
-                        className="d-flex flex-justify-between flex-items-center color-fg-muted border-top px-3 py-3"
-                      >
-                        {t`sign_up_cta`}
-                        <LinkExternalIcon aria-label="(external site)" />
-                      </Link>
-                    )}
-                  </div>
-                </AnchoredOverlay>
+                    />
+                  </ActionMenu.Anchor>
+                  <ActionMenu.Overlay align="start">
+                    <ActionList>
+                      <ActionList.Group data-testid="open-mobile-menu">
+                        {width && width > 544 ? (
+                          <LanguagePicker mediumOrLower={true} />
+                        ) : (
+                          <LanguagePicker xs={true} />
+                        )}
+                        <ActionList.Divider />
+                        {width && width < 545 && (
+                          <>
+                            <VersionPicker xs={true} />
+                            <ActionList.Divider />
+                          </>
+                        )}
+                        {signupCTAVisible && (
+                          <ActionList.LinkItem
+                            href="https://github.com/signup?ref_cta=Sign+up&ref_loc=docs+header&ref_page=docs"
+                            target="_blank"
+                            rel="noopener"
+                            data-testid="mobile-signup"
+                            className="d-flex color-fg-muted"
+                          >
+                            {t`sign_up_cta`}
+                            <LinkExternalIcon
+                              className="height-full float-right"
+                              aria-label="(external site)"
+                            />
+                          </ActionList.LinkItem>
+                        )}{' '}
+                      </ActionList.Group>
+                    </ActionList>
+                  </ActionMenu.Overlay>
+                </ActionMenu>
               </div>
             </div>
           </div>

diff --git a/components/page-header/LanguagePicker.tsx b/components/page-header/LanguagePicker.tsx
@@ -4,13 +4,14 @@ import { GlobeIcon } from '@primer/octicons-react'
 import { useLanguages } from 'components/context/LanguagesContext'
 import { useTranslation } from 'components/hooks/useTranslation'
 import { useUserLanguage } from 'components/hooks/useUserLanguage'
-import { Picker } from 'src/tools/components/Picker'
+import { ActionList, ActionMenu, IconButton, Link } from '@primer/react'
 
 type Props = {
+  xs?: boolean
   mediumOrLower?: boolean
 }
 
-export const LanguagePicker = ({ mediumOrLower }: Props) => {
+export const LanguagePicker = ({ xs, mediumOrLower }: Props) => {
   const router = useRouter()
   const { languages } = useLanguages()
   const { setUserLanguageCookie } = useUserLanguage()
@@ -37,39 +38,80 @@ export const LanguagePicker = ({ mediumOrLower }: Props) => {
   // in a "denormalized" way.
   const routerPath = router.asPath.split('#')[0]
 
-  return (
-    <div data-testid="language-picker">
-      <Picker
-        defaultText={t('language_picker_default_text')}
-        items={langs.map((lang) => ({
-          text: lang.nativeName || lang.name,
-          selected: lang === selectedLang,
-          href: `/${lang.code}${routerPath}`,
-          extra: {
-            locale: lang.code,
-          },
-        }))}
-        pickerLabel={mediumOrLower ? 'Language' : ''}
-        iconButton={mediumOrLower ? undefined : GlobeIcon}
-        onSelect={(item) => {
-          if (item.extra?.locale) {
-            try {
-              setUserLanguageCookie(item.extra.locale)
-            } catch (err) {
-              // You can never be too careful because setting a cookie
-              // can fail. For example, some browser
-              // extensions disallow all setting of cookies and attempts
-              // at the `document.cookie` setter could throw. Just swallow
-              // and move on.
-              console.warn('Unable to set preferred language cookie', err)
-            }
+  // languageList is specifically <ActionList.Item>'s which are reused
+  // for menus that behave differently at the breakpoints.
+  const languageList = langs.map((lang) => (
+    <ActionList.Item
+      key={`/${lang.code}${routerPath}`}
+      selected={lang === selectedLang}
+      as={Link}
+      href={`/${lang.code}${routerPath}`}
+      onSelect={() => {
+        if (lang.code) {
+          try {
+            setUserLanguageCookie(lang.code)
+          } catch (err) {
+            // You can never be too careful because setting a cookie
+            // can fail. For example, some browser
+            // extensions disallow all setting of cookies and attempts
+            // at the `document.cookie` setter could throw. Just swallow
+            // and move on.
+            console.warn('Unable to set preferred language cookie', err)
           }
-        }}
-        buttonBorder={mediumOrLower}
-        dataTestId="default-language"
-        ariaLabel={`Select language: current language is ${selectedLang.name}`}
-        alignment={mediumOrLower ? 'start' : 'end'}
-      />
+        }
+      }}
+    >
+      <span data-testid="default-language">{lang.nativeName || lang.name}</span>
+    </ActionList.Item>
+  ))
+
+  // At large breakpoints, we return the full <ActionMenu> with just the languages,
+  // at smaller breakpoints, we return just the <ActionList> with its items so that
+  // the <Header> component can place it inside its own <ActionMenu> with multiple
+  // groups, language being just one of those groups.
+  return (
+    <div data-testid="language-picker" className="d-flex">
+      {xs ? (
+        <>
+          {/* XS Mobile Menu */}
+          <ActionMenu>
+            <ActionMenu.Anchor>
+              <ActionMenu.Button
+                variant="invisible"
+                className="color-fg-default width-full"
+                aria-label={`Select language: current language is ${selectedLang.name}`}
+                sx={{
+                  height: 'auto',
+                  textAlign: 'left',
+                  'span:first-child': { display: 'inline' },
+                }}
+              >
+                <span style={{ whiteSpace: 'pre-wrap' }}>{t('language_picker_label') + '\n'}</span>
+                <span className="color-fg-muted text-normal f6">{selectedLang.name}</span>
+              </ActionMenu.Button>
+            </ActionMenu.Anchor>
+            <ActionMenu.Overlay align="start">
+              <ActionList selectionVariant="single">{languageList}</ActionList>
+            </ActionMenu.Overlay>
+          </ActionMenu>
+        </>
+      ) : mediumOrLower ? (
+        <ActionList className="hide-sm" selectionVariant="single">
+          <ActionList.Group title={t('language_picker_label')}>{languageList}</ActionList.Group>
+        </ActionList>
+      ) : (
+        <ActionMenu>
+          <ActionMenu.Anchor>
+            <IconButton
+              icon={GlobeIcon}
+              aria-label={`Select language: current language is ${selectedLang.name}`}
+            />
+          </ActionMenu.Anchor>
+          <ActionMenu.Overlay align="end">
+            <ActionList selectionVariant="single">{languageList}</ActionList>
+          </ActionMenu.Overlay>
+        </ActionMenu>
+      )}
     </div>
   )
 }
diff --git a/components/page-header/VersionPicker.tsx b/components/page-header/VersionPicker.tsx
@@ -9,10 +9,10 @@ import { Picker } from 'src/tools/components/Picker'
 import styles from './VersionPicker.module.scss'
 
 type Props = {
-  mediumOrLower?: boolean
+  xs?: boolean
 }
 
-export const VersionPicker = ({ mediumOrLower }: Props) => {
+export const VersionPicker = ({ xs }: Props) => {
   const router = useRouter()
   const { currentVersion } = useVersion()
   const { allVersions, page, enterpriseServerVersions } = useMainContext()
@@ -81,14 +81,14 @@ export const VersionPicker = ({ mediumOrLower }: Props) => {
   }
 
   return (
-    <div data-testid="version-picker">
+    <div data-testid="version-picker" className={xs ? 'd-flex' : ''}>
       <Picker
         defaultText={t('version_picker_default_text')}
         items={allLinks}
-        alignment="start"
-        pickerLabel="Version"
+        alignment="end"
+        pickerLabel={xs ? `Version\n` : `Version: `}
         dataTestId="field"
-        buttonBorder={mediumOrLower}
+        descriptionFontSize={xs ? 6 : 5}
         ariaLabel={`Select GitHub product version: current version is ${currentVersion}`}
         renderItem={(item) => {
           return (