Merge pull request #148 from docker/revert_mui_update

Revert MUI update that was breaking table display

.github/workflows/build-scan-push.yaml

@@ -152,6 +152,10 @@ jobs:
             Docker image tag(s) pushed:
             ```text
             ${{ steps.docker_meta.outputs.tags }}
+            ```
+             To install the extension from this PR:
+            ```text
+            docker extension install -f ${{ steps.docker_meta.outputs.tags }}
             ```
             Labels added to images:
             ```text

.github/workflows/e2e.yaml

@@ -0,0 +1,58 @@
+# Copyright 2024 Docker Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+name: E2E tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  e2e:
+    name: Run E2E tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install and start Docker Desktop
+        uses: docker/desktop-action/[email protected]
+
+      - name: Change Desktop settings and allow installing non marketplace extensions
+        run: |
+          jq '.onlyMarketplaceExtensions|=false' ~/.docker/desktop/settings.json >./new-settings.json
+          mv -f ./new-settings.json ~/.docker/desktop/settings.json
+
+      - name: Build extension
+        run: |
+          make build-extension
+
+      - name: Kill Mono process running on port 8084 to unblock it # https://github.com/actions/runner-images/issues/2821
+        shell: bash
+        run: |
+          sudo fuser -k -n tcp 8084
+      - name: Enable corepack
+        run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Run E2E tests
+        env:
+          SKIP_EXTENSION_IMAGE_BUILD: true
+        run: |
+          cd e2e/electron
+          yarn install
+          xvfb-run --auto-servernum --server-args="-screen 0 1920x1080x24" -- yarn test:e2e

e2e/electron/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "14.17"
+        }
+      }
+    ],
+    "@babel/preset-typescript"
+  ],
+  "plugins": []
+}

e2e/electron/.eslintrc

@@ -0,0 +1,24 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "parser": "babel-eslint",
+  "env": {
+    "es6": true,
+    "node": true,
+    "jest": true,
+    "browser": true
+  },
+  "plugins": [
+    "prettier"
+  ],
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ]
+  },
+  "globals": {
+    "page": true
+  }
+}

e2e/electron/.gitignore

@@ -0,0 +1,3 @@
+screenshots
+.yarn
+node_modules

e2e/electron/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "tabWidth": 2
+}

e2e/electron/.yarnrc.yml

@@ -0,0 +1,15 @@
+# Copyright 2024 Docker Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+nodeLinker: node-modules

e2e/electron/README.md

@@ -0,0 +1,6 @@
+# Docker Desktop electron e2e tests
+
+## Steps
+
+- Ensure Docker Desktop is running (e.g. launch it in your OS)
+- Run `make e2e` or cd to `e2e/electron` and run: `yarn test:e2e`

e2e/electron/globals.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2024 Docker Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { Page } from 'puppeteer-core';
+
+declare global {
+  var page: Page | null;
+}

e2e/electron/jest.config.js

@@ -0,0 +1,23 @@
+/**
+ * Copyright 2024 Docker Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+module.exports = {
+  verbose: true,
+  testPathIgnorePatterns: ['/node_modules/'],
+  testEnvironment: 'node',
+  preset: 'ts-jest',
+  testTimeout: 360000,
+};

e2e/electron/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "electron-e2e",
+  "version": "1.0.0",
+  "description": "Testcafe setup to run docker desktop e2e tests",
+  "author": "docker",
+  "packageManager": "[email protected]",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
+    "@docker/extension-test-helper": "^0.1.2",
+    "@jest/test-sequencer": "^27.0.5",
+    "@tsconfig/node16": "^1.0.2",
+    "@types/dockerode": "^3.3.29",
+    "@types/jest": "^27.0.2",
+    "@types/mkdirp": "^1.0.2",
+    "axios": "^1.7.2",
+    "babel-eslint": "^10.1.0",
+    "cross-env": "^7.0.3",
+    "dockerode": "^4.0.2",
+    "electron": "31.1.0",
+    "eslint": "^9.6.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^3.4.0",
+    "jest": "^27.0.5",
+    "prettier": "^2.3.1",
+    "ts-jest": "^27.0.5",
+    "typescript": "^4.5.5"
+  },
+  "dependencies": {
+    "@rumpl/node-eventsource": "^1.0.0",
+    "@types/bytes": "^3.1.4",
+    "bytes": "^3.1.2",
+    "find-process": "^1.4.4",
+    "fkill": "^7.1.1",
+    "get-port": "^7.1.0",
+    "got": "^14.4.1",
+    "mkdirp": "^1.0.4",
+    "puppeteer": "^22.12.1",
+    "puppeteer-core": "^13.1.3"
+  },
+  "scripts": {
+    "test:e2e": "yarn run test:e2e:packaged",
+    "test:e2e:packaged": "cross-env NODE_ENV=test WHICH_INSTANCE=packaged jest --colors --bail --runInBand --forceExit",
+    "pretest:e2e:dev": "(cd ../../client/desktop && yarn build:development)",
+    "test:e2e:dev": "cross-env NODE_ENV=test WHICH_INSTANCE=dev jest --colors --bail --runInBand --forceExit",
+    "test:puppeteer:debug": "cross-env NODE_ENV=test npx ndb jest --colors --bail --runInBand --forceExit",
+    "test:puppeteer:verbose": "cross-env NODE_ENV=test DEBUG=puppeteer:* jest --colors --bail --runInBand --forceExit",
+    "lint": "yarn run lint:js && yarn run check:ts",
+    "lint:js": "eslint .",
+    "check:ts": "tsc --noEmit",
+    "prettier:check": "prettier --check \"**/*.js\" \"**/*.ts\"",
+    "prettier": "prettier --write \"**/*.js\" \"**/*.ts\""
+  }
+}

e2e/electron/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@tsconfig/node16/tsconfig.json",
+  "compilerOptions": {
+    "preserveConstEnums": true,
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "esModuleInterop": true
+  },
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "node_modules"
+  ],
+  "noEmit": true // we don't ever generate .js files from this project, jest can run TS directly
+}

e2e/electron/volume-backup-extension.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright 2024 Docker Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { DesktopUI } from '@docker/extension-test-helper';
+import { exec as originalExec } from 'child_process';
+import * as util from 'util';
+
+export const exec = util.promisify(originalExec);
+
+let dashboard: DesktopUI;
+
+beforeAll(async () => {
+  if (process.env.SKIP_EXTENSION_IMAGE_BUILD != 'true') {
+    console.log('starting building extension...');
+    await exec(`docker build -t docker/volumes-backup-extension:latest .`, {
+      cwd: '../../',
+    });
+    console.log('extension built');
+  }
+  await exec(
+    `docker container create --name e2e-test-container -v e2e-test-volume:/data hello-world`,
+  );
+  console.log('sample volume and container created');
+  await exec(
+    `docker extension install -f docker/volumes-backup-extension:latest`,
+  );
+  console.log('extension installed');
+});
+
+afterAll(async () => {
+  await dashboard?.stop();
+  console.log('dashboard app closed');
+  await exec(`docker extension uninstall docker/volumes-backup-extension`);
+  console.log('extension uninstalled');
+  await exec(`docker container rm e2e-test-container`);
+  await exec(`docker volume rm e2e-test-volume`);
+  console.log('extension uninstalled');
+});
+
+describe('Test Logs Explorer UI', () => {
+  test('should display volumes and their size', async () => {
+    dashboard = await DesktopUI.start();
+
+    const eFrame = await dashboard.navigateToExtension(
+      'docker/volumes-backup-extension',
+    );
+
+    // Check the table displays the test volume name and its size
+    await eFrame.waitForXPath(
+      '//*[@data-rowindex][contains(., "e2e-test-volume")][contains(., "e2e-test-container")][contains(., "0 B")]',
+    );
+  });
+});