From bf4b9a280396b3452a48c593f02945aff7b73d91 Mon Sep 17 00:00:00 2001 From: Jackson Greer Date: Fri, 9 Aug 2024 13:03:12 -0700 Subject: [PATCH] docs: updated docs with local packages section (#57) * build: install mui icons added in package.json Signed-off-by: Jackson Greer * build: removed icon install since part of package file now Signed-off-by: Jackson Greer * docs: added local packages section and updated local image build to mention default setting of remote image Signed-off-by: Jackson Greer * build: update lock file Signed-off-by: Jackson Greer * docs: mention vscode in installing packages locally section Signed-off-by: Jackson Greer --------- Signed-off-by: Jackson Greer --- Dockerfile | 2 - contributing.md | 21 +++++- ui/package-lock.json | 173 ++++++++++++++++++++++++++++++++++++------- ui/package.json | 3 +- 4 files changed, 165 insertions(+), 34 deletions(-) diff --git a/Dockerfile b/Dockerfile index f8e5068..2211b6a 100644 --- a/Dockerfile +++ b/Dockerfile @@ -6,8 +6,6 @@ COPY ui/package-lock.json /ui/package-lock.json RUN --mount=type=cache,target=/usr/src/app/.npm \ npm set cache /usr/src/app/.npm && \ npm ci -# install mui icons -RUN npm install @mui/icons-material COPY ui /ui RUN npm run build diff --git a/contributing.md b/contributing.md index 85f9839..63c1d1f 100644 --- a/contributing.md +++ b/contributing.md @@ -3,14 +3,14 @@ Before proceeding, ensure that Docker Desktop is installed on your computer and using the WSL backend if using Windows. ## Building the copa-extenion image -In order to run the extension locally, you need to build the `copa-extension` image image specified in the `/container/copa-extension` folder. +By default, the extension will pull the copa image from `ghcr.io/project-copacetic/copa-extension` and use that for the patching operation. If you would like to make modifications to this image and test locally, you need to build the `copa-extension` image image specified in the `/container/copa-extension` folder. Run the following make command in the root directory to install it: ``` make build-copa-image ``` -After the command finishes, confirm that the image `copa-extension` is listed when you run the command `docker images`. +After the command finishes, confirm that the image `copa-extension` is listed when you run the command `docker images`. Once confirmed, change the `IMAGE_NAME` variable in `app.tsx` to point to `copa-extension` instead of `ghcr.io/project-copacetic/copa-extension`. ## Building the frontend image @@ -22,4 +22,19 @@ make build-extension ``` make install-extension ``` -After following the steps, the extension should be successfully installed in Docker Desktop. If you make any changes to the code, run `make update-extension` to see those changes reflected. \ No newline at end of file +After following the steps, the extension should be successfully installed in Docker Desktop. If you make any changes to the code, run `make update-extension` to see those changes reflected. + +## Install node packages locally (optional) + +To use Visual Studio Code IntelliSense features (code completion, parameter info, quick info, and member lists), you need to install the node and yarn packages locally. + +After installing [Node.js](https://nodejs.org/en/download/package-manager/), change to the `/ui` directory and run the following command: + +``` +npm install +``` +If making changes to the testing code in `/e2e`, run `npm install --global yarn` to install the yarn package manager and then run the following command in the `/e2e` directory: +``` +yarn install +``` + diff --git a/ui/package-lock.json b/ui/package-lock.json index fd9e68a..a435808 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -12,7 +12,8 @@ "@docker/extension-api-client": "0.3.4", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", - "@mui/material": "5.16.6", + "@mui/icons-material": "^5.16.6", + "@mui/material": "5.10.8", "react": "^18.2.0", "react-dom": "^18.2.0" }, @@ -1512,6 +1513,48 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@mui/base": { + "version": "5.0.0-alpha.100", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.100.tgz", + "integrity": "sha512-bSoJEKCENtmJrJDECHUe9PiqztIUACuSskyqw9ypqE7Dz3WxL3e8puFsWBkUsz+WOCjXh4B4Xljn88Ucxxv5HA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.19.0", + "@emotion/is-prop-valid": "^1.2.0", + "@mui/types": "^7.2.0", + "@mui/utils": "^5.10.6", + "@popperjs/core": "^2.11.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/base/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/core-downloads-tracker": { "version": "5.16.6", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz", @@ -1521,22 +1564,49 @@ "url": "https://opencollective.com/mui-org" } }, - "node_modules/@mui/material": { + "node_modules/@mui/icons-material": { "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz", - "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz", + "integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==", + "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.6", - "@mui/system": "^5.16.6", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", - "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "@babel/runtime": "^7.23.9" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.0.0", + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "5.10.8", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.8.tgz", + "integrity": "sha512-sF/Ka0IJjGXV52zoT4xAWEqXVRjNYbIjATo9L4Q5oQC5iJpGrKJFY16uNtWWB0+vp/nayAuPGZHrxtV+t3ecdQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.19.0", + "@mui/base": "5.0.0-alpha.100", + "@mui/core-downloads-tracker": "^5.10.8", + "@mui/system": "^5.10.8", + "@mui/types": "^7.2.0", + "@mui/utils": "^5.10.6", + "@types/react-transition-group": "^4.4.5", + "clsx": "^1.2.1", + "csstype": "^3.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1", + "react-is": "^18.2.0", "react-transition-group": "^4.4.5" }, "engines": { @@ -1544,7 +1614,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -1565,6 +1635,15 @@ } } }, + "node_modules/@mui/material/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/private-theming": { "version": "5.16.6", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", @@ -1707,6 +1786,7 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -7374,28 +7454,65 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "@mui/base": { + "version": "5.0.0-alpha.100", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.100.tgz", + "integrity": "sha512-bSoJEKCENtmJrJDECHUe9PiqztIUACuSskyqw9ypqE7Dz3WxL3e8puFsWBkUsz+WOCjXh4B4Xljn88Ucxxv5HA==", + "requires": { + "@babel/runtime": "^7.19.0", + "@emotion/is-prop-valid": "^1.2.0", + "@mui/types": "^7.2.0", + "@mui/utils": "^5.10.6", + "@popperjs/core": "^2.11.6", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + } + } + }, "@mui/core-downloads-tracker": { "version": "5.16.6", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.6.tgz", "integrity": "sha512-kytg6LheUG42V8H/o/Ptz3olSO5kUXW9zF0ox18VnblX6bO2yif1FPItgc3ey1t5ansb1+gbe7SatntqusQupg==" }, - "@mui/material": { + "@mui/icons-material": { "version": "5.16.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.6.tgz", - "integrity": "sha512-0LUIKBOIjiFfzzFNxXZBRAyr9UQfmTAFzbt6ziOU2FDXhorNN2o3N9/32mNJbCA8zJo2FqFU6d3dtoqUDyIEfA==", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.6.tgz", + "integrity": "sha512-ceNGjoXheH9wbIFa1JHmSc9QVjJUvh18KvHrR4/FkJCSi9HXJ+9ee1kUhCOEFfuxNF8UB6WWVrIUOUgRd70t0A==", "requires": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.6", - "@mui/system": "^5.16.6", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", - "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "@babel/runtime": "^7.23.9" + } + }, + "@mui/material": { + "version": "5.10.8", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.8.tgz", + "integrity": "sha512-sF/Ka0IJjGXV52zoT4xAWEqXVRjNYbIjATo9L4Q5oQC5iJpGrKJFY16uNtWWB0+vp/nayAuPGZHrxtV+t3ecdQ==", + "requires": { + "@babel/runtime": "^7.19.0", + "@mui/base": "5.0.0-alpha.100", + "@mui/core-downloads-tracker": "^5.10.8", + "@mui/system": "^5.10.8", + "@mui/types": "^7.2.0", + "@mui/utils": "^5.10.6", + "@types/react-transition-group": "^4.4.5", + "clsx": "^1.2.1", + "csstype": "^3.1.1", "prop-types": "^15.8.1", - "react-is": "^18.3.1", + "react-is": "^18.2.0", "react-transition-group": "^4.4.5" + }, + "dependencies": { + "clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + } } }, "@mui/private-theming": { diff --git a/ui/package.json b/ui/package.json index 506c856..9af4216 100644 --- a/ui/package.json +++ b/ui/package.json @@ -8,7 +8,8 @@ "@docker/extension-api-client": "0.3.4", "@emotion/react": "11.13.0", "@emotion/styled": "11.13.0", - "@mui/material": "5.16.6", + "@mui/icons-material": "^5.16.6", + "@mui/material": "5.10.8", "react": "^18.2.0", "react-dom": "^18.2.0" },