Merge pull request #24313 from github/repo-sync

repo sync

Author: Octomerger

components/graphql/Enum.tsx

@@ -10,7 +10,7 @@ type Props = {
 
 export function Enum({ item }: Props) {
   const { t } = useTranslation('products')
-  const heading = t('graphql.reference.values')
+  const heading = t('graphql.reference.values').replace('{{ GraphQLItemTitle }}', item.name)
 
   return (
     <GraphqlItem item={item} heading={heading}>

components/graphql/GraphqlItem.tsx

@@ -16,13 +16,13 @@ export function GraphqlItem({ item, heading, children, headingLevel = 2 }: Props
       {headingLevel === 2 && (
         <h2 id={lowerCaseName}>
           <LinkIconHeading slug={lowerCaseName} />
-          {item.name}
+          <code>{item.name}</code>
         </h2>
       )}
       {headingLevel === 3 && (
         <h3 id={lowerCaseName}>
           <LinkIconHeading slug={lowerCaseName} />
-          {item.name}
+          <code>{item.name}</code>
         </h3>
       )}
       <div
@@ -35,7 +35,7 @@ export function GraphqlItem({ item, heading, children, headingLevel = 2 }: Props
         {item.isDeprecated && <Notice item={item} variant="deprecation" />}
       </div>
       <div>
-        {heading && <h4>{heading}</h4>}
+        {heading && <h4 dangerouslySetInnerHTML={{ __html: heading }} />}
         {children}
       </div>
     </div>

components/graphql/InputObject.tsx

@@ -9,7 +9,7 @@ type Props = {
 
 export function InputObject({ item }: Props) {
   const { t } = useTranslation('products')
-  const heading = t('graphql.reference.input_fields')
+  const heading = t('graphql.reference.input_fields').replace('{{ GraphQLItemTitle }}', item.name)
   return (
     <GraphqlItem item={item} heading={heading}>
       <Table fields={item.inputFields} />

components/graphql/Interface.tsx

@@ -14,8 +14,8 @@ type Props = {
 export function Interface({ item, objects }: Props) {
   const { locale } = useRouter()
   const { t } = useTranslation('products')
-  const heading = t('graphql.reference.implemented_by')
-  const heading2 = t('graphql.reference.fields')
+  const heading = t('graphql.reference.implemented_by').replace('{{ GraphQLItemTitle }}', item.name)
+  const heading2 = t('graphql.reference.fields').replace('{{ GraphQLItemTitle }}', item.name)
 
   const implementedBy = objects.filter(
     (object) =>
@@ -38,7 +38,11 @@ export function Interface({ item, objects }: Props) {
       </ul>
       {item.fields && (
         <>
-          <h4>{heading2}</h4>
+          <h4
+            dangerouslySetInnerHTML={{
+              __html: heading2,
+            }}
+          />
           <Table fields={item.fields} />
         </>
       )}

components/graphql/Mutation.tsx

@@ -15,8 +15,8 @@ type Props = {
 export function Mutation({ item }: Props) {
   const { locale } = useRouter()
   const { t } = useTranslation('products')
-  const heading = t('graphql.reference.input_fields')
-  const heading2 = t('graphql.reference.return_fields')
+  const heading = t('graphql.reference.input_fields').replace('{{ GraphQLItemTitle }}', item.name)
+  const heading2 = t('graphql.reference.return_fields').replace('{{ GraphQLItemTitle }}', item.name)
 
   return (
     <GraphqlItem item={item} heading={heading}>
@@ -36,7 +36,7 @@ export function Mutation({ item }: Props) {
 
           {input.preview && <Notice item={input} variant="preview" />}
           {input.isDeprecated && <Notice item={input} variant="deprecation" />}
-          <h4>{heading2}</h4>
+          <h4 dangerouslySetInnerHTML={{ __html: heading2 }} />
           <Table fields={item.returnFields} />
         </React.Fragment>
       ))}

components/graphql/Object.tsx

@@ -13,14 +13,14 @@ type Props = {
 export function Object({ item }: Props) {
   const { locale } = useRouter()
   const { t } = useTranslation('products')
-  const heading1 = t('graphql.reference.implements')
-  const heading2 = t('graphql.reference.fields')
+  const heading1 = t('graphql.reference.implements').replace('{{ GraphQLItemTitle }}', item.name)
+  const heading2 = t('graphql.reference.fields').replace('{{ GraphQLItemTitle }}', item.name)
 
   return (
     <GraphqlItem item={item}>
       {item.implements && (
         <>
-          <h3>{heading1}</h3>
+          <h3 dangerouslySetInnerHTML={{ __html: heading1 }} />
           <ul>
             {item.implements.map((implement: ImplementsT) => (
               <li key={`${implement.id}-${implement.href}-${implement.name}`}>
@@ -37,7 +37,7 @@ export function Object({ item }: Props) {
 
       {item.fields && (
         <>
-          <h3>{heading2}</h3>
+          <h3 dangerouslySetInnerHTML={{ __html: heading2 }} />
           <Table fields={item.fields} />
         </>
       )}

components/graphql/Query.tsx

@@ -28,7 +28,14 @@ export function Query({ item }: Props) {
       <div>
         {item.args.length > 0 && (
           <>
-            <h4>{t('graphql.reference.arguments')}</h4>
+            <h4
+              dangerouslySetInnerHTML={{
+                __html: t('graphql.reference.arguments').replace(
+                  '{{ GraphQLItemTitle }}',
+                  item.name
+                ),
+              }}
+            />
             <Table fields={item.args} />
           </>
         )}

components/graphql/Table.tsx

@@ -58,7 +58,15 @@ export function Table({ fields }: Props) {
 
               {field.arguments && (
                 <div className="border rounded-1 mt-3 mb-3 p-3 color-bg-subtle f5">
-                  <h4 className="pt-0 mt-0">{t('graphql.reference.arguments')}</h4>
+                  <p
+                    className="pt-0 mt-0 h5"
+                    dangerouslySetInnerHTML={{
+                      __html: t('graphql.reference.arguments').replace(
+                        '{{ GraphQLItemTitle }}',
+                        field.name
+                      ),
+                    }}
+                  />
                   {field.arguments.map((argument, index) => (
                     <ul
                       key={`${index}-${argument.type.name}-${argument.type.href}`}

components/graphql/Union.tsx

@@ -12,15 +12,15 @@ type Props = {
 export function Union({ item }: Props) {
   const { locale } = useRouter()
   const { t } = useTranslation('products')
-  const heading = t('graphql.reference.possible_types')
+  const heading = t('graphql.reference.possible_types').replace('{{ GraphQLItemTitle }}', item.name)
 
   return (
     <GraphqlItem item={item} heading={heading}>
       <ul>
         {item.possibleTypes.map((type) => (
           <li key={type.id}>
             <Link href={type.href} locale={locale}>
-              {type.name}
+              <code>{type.name}</code>
             </Link>
           </li>
         ))}

data/ui.yml

@@ -103,17 +103,18 @@ parameter_table:
 products:
   graphql:
     reference:
-      implements: Implements
-      fields: Fields
-      arguments: Arguments
+      implements: <code>{{ GraphQLItemTitle }}</code> Implements
+      fields: Fields for <code>{{ GraphQLItemTitle }}</code>
+      arguments: Arguments for <code>{{ GraphQLItemTitle }}</code>
       name: Name
       type: Type
       description: Description
-      input_fields: Input fields
-      return_fields: Return fields
-      implemented_by: Implemented by
-      values: Values
-      possible_types: Possible types
+      input_fields: Input fields for <code>{{ GraphQLItemTitle }}</code>
+      return_fields: Return fields for <code>{{ GraphQLItemTitle }}</code>
+      implemented_by: |
+        <code>{{ GraphQLItemTitle }}</code> is implemented by
+      values: Values for <code>{{ GraphQLItemTitle }}</code>
+      possible_types: Possible types for <code>{{ GraphQLItemTitle }}</code>
       preview_notice: Preview notice
       deprecation_notice: Deprecation notice
       preview_period: During the preview period, the API may change without notice.