warn when integration has not synced (vercel#756)

### Description

Adds a warning in case the user did not yet cause the Split integration
to sync into an Edge Config. In that case the demo would not work
anyhow, so it's better to show instructions.

<img width="1624" alt="image"
src="https://github.com/vercel/examples/assets/1765075/70911889-60d5-48a8-b81b-5edc4b8ef1bc">

edge-middleware/feature-flag-split/README.md

@@ -63,6 +63,8 @@ Then fill it with the following information:
 
 - You can find the Edge Config Connection String on vercel.com -> Storage -> \[Your Edge Config\] -> Projects. You can click Connect Project if your Edge Config is not connected to any project yet. This will automatically create a token for you and set it up as an environment variable on your project. Note that you still need to provide it to your `.env.local` file. Otherwise, click on Tokens in the sidebar and find the token you want to use. Then click on the three dots of and select Copy Connection String.
 
+- You also need to create feature flags called `New_Marketing_Page` and `New_About_Page`. You can set the user targeting to `Joe` and `Bobby` in whatever configuration you'd like as those users are used by this example.
+
 Next, run Next.js in development mode:
 
 ```bash

edge-middleware/feature-flag-split/app/missing-edge-config/page.tsx

@@ -22,7 +22,7 @@ function ExclamantionTriangleIcon() {
 export default function MissingEdgeConfigDialog() {
   return (
     <div
-      className="relative z-10"
+      className="relative z-30"
       aria-labelledby="modal-title"
       role="dialog"
       aria-modal="true"

edge-middleware/feature-flag-split/app/missing-split-item/page.tsx

@@ -0,0 +1,125 @@
+/* Heroicon name: outline/exclamation-triangle */
+function ExclamantionTriangleIcon() {
+  return (
+    <svg
+      className="h-6 w-6 text-gray-600"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth="1.5"
+      stroke="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z"
+      />
+    </svg>
+  )
+}
+
+export default function MissingSplitItemDialog() {
+  return (
+    <div
+      className="relative z-30"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+      <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+          <div className="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+            <div className="sm:flex sm:items-start">
+              <div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 sm:mx-0 sm:h-10 sm:w-10">
+                <ExclamantionTriangleIcon />
+              </div>
+              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                <h3
+                  className="text-lg font-medium leading-6 text-gray-900"
+                  id="modal-title"
+                >
+                  Incomplete Integration Setup
+                </h3>
+                <div className="mt-2">
+                  <p className="text-sm text-gray-500">
+                    Double check the following to ensure the example is set up
+                    correctly:
+                  </p>
+                  <ol className="text-sm text-gray-500 list-disc ml-8 mt-2 flex gap-2 flex-col">
+                    <li className="list-item list-disc">
+                      Make sure you have the{' '}
+                      <a
+                        href="https://vercel.com/integrations/split"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        Split integration
+                      </a>{' '}
+                      installed.
+                    </li>
+                    <li className="list-item list-disc">
+                      Make sure the integration is configured to sync your Split
+                      project to a Vercel Edge Config. Go to vercel.com →
+                      Integrations → Split → Manage → Configure.
+                    </li>
+                    <li className="list-item list-disc">
+                      Make sure that Edge Config is connected to your project.
+                      To do so, open vercel.com, find your project and click on
+                      Storage. The Edge Config should show up there. If not, add
+                      it.
+                    </li>
+                    <li className="list-item list-disc">
+                      Ensure you have the{' '}
+                      <span className="bg-gray-100 p-1 text-gray-900 rounded">
+                        EDGE_CONFIG_SPLIT_ITEM_KEY
+                      </span>{' '}
+                      environment variable configured and it contains the item
+                      key as specified by the Split integration. You can find
+                      this key on your account at Vercel under Integrations →
+                      Split → Manage → Configure → Edge Config Item Key
+                    </li>
+                    <li className="list-item list-disc">
+                      Ensure the Edge Config actually contains your Split data.
+                      Check whether your Edge Config contains a key called{' '}
+                      <span className="bg-gray-100 p-1 text-gray-900 rounded">
+                        {process.env.EDGE_CONFIG_SPLIT_ITEM_KEY}
+                      </span>
+                      , as defined by the EDGE_CONFIG_SPLIT_ITEM_KEY environment
+                      variable. If it does not contain such a key, you can go to
+                      Split and make a change to a feature flag. This causes the
+                      integration to resync. You should then see the value in
+                      your Edge Config.
+                    </li>
+                    <li className="list-item list-disc">
+                      Pull your latest Environment Variables if you are
+                      developing locally
+                    </li>
+                    <li className="list-item list-disc">
+                      Restart or redeploy your application
+                    </li>
+                  </ol>
+                  <p className="text-sm text-gray-500 mt-2">
+                    Then reload the page and this dialog will go away if your
+                    setup is correct.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="mt-5 sm:mt-4 sm:ml-10 sm:flex sm:pl-4">
+              <a
+                href="https://github.com/vercel/examples/blob/main/edge-middleware/feature-flag-split/README.md#set-up-environment-variables"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex w-full justify-center rounded-md border border-transparent bg-gray-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 sm:w-auto sm:text-sm"
+              >
+                Open Documentation
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

edge-middleware/feature-flag-split/middleware.ts

@@ -4,6 +4,7 @@
  * It would not be needed in a real application.
  */
 import { NextRequest, NextResponse } from 'next/server'
+import { has } from '@vercel/edge-config'
 
 export const config = {
   matcher: ['/', '/about', '/marketing'],
@@ -14,4 +15,9 @@ export async function middleware(req: NextRequest) {
     req.nextUrl.pathname = `/missing-edge-config`
     return NextResponse.rewrite(req.nextUrl)
   }
+
+  if (!(await has(process.env.EDGE_CONFIG_SPLIT_ITEM_KEY))) {
+    req.nextUrl.pathname = `/missing-split-item`
+    return NextResponse.rewrite(req.nextUrl)
+  }
 }