e2e tests, zero-state for a few views and a few bug fixes

e2e tests are for example-app, but kept in the same cypress setup for simpler reuse of shared cypress configuration needed for both cases.

.github/workflows/CI.yaml

@@ -95,22 +95,32 @@ jobs:
       - name: Install Dependencies 🔧
         run: yarn install --immutable
 
+      # For now, e2e tests are run in the same job.
+      # Could be split into two jobs later on when there are enough e2e tests for it to be worth it.
+      - name: Build example-app 🔨
+        run: yarn workspace jui-example-app run build
+
       - name: Run Cypress Tests ✅
         if: ${{ env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true' }}
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
           # Without this, we would need to "finalize" percy build explicitly. More info: https://docs.percy.io/docs/parallel-test-suites
-          PERCY_PARALLEL_TOTAL: 10
+          PERCY_PARALLEL_TOTAL: 20 # component and e2e, each 10
           # Percy's nonce is supposed to be set to run id by default, but it's not. Plus, appending run_number makes it more reliable in case of rerunning
           PERCY_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-        run: yarn run test:cypress --parallel
-
+        run: |
+          yarn run cypress:component --record --parallel
+          yarn workspace jui-example-app run serve &
+          yarn run cypress:e2e --record --parallel
       - name: Run Cypress Tests (without percy) ✅
         if: ${{ !(env.IS_PR_JUST_MERGED == 'true' || env.IS_PR_WITH_PERCY == 'true') }}
         env:
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-        run: yarn run test:cypress --parallel
+        run: |
+          yarn run cypress:component --record --parallel
+          yarn workspace jui-example-app run serve &
+          yarn run cypress:e2e --record --parallel
 
       - uses: actions/upload-artifact@v2
         name: Upload Cypress screenshots if tests failed 🤕

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "type-check": "yarn workspaces foreach run type-check",
     "test": "yarn workspaces foreach run test",
-    "test:cypress": "yarn workspaces foreach run test:cypress",
+    "cypress:component": "yarn workspaces foreach run cypress:component",
+    "cypress:e2e": "yarn workspaces foreach run cypress:e2e",
     "lint": "yarn run lint:lib",
     "lint:lib": "yarn eslint packages/jui",
     "format:check": "prettier packages/jui packages/website .github --check",

packages/example-app/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "serve": "../../node_modules/.bin/parcel serve",
+    "dev": "../../node_modules/.bin/parcel serve",
+    "serve": "PORT=3001 ../../node_modules/.bin/serve ./dist",
     "jest:type-check": "tsc --project tsconfig.jest.json",
     "test": "jest",
     "type-check": "tsc --project tsconfig.app.json && yarn run jest:type-check",
@@ -13,7 +14,10 @@
   "alias": {
     "caf": "caf/dist/esm/index.mjs",
     "@intellij-platform/core/utils/tree-utils": "@intellij-platform/core/src/utils/tree-utils",
-    "@intellij-platform/core/utils/array-utils": "@intellij-platform/core/src/utils/array-utils"
+    "@intellij-platform/core/utils/array-utils": "@intellij-platform/core/src/utils/array-utils",
+    "@intellij-platform/core/utils/useEventCallback": "@intellij-platform/core/src/utils/useEventCallback",
+    "@intellij-platform/core/StyledSeparator": "@intellij-platform/core/src/StyledSeparator",
+    "@intellij-platform/core/List/StyledListItem": "@intellij-platform/core/src/List/StyledListItem"
   },
   "dependencies": {
     "@intellij-platform/core": "workspace:^",
@@ -43,6 +47,7 @@
     "@types/jest": "^29.5.2",
     "@types/uuid": "^9.0.7",
     "jest": "^29.5.0",
+    "serve": "^14.2.3",
     "typescript": "workspace:*"
   }
 }

packages/example-app/src/App.tsx

@@ -10,7 +10,7 @@ import {
 } from "@intellij-platform/core";
 import { DefaultSuspense } from "./DefaultSuspense";
 import { Project } from "./Project/Project";
-import { SampleRepoInitializer } from "./SampleRepoInitializer";
+import { ProjectInitializer } from "./ProjectInitializer";
 import { fs, WaitForFs } from "./fs/fs";
 import { exampleAppKeymap } from "./exampleAppKeymap";
 import "./jetbrains-mono-font.css";
@@ -29,7 +29,7 @@ export const App = ({ height }: { height?: CSSProperties["height"] }) => {
     // TODO: add an error boundary
     <DefaultSuspense>
       <WaitForFs>
-        <SampleRepoInitializer>
+        <ProjectInitializer>
           <KeymapProvider keymap={exampleAppKeymap}>
             <RecoilRoot>
               <WindowManager>
@@ -39,7 +39,7 @@ export const App = ({ height }: { height?: CSSProperties["height"] }) => {
               </WindowManager>
             </RecoilRoot>
           </KeymapProvider>
-        </SampleRepoInitializer>
+        </ProjectInitializer>
       </WaitForFs>
     </DefaultSuspense>
   );

packages/example-app/src/Editor/EditorZeroState.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import {
+  CommonActionId,
+  styled,
+  useAction,
+  useGetActionShortcut,
+} from "@intellij-platform/core";
+
+const StyledContainer = styled.div.attrs({ tabIndex: -1 })`
+  display: flex;
+  flex-direction: column;
+  height: inherit;
+  justify-content: center;
+  padding: 0 25%;
+  font-size: 1rem;
+  outline: none;
+`;
+
+const StyledLine = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+`;
+
+const StyledShortcut = styled.div`
+  color: ${({ theme }) => theme.commonColors.linkForegroundEnabled};
+`;
+
+export function EditorZeroState() {
+  return (
+    <StyledContainer>
+      <ActionTip actionId={CommonActionId.GO_TO_FILE} />
+      <ActionTip actionId={CommonActionId.GO_TO_ACTION} />
+    </StyledContainer>
+  );
+}
+
+function ActionTip({ actionId }: { actionId: string }) {
+  const getShortcut = useGetActionShortcut();
+  const action = useAction(actionId);
+  return (
+    <StyledLine>
+      {action?.title}
+      <StyledShortcut>{getShortcut(actionId)}</StyledShortcut>
+    </StyledLine>
+  );
+}