From 7c8b4b70a5568411284db740f44e72697edb6730 Mon Sep 17 00:00:00 2001 From: Ciaran Morinan <37743469+CiaranMn@users.noreply.github.com> Date: Wed, 25 Jan 2023 17:04:54 +0000 Subject: [PATCH] Use 0.3 staging block hub (#1920) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 🌟 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 - [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) --- .../src/graph/knowledge/system-types/page.ts | 3 +- .../resolvers/blockprotocol/get-block.ts | 3 +- .../src/blocks/page/create-editor-view.ts | 9 +++--- .../hash-isomorphic-utils/src/blocks.ts | 30 ++++++++++++------- .../src/tests/integration.test.ts | 22 ++++++++------ .../tests/page-creation.spec.ts | 3 +- 6 files changed, 43 insertions(+), 27 deletions(-) diff --git a/apps/hash-api/src/graph/knowledge/system-types/page.ts b/apps/hash-api/src/graph/knowledge/system-types/page.ts index 45838dbab21..c1d6e0c6742 100644 --- a/apps/hash-api/src/graph/knowledge/system-types/page.ts +++ b/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: { diff --git a/apps/hash-api/src/graphql/resolvers/blockprotocol/get-block.ts b/apps/hash-api/src/graphql/resolvers/blockprotocol/get-block.ts index 094c053e92c..a58d3489230 100644 --- a/apps/hash-api/src/graphql/resolvers/blockprotocol/get-block.ts +++ b/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 }, }); diff --git a/apps/hash-frontend/src/blocks/page/create-editor-view.ts b/apps/hash-frontend/src/blocks/page/create-editor-view.ts index 44f7ca96a95..3e73801003d 100644 --- a/apps/hash-frontend/src/blocks/page/create-editor-view.ts +++ b/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) { diff --git a/libs/@local/hash-isomorphic-utils/src/blocks.ts b/libs/@local/hash-isomorphic-utils/src/blocks.ts index 7b2193b1dc1..690a702b93b 100644 --- a/libs/@local/hash-isomorphic-utils/src/blocks.ts +++ b/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`, ]; /** diff --git a/tests/hash-backend-integration/src/tests/integration.test.ts b/tests/hash-backend-integration/src/tests/integration.test.ts index 3a4c8dfe2a2..309663bacb0 100644 --- a/tests/hash-backend-integration/src/tests/integration.test.ts +++ b/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: { diff --git a/tests/hash-playwright/tests/page-creation.spec.ts b/tests/hash-playwright/tests/page-creation.spec.ts index 2bb49523421..12bb9a4ccbd 100644 --- a/tests/hash-playwright/tests/page-creation.spec.ts +++ b/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