Added basic authentication for graphql endpoints

.env.example

@@ -6,8 +6,10 @@ NEXT_PUBLIC_DRUPAL_BASE_URL=https://dev.next-drupal.org
 
 # Draft mode credentials.
 #DRUPAL_PREVIEW_SECRET=DRUPAL_PREVIEW_SECRET
-#DRUPAL_DRAFT_CLIENT=DRUPAL_DRAFT_CLIENT
-#DRUPAL_DRAFT_SECRET=DRUPAL_DRAFT_SECRET
+
+# Drupal Authentication
+#DRUPAL_BASIC_AUTH=foo:bar
+#DRUPAL_BASIC_AUTH_ADMIN=foo:bar
 
 # Change this to 'true' to fetch all pages and build each one.
 # Recommended to enable this for production environment.

.gitpod.yml

@@ -42,11 +42,9 @@ tasks:
       blt drupal:install --site=supress -n &&
       drush @supress.local cset system.theme default stanford_profile_admin_theme -y &&
       cd /workspace/front &&
-      cp .env.example .env.local &&
-      sed -i 's/#DRUPAL_REVALIDATE_SECRET/DRUPAL_REVALIDATE_SECRET/' .env.local &&
-      sed -i 's/#DRUPAL_PREVIEW_SECRET/DRUPAL_PREVIEW_SECRET/' .env.local &&
       yarn install
     command: |
+      cp .env.example .env.local &&
       gp ports await 3306 &&
       eval $(gp env -e APACHE_DOCROOT_IN_REPO=../back/docroot) &&
       cd /workspace/back &&
@@ -61,7 +59,7 @@ tasks:
       drush @supress.local uli --uri=$NEXT_PUBLIC_DRUPAL_BASE_URL | xargs gp preview --external &&
       git config core.fileMode false &&
       echo 'Connecting Drupal to Frontend' &&
-      drush @supress.local su-next-connect "$(gp url 3000)" --preview-secret=DRUPAL_PREVIEW_SECRET --revalidation-secret=DRUPAL_REVALIDATION_SECRET &&
+      drush @supress.local su-next-connect "$(gp url 3000)" --preview-secret=DRUPAL_PREVIEW_SECRET --revalidation-secret=DRUPAL_REVALIDATION_SECRET >> /workspace/front/.env.local &&
       cd /workspace/front &&
       yarn install &&
       yarn config set --home enableTelemetry 0 &&

app/api/revalidate/route.tsx

@@ -1,5 +1,4 @@
 import {NextRequest, NextResponse} from "next/server"
-import {cache as nodeCache} from "@lib/drupal/get-cache"
 import {revalidateTag} from "next/cache"
 import {getEntityFromPath} from "@lib/gql/gql-queries"
 
@@ -25,6 +24,5 @@ export const GET = async (request: NextRequest) => {
   if (entity?.path === path) tagsInvalidated.push("paths:/")
 
   tagsInvalidated.map(tag => revalidateTag(tag))
-  nodeCache.del(tagsInvalidated)
   return NextResponse.json({revalidated: true, tags: tagsInvalidated})
 }

app/page.tsx

@@ -2,7 +2,7 @@ import Rows from "@components/paragraphs/rows/rows"
 import {notFound} from "next/navigation"
 import {getConfigPage, getEntityFromPath} from "@lib/gql/gql-queries"
 import {NodeStanfordPage, NodeUnion, StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal.d"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {Metadata} from "next"
 import {getNodeMetadata} from "./[...slug]/metadata"
 import SupCarouselParagraph from "@components/paragraphs/sup-carousel/sup-carousel-paragraph"

app/preview/[...slug]/page.tsx

@@ -3,7 +3,8 @@ import UnpublishedBanner from "@components/elements/unpublished-banner"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
 import {getEntityFromPath} from "@lib/gql/gql-queries"
 import {notFound} from "next/navigation"
-import {getPathFromContext, isPreviewMode, PageProps} from "@lib/drupal/utils"
+import {getPathFromContext, PageProps} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const PreviewPage = async ({params}: PageProps) => {
   if (!isPreviewMode()) notFound()

app/preview/layout.tsx

@@ -1,4 +1,4 @@
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import Editori11y from "@components/tools/editorially"
 import UnpublishedBanner from "@components/elements/unpublished-banner"
 

app/preview/page.tsx

@@ -1,5 +1,5 @@
 import {notFound} from "next/navigation"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import Page from "../page"
 
 const PreviewPage = async () => {

codegen.ts

@@ -1,8 +1,15 @@
 import {CodegenConfig} from '@graphql-codegen/cli';
 
+const drupalUrl = `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql`;
 const config: CodegenConfig = {
   overwrite: true,
-  schema: `${process.env.NEXT_PUBLIC_DRUPAL_BASE_URL}/graphql` as string,
+  schema: [{
+    [drupalUrl]: {
+      headers: {
+        "Authorization": "Basic " + Buffer.from(process.env.DRUPAL_BASIC_AUTH_ADMIN as string).toString("base64")
+      }
+    }
+  }],
   documents: 'src/lib/gql/*.drupal.gql',
   generates: {
     'src/lib/gql/__generated__/drupal.d.ts': {

package.json

@@ -15,12 +15,12 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@heroicons/react": "^2.1.3",
+    "@heroicons/react": "^2.1.4",
     "@js-temporal/polyfill": "^0.4.4",
     "@mui/base": "5.0.0-beta.40",
     "@next/third-parties": "^14.2.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "algoliasearch": "^4.23.3",
@@ -43,8 +43,8 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.11.1",
-    "react-instantsearch-nextjs": "^0.3.2",
+    "react-instantsearch": "^7.11.2",
+    "react-instantsearch-nextjs": "^0.3.3",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
@@ -60,13 +60,13 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.1",
     "@next/bundle-analyzer": "^14.2.4",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.1.9",
-    "@storybook/nextjs": "^8.1.9",
-    "@storybook/react": "^8.1.9",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
@@ -75,9 +75,9 @@
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.0.0",
     "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.4",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.10",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

src/components/elements/unpublished-banner.tsx

@@ -1,4 +1,4 @@
-import {HTMLAttributes} from "react"
+import {HTMLAttributes, JSX} from "react"
 import {twMerge} from "tailwind-merge"
 import {ExclamationTriangleIcon} from "@heroicons/react/20/solid"
 
@@ -7,18 +7,26 @@ type Props = HTMLAttributes<HTMLDivElement> & {
    * If the item is published or not.
    */
   status?: boolean
+  /**
+   * Unpublished message.
+   */
+  message: string | JSX.Element
 }
-const UnpublishedBanner = ({status, children, ...props}: Props) => {
-  if (status !== false) return
+const UnpublishedBanner = ({status, message, children, ...props}: Props) => {
+  if (status !== false) return <>{children}</>
   return (
-    <div
-      {...props}
-      className={twMerge("bg-illuminating p-5 text-4xl font-bold", props.className)}
-    >
-      <div className="centered-container flex items-center gap-10">
-        <ExclamationTriangleIcon width={30} />
-        {children}
+    <div className="border-dotted border-illuminating">
+      <div
+        {...props}
+        className={twMerge("bg-illuminating p-5 text-4xl font-bold", props.className)}
+      >
+        <div className="centered flex items-center gap-10">
+          <ExclamationTriangleIcon width={30} />
+          {message}
+        </div>
       </div>
+
+      {children}
     </div>
   )
 }

src/components/elements/user-analytics.tsx

@@ -2,7 +2,7 @@ import {getConfigPage} from "@lib/gql/gql-queries"
 import {StanfordBasicSiteSetting} from "@lib/gql/__generated__/drupal"
 import Script from "next/script"
 import {GoogleAnalytics} from "@next/third-parties/google"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const UserAnalytics = async () => {
   if (isPreviewMode()) return

src/components/global/page-header.tsx

@@ -2,13 +2,12 @@ import MainMenu from "@components/menu/main-menu"
 import GlobalMessage from "@components/config-pages/global-message"
 import {getConfigPage, getMenu} from "@lib/gql/gql-queries"
 import {MenuAvailable, StanfordGlobalMessage} from "@lib/gql/__generated__/drupal.d"
-import {isPreviewMode} from "@lib/drupal/utils"
 import Link from "@components/elements/link"
 import HeaderLogoLg from "@components/images/header-logo-lg"
 import HeaderLogoXs from "@components/images/header-logo-xs"
 
 const PageHeader = async () => {
-  const menuItems = await getMenu(MenuAvailable.Main, isPreviewMode())
+  const menuItems = await getMenu(MenuAvailable.Main)
   const globalMessageConfig = await getConfigPage<StanfordGlobalMessage>("StanfordGlobalMessage")
 
   return (

src/components/layouts/interior-page.tsx

@@ -1,7 +1,6 @@
 import {getMenu} from "@lib/gql/gql-queries"
 import SideNav from "@components/menu/side-nav"
 import {HtmlHTMLAttributes} from "react"
-import {isPreviewMode} from "@lib/drupal/utils"
 import {MenuAvailable} from "@lib/gql/__generated__/drupal.d"
 import {twMerge} from "tailwind-merge"
 import getActiveTrail from "@lib/utils/get-active-trail"
@@ -14,7 +13,7 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
 }
 
 const InteriorPage = async ({children, currentPath, ...props}: Props) => {
-  const menu = await getMenu(MenuAvailable.Main, isPreviewMode())
+  const menu = await getMenu(MenuAvailable.Main)
   const activeTrail: string[] = getActiveTrail(menu, currentPath)
 
   // Peel off the menu items from the parent.

src/components/nodes/cards/node-card.tsx

@@ -6,7 +6,7 @@ import StanfordPageCard from "@components/nodes/cards/stanford-page/stanford-pag
 import StanfordPersonCard from "@components/nodes/cards/stanford-person/stanford-person-card"
 import StanfordPolicyCard from "@components/nodes/cards/stanford-policy/stanford-policy-card"
 import StanfordPublicationCard from "@components/nodes/cards/stanford-publication/stanford-publication-card"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
 import SupBookCard from "@components/nodes/cards/sup-book/sup-book-card"
 

src/components/nodes/list-item/node-list-item.tsx

@@ -6,7 +6,7 @@ import StanfordPageListItem from "@components/nodes/list-item/stanford-page/stan
 import StanfordPersonListItem from "@components/nodes/list-item/stanford-person/stanford-person-list-item"
 import StanfordPolicyListItem from "@components/nodes/list-item/stanford-policy/stanford-policy-list-item"
 import StanfordPublicationListItem from "@components/nodes/list-item/stanford-publication/stanford-publication-list-item"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
 import SupBookListItem from "@components/nodes/list-item/sup-book/sup-book-list-item"
 

src/components/nodes/pages/node-page.tsx

@@ -6,7 +6,7 @@ import StanfordPolicyPage from "@components/nodes/pages/stanford-policy/stanford
 import StanfordPublicationPage from "@components/nodes/pages/stanford-publication/stanford-publication-page"
 import StanfordCoursePage from "@components/nodes/pages/stanford-course/stanford-course-page"
 import StanfordEventSeriesPage from "@components/nodes/pages/stanford-event-series/stanford-event-series-page"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {NodeUnion} from "@lib/gql/__generated__/drupal.d"
 import SupBookPage from "@components/nodes/pages/sup-book/sup-book-page"
 import SupBookAncillaryPage from "@components/nodes/pages/sup-book-ancilary/sup-book-ancillary-page"

src/components/nodes/pages/stanford-course/stanford-course-page.tsx

@@ -3,7 +3,7 @@ import Wysiwyg from "@components/elements/wysiwyg"
 import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordCourse} from "@lib/gql/__generated__/drupal.d"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordCourse

src/components/nodes/pages/stanford-event/stanford-event-page.tsx

@@ -12,7 +12,7 @@ import {NodeStanfordEvent, ParagraphStanfordSchedule} from "@lib/gql/__generated
 import Email from "@components/elements/email"
 import Telephone from "@components/elements/telephone"
 import Link from "@components/elements/link"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordEvent

src/components/nodes/pages/stanford-news/stanford-news-page.tsx

@@ -5,7 +5,7 @@ import SocialIcons from "@components/nodes/pages/stanford-news/social-icons"
 import {H1} from "@components/elements/headers"
 import {HtmlHTMLAttributes} from "react"
 import {NodeStanfordNews} from "@lib/gql/__generated__/drupal.d"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   node: NodeStanfordNews

src/components/paragraphs/paragraph.tsx

@@ -6,14 +6,15 @@ import SpacerParagraph from "@components/paragraphs/stanford-spacer/spacer-parag
 import WysiwygParagraph from "@components/paragraphs/stanford-wysiwyg/wysiwyg-paragraph"
 import BannerParagraph from "@components/paragraphs/stanford-banner/banner-paragraph"
 import ListParagraph from "@components/paragraphs/stanford-lists/list-paragraph"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
 import {Suspense} from "react"
 import FileListParagraph from "@components/paragraphs/sup-file-list/file-list-paragraph"
 import SupCarouselParagraph from "@components/paragraphs/sup-carousel/sup-carousel-paragraph"
 import SupAuthorListParagraph from "@components/paragraphs/sup-author-list/sup-author-list-paragraph"
 import SupSearchFormParagraph from "@components/paragraphs/sup-search-form/sup-search-form-paragraph"
 import SupBlogTeaserParagraph from "@components/paragraphs/sup-blog-teaser/sup-blog-teaser-paragraph"
+import UnpublishedBanner from "@components/elements/unpublished-banner"
 
 type Props = {
   /**
@@ -23,6 +24,16 @@ type Props = {
 }
 
 const Paragraph = async ({paragraph}: Props) => {
+  return (
+    <UnpublishedBanner
+      status={paragraph.status}
+      message="Unpublished Content"
+    >
+      <ParagraphComponent paragraph={paragraph} />
+    </UnpublishedBanner>
+  )
+}
+const ParagraphComponent = async ({paragraph}: Props) => {
   const previewMode = isPreviewMode()
 
   const itemProps: Record<string, string> = {}

src/components/paragraphs/rows/one-column.tsx

@@ -1,6 +1,6 @@
 import Paragraph from "@components/paragraphs/paragraph"
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const OneColumn = ({items}: {items: ParagraphUnion[]}) => {
   const draftProps: Record<string, string> = {}

src/components/paragraphs/rows/three-column.tsx

@@ -1,7 +1,7 @@
 import OneColumn from "@components/paragraphs/rows/one-column"
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const ThreeColumn = ({items}: {items: ParagraphUnion[]}) => {
   const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === "left")

src/components/paragraphs/rows/two-column.tsx

@@ -1,7 +1,7 @@
 import OneColumn from "@components/paragraphs/rows/one-column"
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors"
-import {isPreviewMode} from "@lib/drupal/utils"
+import {isPreviewMode} from "@lib/drupal/is-preview-mode"
 
 const TwoColumn = ({items, config}: {items: ParagraphUnion[]; config?: Record<string, any>}) => {
   const leftItems = items.filter(item => getParagraphBehaviors(item).layout_paragraphs?.region === "left")

src/components/paragraphs/stanford-lists/list-paragraph.tsx

@@ -5,7 +5,6 @@ import {cache, ElementType, HtmlHTMLAttributes, JSX} from "react"
 import {Maybe, NodeStanfordCourse, NodeStanfordEvent, NodeStanfordNews, NodeStanfordPage, NodeStanfordPerson, NodeStanfordPublication, NodeSupBook, NodeUnion, ParagraphStanfordList} from "@lib/gql/__generated__/drupal.d"
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors"
 import {graphqlClient} from "@lib/gql/gql-client"
-import {buildHeaders} from "@lib/drupal/utils"
 import {twMerge} from "tailwind-merge"
 import Link from "@components/elements/link"
 import {ArrowRightIcon} from "@heroicons/react/16/solid"
@@ -149,8 +148,7 @@ const getViewPagedItems = cache(async (viewId: string, displayId: string, contex
       break
   }
 
-  const headers = await buildHeaders()
-  const client = graphqlClient({headers, next: {tags}})
+  const client = graphqlClient({next: {tags}})
   let filters = getViewFilters(["term_node_taxonomy_name_depth"], contextualFilter)
   let graphqlResponse
 

src/components/paragraphs/sup-author-list/filtering-author-list.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import {twMerge} from "tailwind-merge"
-import {HTMLAttributes, JSX, useCallback, useEffect, useId, useMemo, useState} from "react"
+import {HTMLAttributes, JSX, useCallback, useEffect, useMemo, useState} from "react"
 import PagedList from "@components/elements/paged-list"
 import {useRouter, useSearchParams} from "next/navigation"
 

src/components/views/stanford-events/events-filtered-list-view.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import {getTaxonomyTree} from "@lib/drupal/get-taxonomy-tree"
+import {getTaxonomyTree} from "@lib/drupal/utils"
 import Button from "@components/elements/button"
 import SelectList from "@components/elements/select-list"
 import {useMemo, useState} from "react"