Use 0.3 staging block hub (#1920)

## 🌟 What is the purpose of this PR?

HASH is updated to load Block Protocol v0.3 blocks as of #1823, but the production [**Þ _Hub_**](https://blockprotocol.org/hub) will be serving 0.2 blocks until we've got everything ready for 0.3 to release.

In the meantime, to be able to test out 0.3 blocks in HASH, we can use a version of blockprotocol.org built off the `0.3` branch in `blockprotocol`.

This PR does that.

## 🔗 Related links

<!-- Add links to any context it is worth capturing (e.g. Issues, Discussions, Discord, Asana) -->
<!-- Mark any links which are not publicly accessible as _(internal)_ -->
<!-- Don't rely on links to explain the PR, especially internal ones: use the sections above -->

- [Asana task for restoring the production hub](https://app.asana.com/0/1203358502199087/1203801045329699/f) _(internal)_

## 🔍 What does this change?

- Centralise all the references to the BP URL for loading blocks to a shared `blockProtocolHubOrigin` variable
- Set the value of that variable to `https://blockprotocol-git-03.stage.hash.ai`, which is the Vercel alias for 'deployment built from the tip of `0.3`'
- Use `paragraphBlockComponentId` variable in a couple of places where we were previously repeating the literal string for the paragraph's URL in blockprotocol.org

## 🐾 Next steps

- Revert this when the `0.3` branch of `blockprotocol` is merged into `main`

## ❓ How to test this?
**You may need to clear your `localStorage` value for "user workspace blocks" if you have any issue with the below**

1.  Load a page
1.  Load the code block, which is 0.3-compliant, edit the content, refresh to check that the update call succeeded
1.  To confirm that the BP API works, set `BLOCK_PROTOCOL_API_KEY` to a staging API key (generate one in the linked deployment)

apps/hash-api/src/graph/knowledge/system-types/page.ts

@@ -1,3 +1,4 @@
+import { paragraphBlockComponentId } from "@local/hash-isomorphic-utils/blocks";
 import {
   AccountId,
   extractOwnedByIdFromEntityId,
@@ -163,7 +164,7 @@ export const createPage: ImpureGraphFunction<
       : [
           await createBlock(ctx, {
             ownedById,
-            componentId: "https://blockprotocol.org/blocks/@hash/paragraph",
+            componentId: paragraphBlockComponentId,
             blockData: await createEntity(ctx, {
               ownedById,
               properties: {

apps/hash-api/src/graphql/resolvers/blockprotocol/get-block.ts

@@ -1,3 +1,4 @@
+import { blockProtocolHubOrigin } from "@local/hash-isomorphic-utils/blocks";
 import fetch from "node-fetch";
 
 import { BlockProtocolBlock, ResolverFn } from "../../api-types.gen";
@@ -15,7 +16,7 @@ export const getBlockProtocolBlocksResolver: ResolverFn<
     throw new Error("BLOCK_PROTOCOL_API_KEY env variable is missing!");
   }
 
-  const res = await fetch("https://blockprotocol.org/api/blocks", {
+  const res = await fetch(`${blockProtocolHubOrigin}/api/blocks`, {
     headers: { "x-api-key": apiKey },
   });
 

apps/hash-frontend/src/blocks/page/create-editor-view.ts

@@ -1,5 +1,8 @@
 import { ApolloClient } from "@apollo/client";
-import { HashBlock } from "@local/hash-isomorphic-utils/blocks";
+import {
+  HashBlock,
+  paragraphBlockComponentId,
+} from "@local/hash-isomorphic-utils/blocks";
 import { createProseMirrorState } from "@local/hash-isomorphic-utils/create-prose-mirror-state";
 import { BlockEntity } from "@local/hash-isomorphic-utils/entity";
 import {
@@ -251,9 +254,7 @@ export const createEditorView = (
   const blocksArray = Object.values(blocks);
 
   const paragraphBlock = blocksArray.find(
-    (block) =>
-      block.meta.componentId ===
-      "https://blockprotocol.org/blocks/@hash/paragraph",
+    (block) => block.meta.componentId === paragraphBlockComponentId,
   );
 
   if (!paragraphBlock) {

libs/@local/hash-isomorphic-utils/src/blocks.ts

@@ -203,13 +203,21 @@ export const fetchBlock = async (
   return await promise;
 };
 
-export const paragraphBlockComponentId =
-  "https://blockprotocol.org/blocks/@hash/paragraph";
+/**
+ * @todo-0.3 replace this temporary domain with blockprotocol.org
+ * https://app.asana.com/0/1203358502199087/1203788113163116/f
+ */
+export const blockProtocolHubOrigin =
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- we don't want empty strings either
+  process.env.BLOCK_PROTOCOL_HUB_ORIGIN ||
+  "https://blockprotocol-git-03.stage.hash.ai";
+
+export const paragraphBlockComponentId = `${blockProtocolHubOrigin}/blocks/@hash/paragraph`;
 
 const textBlockComponentIds = new Set([
   paragraphBlockComponentId,
-  "https://blockprotocol.org/blocks/@hash/header",
-  "https://blockprotocol.org/blocks/@hash/callout",
+  `${blockProtocolHubOrigin}/blocks/@hash/header`,
+  `${blockProtocolHubOrigin}/blocks/@hash/callout`,
 ]);
 
 /**
@@ -222,13 +230,13 @@ const textBlockComponentIds = new Set([
  */
 export const defaultBlockComponentIds = [
   ...Array.from(textBlockComponentIds),
-  "https://blockprotocol.org/blocks/@hash/person",
-  "https://blockprotocol.org/blocks/@hash/image",
-  "https://blockprotocol.org/blocks/@hash/table",
-  "https://blockprotocol.org/blocks/@hash/divider",
-  "https://blockprotocol.org/blocks/@hash/embed",
-  "https://blockprotocol.org/blocks/@hash/code",
-  "https://blockprotocol.org/blocks/@hash/video",
+  `${blockProtocolHubOrigin}/blocks/@hash/person`,
+  `${blockProtocolHubOrigin}/blocks/@hash/image`,
+  `${blockProtocolHubOrigin}/blocks/@hash/table`,
+  `${blockProtocolHubOrigin}/blocks/@hash/divider`,
+  `${blockProtocolHubOrigin}/blocks/@hash/embed`,
+  `${blockProtocolHubOrigin}/blocks/@hash/code`,
+  `${blockProtocolHubOrigin}/blocks/@hash/video`,
 ];
 
 /**

tests/hash-backend-integration/src/tests/integration.test.ts

@@ -32,6 +32,10 @@ import {
   WayToUseHash,
   DeprecatedEntityType,
 } from "../graphql/api-types.gen";
+import {
+  blockProtocolHubOrigin,
+  paragraphBlockComponentId,
+} from "@local/hash-isomorphic-utils/blocks";
 
 const logger = new Logger({
   mode: "dev",
@@ -564,7 +568,7 @@ describe("logged in user ", () => {
           {
             insertBlock: {
               accountId: existingUser.accountId,
-              componentId: "https://blockprotocol.org/blocks/@hash/header",
+              componentId: `${blockProtocolHubOrigin}/blocks/@hash/header`,
               position: 0,
               entity: {
                 entityType: {
@@ -658,7 +662,7 @@ describe("logged in user ", () => {
     });
 
     // ComponentId doesn't exist in the database
-    const componentId = "https://blockprotocol.org/blocks/@hash/unknown";
+    const componentId = `${blockProtocolHubOrigin}/blocks/@hash/unknown`;
     let entityTypeComponentId: string;
     it("can add a block with unknown componentId", async () => {
       // No type argument given to insertBlock, only componentId
@@ -869,7 +873,7 @@ describe("logged in user ", () => {
         {
           insertBlock: {
             accountId: page.accountId,
-            componentId: "https://blockprotocol.org/blocks/@hash/paragraph",
+            componentId: paragraphBlockComponentId,
             position: 1,
             entity: {
               entityType: {
@@ -882,7 +886,7 @@ describe("logged in user ", () => {
         {
           insertBlock: {
             accountId: page.accountId,
-            componentId: "https://blockprotocol.org/blocks/@hash/paragraph",
+            componentId: paragraphBlockComponentId,
             position: 2,
             entity: {
               entityType: {
@@ -936,7 +940,7 @@ describe("logged in user ", () => {
           {
             insertBlock: {
               accountId: existingUser.accountId,
-              componentId: "https://blockprotocol.org/blocks/@hash/header",
+              componentId: `${blockProtocolHubOrigin}/blocks/@hash/header`,
               position: 0,
               entity: {
                 entityType: {
@@ -958,11 +962,11 @@ describe("logged in user ", () => {
           {
             insertBlock: {
               accountId: existingUser.accountId,
-              componentId: "https://blockprotocol.org/blocks/@hash/divider",
+              componentId: `${blockProtocolHubOrigin}/blocks/@hash/divider`,
               position: 1,
               entity: {
                 entityType: {
-                  componentId: "https://blockprotocol.org/blocks/@hash/divider",
+                  componentId: `${blockProtocolHubOrigin}/blocks/@hash/divider`,
                 },
                 entityProperties: {},
               },
@@ -1016,7 +1020,7 @@ describe("logged in user ", () => {
         accountId: existingUser.accountId,
         filter: {
           entityType: {
-            componentId: "https://blockprotocol.org/blocks/@hash/divider",
+            componentId: `${blockProtocolHubOrigin}/blocks/@hash/divider`,
           },
         },
       });
@@ -1083,7 +1087,7 @@ describe("logged in user ", () => {
         {
           insertBlock: {
             accountId: page.accountId,
-            componentId: "https://blockprotocol.org/blocks/@hash/paragraph",
+            componentId: paragraphBlockComponentId,
             position: 1,
             entity: {
               entityType: {

tests/hash-playwright/tests/page-creation.spec.ts

@@ -1,3 +1,4 @@
+import { blockProtocolHubOrigin } from "@local/hash-isomorphic-utils/blocks";
 import { sleep } from "@local/hash-isomorphic-utils/sleep";
 
 import { loginUsingTempForm } from "./shared/login-using-temp-form";
@@ -110,7 +111,7 @@ test("user can create page", async ({ page }) => {
 
   await blockContextMenu
     .locator('[placeholder="Load block from URL..."]')
-    .fill("https://blockprotocol.org/blocks/@hash/code");
+    .fill(`${blockProtocolHubOrigin}/blocks/@hash/code`);
 
   /**
    * This is creating a new block above the current one, instead of switching