Merge branch 'master' into fix/unused-imports

.github/workflows/cache-pnpm-install.yml

@@ -9,6 +9,7 @@ on:
 jobs:
   cache-pnpm-store:
     name: Install everything with PNPM and cache it
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     env:
       UTOPIA_SHA: ${{ github.sha }}

.github/workflows/discord-discussion-comments.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Comment To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - name: Build Embeds JSON

.github/workflows/discord-discussion-opened.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - name: Build Embeds JSON

.github/workflows/discord-issue-closed.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - name: Build Embeds JSON

.github/workflows/discord-issue-comments.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Comment To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     if: ${{ !github.event.issue.pull_request }}
     steps:

.github/workflows/discord-issue-opened.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - name: Build Embeds JSON

.github/workflows/discord-pr-closed.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
       - name: Build Merged Args

.github/workflows/discord-pr-comments.yml

@@ -22,6 +22,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     if: ${{ github.event.pull_request || github.event.issue.pull_request }}
     steps:

.github/workflows/discord-pr-opened.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     if: ${{ !github.event.pull_request.draft }}
     steps:

.github/workflows/discord-pr-review.yml

@@ -20,6 +20,7 @@ permissions:
 jobs:
   post-to-discord:
     name: Post Notification To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     if: ${{ github.event.review.state == 'approved' || github.event.review.state == 'changes_requested' }}
     steps:

.github/workflows/editor-sharded-tests.yml

@@ -15,6 +15,7 @@ on:
 jobs:
   test-editor-karma-shard:
     name: Test Editor PR – Karma tests (Shard ${{ inputs.shard_number }})
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     env:
       UTOPIA_SHA: ${{ github.sha }}

.github/workflows/google-webfonts-list-updater.yml

@@ -5,6 +5,7 @@ on:
 jobs:
   google-web-fonts-updater:
     name: Google Web Fonts Updater
+    timeout-minutes: 5
     runs-on: ubuntu-20.04
     steps:
       - name: Checkout code

.github/workflows/master-pushes.yml

@@ -11,6 +11,7 @@ jobs:
 
   test-editor-code:
     name: Test Editor - TypeScript, ESLint, dependency-cruiser
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:
@@ -44,6 +45,7 @@ jobs:
 
   test-editor-jest:
     name: Test Editor - Jest tests
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:
@@ -97,6 +99,7 @@ jobs:
 
   test-server:
     name: Test Server
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     env:
       UTOPIA_SHA: ${{ github.sha }}
@@ -137,6 +140,7 @@ jobs:
 
   trigger-deploy:
     name: Trigger Deploy
+    timeout-minutes: 5
     needs:
       [
         test-editor-code,
@@ -156,6 +160,7 @@ jobs:
 
   post-failure-to-discord:
     name: Post Failure Message To Discord
+    timeout-minutes: 5
     runs-on: ubuntu-latest
     if: failure()
     needs: [trigger-deploy]

.github/workflows/pull-requests.yml

@@ -9,6 +9,7 @@ jobs:
 
   test-editor-code:
     name: Test Editor PR – TypeScript, ESLint, dependency-cruiser
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:
@@ -41,8 +42,10 @@ jobs:
       - name: Run tsc, eslint, depdendency-cruiser and the website tests
         if: steps.cache-editor-tests.outputs.cache-hit != 'true'
         run: nix-shell --arg includeServerBuildSupport false --arg includeRunLocallySupport false --run check-editor-code-ci
+
   test-editor-jest:
     name: Test Editor PR – Jest tests
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:
@@ -96,6 +99,7 @@ jobs:
 
   deploy-staging:
     name: Deploy Staging Editor
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:
@@ -212,6 +216,7 @@ jobs:
 
   performance-test:
     name: Run Performance Tests
+    timeout-minutes: 15
     runs-on: self-hosted
     needs: [deploy-staging, cache-pnpm-store]
     env:
@@ -317,6 +322,7 @@ jobs:
 
   system-test:
     name: Run System Tests
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [deploy-staging, cache-pnpm-store]
     env:

.github/workflows/screenshot-production.yml

@@ -12,6 +12,7 @@ jobs:
 
   take-screenshot:
     name: Take Screenshot
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     steps:

.github/workflows/screenshot-staging.yml

@@ -12,6 +12,7 @@ jobs:
 
   take-screenshot:
     name: Take Screenshot
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     steps:

.github/workflows/tag-release-automated.yml

@@ -11,6 +11,7 @@ jobs:
   system-test:
     # For automated releases we want to check it is safe first
     name: Run System Tests
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     needs: [cache-pnpm-store]
     env:

.github/workflows/tag-release.yml

@@ -13,6 +13,7 @@ on:
 jobs:
   release:
     name: Create Release
+    timeout-minutes: 15
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code

editor/package.json

@@ -410,7 +410,8 @@
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "@remix-run/[email protected]": "patches/@[email protected]"
     }
   }
 }

editor/patches/@remix-run__react@2.0.1.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/esm/routeModules.js b/dist/esm/routeModules.js
+index 1b15029f2772719232ddf4ae95a2010163321630..891709ac14f533aad20f54709d00e3d35ee914d7 100644
+--- a/dist/esm/routeModules.js
++++ b/dist/esm/routeModules.js
+@@ -44,7 +44,7 @@ async function loadRouteModule(route, routeModulesCache) {
+     // asset we're trying to import! Reload from the server and the user
+     // (should) get the new manifest--unless the developer purged the static
+     // assets, the manifest path, but not the documents 😬
+-    window.location.reload();
++    console.warn('window.location.reload prevented from running.')
+     return new Promise(() => {
+       // check out of this hook cause the DJs never gonna re[s]olve this
+     });
+diff --git a/dist/routeModules.js b/dist/routeModules.js
+index 5f878eaae5262cc68d6b4599dc887413bf359960..76deff82943c55b7f5f0560f8e8d624e8b4ec53c 100644
+--- a/dist/routeModules.js
++++ b/dist/routeModules.js
+@@ -66,7 +66,7 @@ async function loadRouteModule(route, routeModulesCache) {
+     // asset we're trying to import! Reload from the server and the user
+     // (should) get the new manifest--unless the developer purged the static
+     // assets, the manifest path, but not the documents 😬
+-    window.location.reload();
++    console.warn('window.location.reload prevented from running.')
+     return new Promise(() => {
+       // check out of this hook cause the DJs never gonna re[s]olve this
+     });

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -446,25 +446,27 @@ const HoveredCommentIndicator = React.memo((props: HoveredCommentIndicatorProps)
         width: 250,
         boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
         background: colorTheme.bg1.value,
+        zIndex: 1,
         position: 'fixed',
+        top: position.y,
         // temporarily moving the hovered comment indicator to align with the not hovered version
-        top: position.y - 40.5,
         left: position.x - 3,
+        overflow: 'hidden',
       }}
       onMouseDown={onMouseDown}
       onClick={onClick}
     >
       <CommentWrapper
         style={{
           overflow: 'auto',
+          background: 'transparent',
         }}
         data-theme={theme}
         user={user}
         comment={comment}
         showActions={false}
       />
       <CommentRepliesCounter thread={thread} />
-      <div style={{ height: 8 }} />
     </div>
   )
 })

editor/src/components/canvas/controls/comment-popup.tsx

@@ -578,15 +578,18 @@ const HeaderComment = React.memo(
           top: 0,
           left: 0,
           right: 0,
-          backgroundColor: 'white',
           zIndex: 1,
           boxShadow: UtopiaStyles.shadowStyles.highest.boxShadow,
           transition: 'all 100ms linear',
           minHeight: 67,
           transform: 'scale(1.01)',
         }}
       >
-        <CommentWrapper user={user} comment={comment} />
+        <CommentWrapper
+          user={user}
+          comment={comment}
+          style={{ background: colorTheme.bg1.value, color: colorTheme.fg1.value }}
+        />
       </div>
     )
   },

editor/src/components/canvas/controls/comment-replies-counter.tsx

@@ -22,6 +22,7 @@ export const CommentRepliesCounter = React.memo((props: CommentRepliesCounterPro
         paddingLeft: 44,
         fontSize: 9,
         color: colorTheme.fg6.value,
+        marginBottom: 8,
       }}
     >
       {repliesCount} {repliesCount > 1 ? 'replies' : 'reply'}

editor/src/components/canvas/design-panel-root.tsx

@@ -211,7 +211,7 @@ export const RightPane = React.memo<ResizableRightPaneProps>((props) => {
           </>,
         )}
         {when(
-          isFeatureEnabled('Commenting'),
+          isFeatureEnabled('Multiplayer'),
           <MenuTab
             label={'Comments'}
             selected={selectedTab === RightMenuTab.Comments}

editor/src/components/canvas/multiplayer-presence.tsx

@@ -140,7 +140,7 @@ export const MultiplayerPresence = React.memo(() => {
     <>
       <FollowingOverlay />
       <MultiplayerShadows />
-      {when(isFeatureEnabled('Commenting'), <CommentIndicators />)}
+      <CommentIndicators />
       <MultiplayerCursors />
       {when(isCommentMode(mode) && mode.comment != null, <CommentPopup />)}
     </>

editor/src/components/editor/canvas-toolbar.tsx

@@ -497,7 +497,7 @@ export const CanvasToolbar = React.memo(() => {
           />
         </Tooltip>
         {when(
-          isFeatureEnabled('Commenting'),
+          isFeatureEnabled('Multiplayer'),
           <Tooltip title={commentButtonTooltip} placement='bottom'>
             <InsertModeButton
               testid={CommentModeButtonTestId}

editor/src/components/editor/global-shortcuts.tsx

@@ -453,7 +453,7 @@ export function handleKeyDown(
         return []
       },
       [COMMENT_SHORTCUT]: () => {
-        if (isFeatureEnabled('Commenting')) {
+        if (isFeatureEnabled('Multiplayer')) {
           return [
             EditorActions.switchEditorMode(EditorModes.commentMode(null, 'not-dragging')),
             EditorActions.setRightMenuTab(RightMenuTab.Comments),