Merge branch 'main' into repo-sync

Author: Octomerger

.github/actions-scripts/enable-automerge.js

@@ -1,12 +1,14 @@
 import { getOctokit } from '@actions/github'
 const token = process.env.GITHUB_TOKEN
 const prNumber = process.env.AUTOMERGE_PR_NUMBER
+const [org, repo] = process.env.GITHUB_REPOSITORY.split('/')
 const github = getOctokit(token)
 
 main()
 async function main() {
-  const pull = await github.pulls.get({
-    ...context.repo,
+  const pull = await github.rest.pulls.get({
+    owner: org,
+    repo: repo,
     pull_number: parseInt(prNumber),
   })
 

.github/workflows/autoupdate-branch.yml

@@ -1,12 +1,12 @@
 name: Autoupdate branch
 
-# **What it does**: Any pull requests with "autoupdate" label will get main branch updates.
-# **Why we have it**: Our repo-sync automation relies on it.
-# **Who does it impact**: Our ability to support the open-source repository.
+# **What it does**: Any pull requests with automerge will get main branch updates.
+# **Why we have it**: So we don't have to watch pull requests and click update branch 100x.
+# **Who does it impact**: Our health.
 
 #
 # This workflow checks all open PRs targeting `main` as their base branch and
-# will attempt to update them if they have the `autoupdate` label applied.
+# will attempt to update them if they have automerge.
 # It is triggered when a `push` event occurs ON the `main` branch (e.g. a PR
 # was merged or a force-push was done).
 #
@@ -31,6 +31,5 @@ jobs:
       - uses: docker://chinthakagodawita/autoupdate-action:v1
         env:
           GITHUB_TOKEN: ${{ secrets.OCTOMERGER_PAT_WITH_REPO_AND_WORKFLOW_SCOPE }}
-          PR_FILTER: labelled
-          PR_LABELS: autoupdate
+          PR_FILTER: auto_merge
           MERGE_MSG: "Branch was updated using the 'autoupdate branch' Actions workflow."

.github/workflows/enterprise-dates.yml

@@ -64,13 +64,13 @@ jobs:
             "Hello! The GitHub Enterprise Server release dates have changed.\n\n
             If CI passes, this PR will be auto-merged. :green_heart:\n\n
             If CI does not pass or other problems arise, contact #docs-engineering on slack.\n\nThis PR was 🤖-crafted by `.github/workflows/enterprise-dates.yml`. 🧶"
-          labels: autoupdate
           branch: enterprise-server-dates-update
           delete-branch: true
 
       - name: Enable GitHub auto-merge
         if: ${{ steps.create-pull-request.outputs.pull-request-number }}
         env:
+          GITHUB_TOKEN: ${{ secrets.DOCUBOT_REPO_PAT }}
           AUTOMERGE_PR_NUMBER: ${{ steps.create-pull-request.outputs.pull-request-number }}
         run: node .github/actions-scripts/enable-automerge.js
 

.github/workflows/repo-sync.yml

@@ -126,7 +126,7 @@ jobs:
           destination_branch: main
           pr_title: 'repo sync'
           pr_body: "This is an automated pull request to sync changes between the public and private repos.\n\n:robot: This pull request should be merged (not squashed) to preserve continuity across repos, so please let a bot do the merging!"
-          pr_label: autoupdate,automated-reposync-pr
+          pr_label: automated-reposync-pr
           github_token: ${{ secrets.OCTOMERGER_PAT_WITH_REPO_AND_WORKFLOW_SCOPE }}
 
       - name: Find pull request
@@ -217,6 +217,7 @@ jobs:
       - name: Enable GitHub auto-merge
         if: ${{ steps.find-pull-request.outputs.number }}
         env:
+          GITHUB_TOKEN: ${{ secrets.OCTOMERGER_PAT_WITH_REPO_AND_WORKFLOW_SCOPE }}
           AUTOMERGE_PR_NUMBER: ${{ steps.find-pull-request.outputs.number }}
         run: node .github/actions-scripts/enable-automerge.js
 

.github/workflows/update-graphql-files.yml

@@ -58,12 +58,12 @@ jobs:
             syncs up the GraphQL data in this repo.\n\n
             If CI passes, this PR will be auto-merged. :green_heart:\n\n
             If CI does not pass or other problems arise, contact #docs-engineering on slack."
-          labels: autoupdate
           branch: graphql-schema-update
 
       - name: Enable GitHub auto-merge
         if: ${{ steps.create-pull-request.outputs.pull-request-number }}
         env:
+          GITHUB_TOKEN: ${{ secrets.DOCUBOT_REPO_PAT }}
           AUTOMERGE_PR_NUMBER: ${{ steps.create-pull-request.outputs.pull-request-number }}
         run: node .github/actions-scripts/enable-automerge.js
 

components/GenericError.tsx

@@ -20,7 +20,7 @@ export function GenericError() {
 
       <div className="container-xl p-responsive py-9 width-full flex-1">
         <article className="col-md-10 col-lg-7 mx-auto">
-          <h1 className="mb-3 pb-3 border-bottom">Ooops!</h1>
+          <h1>Ooops!</h1>
           <Lead>It looks like something went wrong.</Lead>
           <p className="f3">
             We track these errors automatically, but if the problem persists please feel free to

components/Search.module.scss

@@ -1,71 +1,47 @@
+/* TODO remove mark styling if https://github.com/primer/css/pull/1756 ships */
 .resultsContainer mark {
   background: none;
   color: inherit;
 }
 
-.searchResultContent {
-  max-height: 4rem;
-}
-
 .searchResultContent mark {
   color: var(--color-fg-default);
   background-color: var(--color-attention-subtle);
 }
+/* end TODO */
 
-.searchResultTitle em {
-  font-style: normal;
-  text-decoration: underline;
+.searchResultContent {
+  max-height: 4rem;
 }
 
 .resultsContainerHeader {
-  display: none;
-  position: absolute;
-  top: 0;
-  right: 0;
   width: 0;
-  border-radius: 0 0 0 3px;
-  background: var(--color-canvas-default);
-  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.15);
+  border-radius: 0 0 0 4px; // primer rounded-1
   transition: width 0.3s ease-in-out;
-  padding-top: 64px;
-}
-
-.resultsContainerOpen {
-  display: block;
 }
 
 .resultsContainerOpen.resultsContainerHeader {
   width: 60vw;
-  max-width: 760px;
+  max-width: 48rem;
 }
 
 .searchInput {
   transition: width 0.3s ease-in-out;
 }
 
 .searchInputHeader {
-  max-width: 690px;
-  width: 256px;
-}
-
-.searchInputExpanded {
-  width: 53vw;
-  position: absolute;
-  right: 0;
-  top: 0;
+  width: 16rem;
 }
 
 .headerSearchOpen {
   background: var(--color-primer-canvas-backdrop);
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: block;
+}
+
+.searchInputExpanded {
+  width: 54vw;
+  max-width: 43rem;
 }
 
 .headerSearchResults {
-  overflow-y: auto;
   max-height: 80vh;
 }

components/Search.tsx

@@ -170,9 +170,11 @@ export function Search({
         id="search-results-container"
         className={cx(
           'z-1 pb-5 px-3',
-          isHeaderSearch && 'pt-9',
+          isHeaderSearch &&
+            'pt-9 color-bg-default color-shadow-medium position-absolute top-0 right-0',
           styles.resultsContainer,
           isHeaderSearch && styles.resultsContainerHeader,
+          query ? 'd-block' : 'd-none',
           query && styles.resultsContainerOpen
         )}
       >
@@ -189,7 +191,13 @@ export function Search({
       </div>
       {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
       <div
-        className={cx('-z-1', isHeaderSearch && query ? styles.headerSearchOpen : 'd-none')}
+        className={cx(
+          '-z-1',
+          isHeaderSearch && query
+            ? 'position-fixed top-0 right-0 bottom-0 left-0 d-block'
+            : 'd-none',
+          isHeaderSearch && query && styles.headerSearchOpen
+        )}
         onClick={closeSearch}
       />
     </>
@@ -210,7 +218,8 @@ export function Search({
               variant === 'expanded' && 'py-3',
               isHeaderSearch && styles.searchInputHeader,
               !isHeaderSearch && 'width-full',
-              isHeaderSearch && query && styles.searchInputExpanded
+              isHeaderSearch && query && styles.searchInputExpanded,
+              isHeaderSearch && query && 'position-absolute top-0 right-0'
             )}
             style={{
               background: `var(--color-canvas-default) url("/assets/images/octicons/search-${iconSize}.svg") no-repeat ${
@@ -325,7 +334,11 @@ function ShowSearchResults({
     const ActionListResults = (
       <div
         data-testid="search-results"
-        className={cx('mt-3', isHeaderSearch && styles.headerSearchResults)}
+        className={cx(
+          'mt-3',
+          isHeaderSearch && styles.headerSearchResults,
+          isHeaderSearch && 'overflow-auto'
+        )}
       >
         <div className="my-4">
           <p className="mx-4">
@@ -372,7 +385,7 @@ function ShowSearchResults({
                           </small>
                         )}
                         <div
-                          className={cx(styles.searchResultTitle, 'mt-2 d-block f4 text-semibold')}
+                          className={cx('mt-2 d-block f4 text-semibold')}
                           dangerouslySetInnerHTML={{
                             __html: title,
                           }}

components/landing/LandingHero.tsx

@@ -22,8 +22,8 @@ export const LandingHero = () => {
 
   return (
     <header className="d-lg-flex gutter-lg mb-6">
-      <div className={cx(product_video && 'col-12 col-lg-6 mb-3 mb-lg-0')}>
-        <h1 className="mb-3">
+      <div className={cx('col-12 mb-3 mb-lg-0', product_video && 'col-lg-6')}>
+        <h1>
           {shortTitle}{' '}
           {beta_product && <span className="Label Label--success v-align-middle">Beta</span>}
         </h1>

components/sublanding/SubLandingHero.tsx

@@ -43,9 +43,9 @@ export const SubLandingHero = () => {
 
   return (
     <div>
-      <header className="d-flex gutter mb-6">
+      <header className="d-flex gutter mb-6 my-4">
         <div className="col-12">
-          <h1 className="my-3">{title} guides</h1>
+          <h1>{title} guides</h1>
           {intro && <Lead data-search="lead">{intro}</Lead>}
         </div>
       </header>