diff --git a/cmd/portal/Dockerfile b/cmd/portal/Dockerfile index 7c80f4dbaf..4a9720ee14 100644 --- a/cmd/portal/Dockerfile +++ b/cmd/portal/Dockerfile @@ -41,6 +41,8 @@ ARG GIT_HASH # If the working directory is /src, Parcel will have some problem with it. WORKDIR /usr/src/app COPY ./portal/package.json ./portal/package-lock.json ./ +# Copy the scripts +COPY ./portal/scripts/. ./scripts/. # Copy the vite plugin COPY ./portal/packages/. ./packages/. RUN npm ci diff --git a/custombuild/cmd/portalx/Dockerfile b/custombuild/cmd/portalx/Dockerfile index d822bbef2c..8cec0492a4 100644 --- a/custombuild/cmd/portalx/Dockerfile +++ b/custombuild/cmd/portalx/Dockerfile @@ -59,6 +59,8 @@ ARG GIT_HASH # If the working directory is /src, Parcel will have some problem with it. WORKDIR /usr/src/app COPY ./portal/package.json ./portal/package-lock.json ./ +# Copy the scripts +COPY ./portal/scripts/. ./scripts/. # Copy the vite plugin COPY ./portal/packages/. ./packages/. RUN npm ci diff --git a/portal/package-lock.json b/portal/package-lock.json index e2a1341738..967c1edb99 100644 --- a/portal/package-lock.json +++ b/portal/package-lock.json @@ -5,6 +5,7 @@ "packages": { "": { "name": "authgear-portal", + "hasInstallScript": true, "workspaces": [ "packages/*" ], @@ -12,10 +13,11 @@ "@apollo/client": "3.8.7", "@authgear/web": "1.0.1", "@elgorditosalsero/react-gtm-hook": "2.7.2", - "@fluentui/merge-styles": "8.5.13", - "@fluentui/react": "8.112.8", - "@fluentui/react-hooks": "8.6.33", - "@fluentui/react-icons": "^2.0.239", + "@fluentui/font-icons-mdl2": "^8.5.55", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react": "^8.121.13", + "@fluentui/react-hooks": "^8.8.16", + "@fluentui/react-icons": "^2.0.266", "@fortawesome/fontawesome-free": "5.15.4", "@monaco-editor/react": "4.6.0", "@oursky/react-messageformat": "2.0.2", @@ -2869,43 +2871,43 @@ } }, "node_modules/@fluentui/date-time-utilities": { - "version": "8.5.14", - "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.5.14.tgz", - "integrity": "sha512-Kc64ZBj0WiaSW/Bsh4fMy9oM2FIk1TgIqBV6+OgOtdKx9cXwLdmgGk8zuQTcuRnwv5WCk2M6wvW1M+eK3sNRGA==", + "version": "8.6.9", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.6.9.tgz", + "integrity": "sha512-dgOlVm4nXBWDLqijmvn4iAtyv1hVpQZjN6p0So74BW+7ASUTkQGe3lf8PHV/OjBiXfZa4qwONvmTQBGCheNU0w==", "dependencies": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "node_modules/@fluentui/dom-utilities": { - "version": "2.2.12", - "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.2.12.tgz", - "integrity": "sha512-safCKQPJTnshYG13/U2Zx1KWhOhU4vl5RAKqW7HEBfLOHds/fAR+EzTvKgO6OgxJq59JAKJvpH2QujkLXZZQ3A==", + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.9.tgz", + "integrity": "sha512-8PPzv31VXnyMvZrzK7iSGPRx8piJjas0xV+qaNQ1tzAXHuTaLXPeADJK/gEDH1XA/e9Vaakb3lPUpRVa8tal+w==", "dependencies": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "node_modules/@fluentui/font-icons-mdl2": { - "version": "8.5.27", - "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.27.tgz", - "integrity": "sha512-u6J9SmdWsr3WjC7zog930IWWySA+mxLfIqfyux9oATJQPUs+76juYYbolDTJTvndVEmb+piA7qBhEubUoaXJjQ==", + "version": "8.5.55", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.55.tgz", + "integrity": "sha512-nboUBzP8q05C2NstMgEBSGBVHlgjwIjtttX7RQzsmXRr6C5w/DstImp7Gg/L1GnJUNXhy0pcGuV4V+kyR+f8xA==", "dependencies": { - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "node_modules/@fluentui/foundation-legacy": { - "version": "8.2.47", - "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.2.47.tgz", - "integrity": "sha512-El/8/makZh2fqd2YdLSTy3T2oJ3N6WCsPzkud9CdMF98Oby0jny4EAtzjBNRbAwL4/gppOYIIchVuzRL4V2rcw==", - "dependencies": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.4.21.tgz", + "integrity": "sha512-8lqf61wGi7EHtH3o/UaFSsFO7CnhIz316TMoGtLgBwkmLXzKAC+vS+jCf6+nU+bHKF7/d1Z+B54ZE/dH0Rtsrw==", + "dependencies": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, "peerDependencies": { @@ -2914,39 +2916,39 @@ } }, "node_modules/@fluentui/keyboard-key": { - "version": "0.4.12", - "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.12.tgz", - "integrity": "sha512-9nPglM58ThbOEQ88KijdYl64hiTAQQ0o60HRc0vboibmr41mJ322FoBz5Q5S5QLIEbBZajrAkrDMs3PKW4CCSw==", + "version": "0.4.23", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.23.tgz", + "integrity": "sha512-9GXeyUqNJUdg5JiQUZeGPiKnRzMRi9YEUn1l9zq6X/imYdMhxHrxpVZS12129cBfgvPyxt9ceJpywSfmLWqlKA==", "dependencies": { "tslib": "^2.1.0" } }, "node_modules/@fluentui/merge-styles": { - "version": "8.5.13", - "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.5.13.tgz", - "integrity": "sha512-ocgwNlQcQwn5mNlZKFazrFVbYDEQ6BptoW4GyEv6U5TEHE8HKKYuPRf340NXCRGiacSpz3vLkyDjp+L431qUXg==", + "version": "8.6.13", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.13.tgz", + "integrity": "sha512-IWgvi2CC+mcQ7/YlCvRjsmHL2+PUz7q+Pa2Rqk3a+QHN0V1uBvgIbKk5y/Y/awwDXy1yJHiqMCcDHjBNmS1d4A==", "dependencies": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "node_modules/@fluentui/react": { - "version": "8.112.8", - "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.112.8.tgz", - "integrity": "sha512-dKbt1t++aKJ9PmZrui1+RYGTXeTBQOxuloxpa+cVaMCcUwlxrAyp4S+xsLD0Pe1vyv37DkTbnTDl59+KKIe+CA==", - "dependencies": { - "@fluentui/date-time-utilities": "^8.5.14", - "@fluentui/font-icons-mdl2": "^8.5.27", - "@fluentui/foundation-legacy": "^8.2.47", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/react-focus": "^8.8.34", - "@fluentui/react-hooks": "^8.6.33", - "@fluentui/react-portal-compat-context": "^9.0.9", - "@fluentui/react-window-provider": "^2.2.16", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/theme": "^2.6.38", - "@fluentui/utilities": "^8.13.21", + "version": "8.121.13", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.121.13.tgz", + "integrity": "sha512-jneTBmuRy0s5rjRdhTJKeWJuUoOxH45M06weIKcfbFGEsyBWadjdBvJahJNHE3rUbnNZzg5e5WPb4YwMNACvvQ==", + "dependencies": { + "@fluentui/date-time-utilities": "^8.6.9", + "@fluentui/font-icons-mdl2": "^8.5.55", + "@fluentui/foundation-legacy": "^8.4.21", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-focus": "^8.9.18", + "@fluentui/react-hooks": "^8.8.16", + "@fluentui/react-portal-compat-context": "^9.0.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/theme": "^2.6.63", + "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" }, @@ -2958,15 +2960,15 @@ } }, "node_modules/@fluentui/react-focus": { - "version": "8.8.34", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.8.34.tgz", - "integrity": "sha512-GNi8MqQRdoIaYpiz5kWIQaX1mNzFz3X+UShezA3gohrXnkONUvrPBuFDyYgQXoqk67juEZ+oGxl2PpKjz08HCA==", - "dependencies": { - "@fluentui/keyboard-key": "^0.4.12", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "version": "8.9.18", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.9.18.tgz", + "integrity": "sha512-IuRE7XmbLkdPvJH5O9kKy2vzdNb8MRLzwkJpPhDCtDWFJSeZmGaCb8IDhaEmiK1dGFkser6AxWttKL/Qt14CxA==", + "dependencies": { + "@fluentui/keyboard-key": "^0.4.23", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, "peerDependencies": { @@ -2975,13 +2977,13 @@ } }, "node_modules/@fluentui/react-hooks": { - "version": "8.6.33", - "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.33.tgz", - "integrity": "sha512-3P9RA34QhhjFwHwCvfOqMDgCwvks4hgMsEGvQVTdrcya4uskxBx4FqCLzoMxkXcAJjJCiTJmPx/mZQqQpgoyoA==", + "version": "8.8.16", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.16.tgz", + "integrity": "sha512-PQ1BeOp+99mdO0g7j6QLtChfXG1LxXeHG0q5CtUeD1OUGR+vUDK84h60sw7e7qU9sSmvPmHO7jn69Lg3CS+DXw==", "dependencies": { - "@fluentui/react-window-provider": "^2.2.16", - "@fluentui/set-version": "^8.2.12", - "@fluentui/utilities": "^8.13.21", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, "peerDependencies": { @@ -2990,9 +2992,9 @@ } }, "node_modules/@fluentui/react-icons": { - "version": "2.0.239", - "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.239.tgz", - "integrity": "sha512-F2itXSvcJuHcacPGpp0M4wpH1/hldg3eVv4t4L3aOcKIjp7nECSWHwxgsy2HShB7kVV8LwwqiJAChiogMbnlLg==", + "version": "2.0.266", + "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.266.tgz", + "integrity": "sha512-r979n3hfnK4IfT24BYURIlYRL84pnAT0sP2vIo2Sl36NiIBLXmNjqF+vJCzcNmi6eOHvDnupwLw20cF1Iwop5w==", "dependencies": { "@griffel/react": "^1.0.0", "tslib": "^2.1.0" @@ -3002,9 +3004,9 @@ } }, "node_modules/@fluentui/react-portal-compat-context": { - "version": "9.0.10", - "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.10.tgz", - "integrity": "sha512-l38C+tGb76yyFQ9sxUrY8DDyp2hoYru3pISFivPitFgkP6nqlnZPNd8yPE48RuVWjMhTKQ/1uCdE6ymBH9wBZQ==", + "version": "9.0.13", + "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.13.tgz", + "integrity": "sha512-N+c6Qs775jnr/4WIzsQuNaRu4v16fa+gGsOCzzU1bqxX0IR9BSjjO2oLGC6luaAOqlQP+JIwn/aumOIJICKXkA==", "dependencies": { "@swc/helpers": "^0.5.1" }, @@ -3014,11 +3016,11 @@ } }, "node_modules/@fluentui/react-window-provider": { - "version": "2.2.16", - "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.16.tgz", - "integrity": "sha512-4gkUMSAUjo3cgCGt+0VvTbMy9qbF6zo/cmmfYtfqbSFtXz16lKixSCMIf66gXdKjovqRGVFC/XibqfrXM2QLuw==", + "version": "2.2.28", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz", + "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==", "dependencies": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, "peerDependencies": { @@ -3027,34 +3029,34 @@ } }, "node_modules/@fluentui/set-version": { - "version": "8.2.12", - "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.12.tgz", - "integrity": "sha512-I4uXIg9xkL2Heotf1+7CyGcHQskdtMSH0B5mSV0TL3w7WI2qpnzrpKuP2Kq6DHZN6Xrsg4ORFNJSjLxq/s9cUQ==", + "version": "8.2.23", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.23.tgz", + "integrity": "sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==", "dependencies": { "tslib": "^2.1.0" } }, "node_modules/@fluentui/style-utilities": { - "version": "8.9.20", - "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.9.20.tgz", - "integrity": "sha512-oj0ghn21DnqCardlcEp+zob3IEAfA/Z7ZjzuYqlHuPUItwRqGmpr1wErssRC4R1kHsH6gq9ALxVgMa4/FvdzGg==", - "dependencies": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/theme": "^2.6.38", - "@fluentui/utilities": "^8.13.21", + "version": "8.11.4", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.11.4.tgz", + "integrity": "sha512-qJGlwX1FiDemPwCuzqYkmjfDNi0JQMum47FNB5dEtGz65/C2MSqLsZChcSpYwQEGCgY+L0qI1EwgbquTFxJqSw==", + "dependencies": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/theme": "^2.6.63", + "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" } }, "node_modules/@fluentui/theme": { - "version": "2.6.38", - "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.38.tgz", - "integrity": "sha512-LObK/mZOQFb3aTcDlKBSLpPV0BOp5BOuNqg0Wps51b1RlisI6oS3STmw3BkcAe6jOi/p4cgLpwHMkYHh2o8PmQ==", + "version": "2.6.63", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.63.tgz", + "integrity": "sha512-BZ+YG4Vqb+ulhmZzDv8yZFuYo2kHp1m2cttBZLkc+61FnrwCaDBmJxwg65gXoF7wwXKh2qJIcJueSLMmvVyAOQ==", "dependencies": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/utilities": "^8.13.21", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" }, "peerDependencies": { @@ -3063,13 +3065,14 @@ } }, "node_modules/@fluentui/utilities": { - "version": "8.13.21", - "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.13.21.tgz", - "integrity": "sha512-YPWsRAL1jgbPxf+wAY8p6LjIG4em0NReqgU8ZCFnQx9wpQbe/ZRjQcaU06pD1tYtRGvyCutwhnWDaQHDw843Xg==", - "dependencies": { - "@fluentui/dom-utilities": "^2.2.12", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", + "version": "8.15.19", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.15.19.tgz", + "integrity": "sha512-20WoYz0wW7pkmur+7qxTwRfvkdAnHfylLdCYSm91WLupb0cwQ1wWZWIuyo+e0cjcvem1T9TC1+NjWs0kavTWBg==", + "dependencies": { + "@fluentui/dom-utilities": "^2.3.9", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" }, "peerDependencies": { @@ -6060,13 +6063,18 @@ } }, "node_modules/@swc/helpers": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz", - "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==", + "version": "0.5.15", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", + "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==", "dependencies": { - "tslib": "^2.4.0" + "tslib": "^2.8.0" } }, + "node_modules/@swc/helpers/node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + }, "node_modules/@tabler/icons": { "version": "1.107.0", "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-1.107.0.tgz", @@ -18884,174 +18892,175 @@ } }, "@fluentui/date-time-utilities": { - "version": "8.5.14", - "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.5.14.tgz", - "integrity": "sha512-Kc64ZBj0WiaSW/Bsh4fMy9oM2FIk1TgIqBV6+OgOtdKx9cXwLdmgGk8zuQTcuRnwv5WCk2M6wvW1M+eK3sNRGA==", + "version": "8.6.9", + "resolved": "https://registry.npmjs.org/@fluentui/date-time-utilities/-/date-time-utilities-8.6.9.tgz", + "integrity": "sha512-dgOlVm4nXBWDLqijmvn4iAtyv1hVpQZjN6p0So74BW+7ASUTkQGe3lf8PHV/OjBiXfZa4qwONvmTQBGCheNU0w==", "requires": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "@fluentui/dom-utilities": { - "version": "2.2.12", - "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.2.12.tgz", - "integrity": "sha512-safCKQPJTnshYG13/U2Zx1KWhOhU4vl5RAKqW7HEBfLOHds/fAR+EzTvKgO6OgxJq59JAKJvpH2QujkLXZZQ3A==", + "version": "2.3.9", + "resolved": "https://registry.npmjs.org/@fluentui/dom-utilities/-/dom-utilities-2.3.9.tgz", + "integrity": "sha512-8PPzv31VXnyMvZrzK7iSGPRx8piJjas0xV+qaNQ1tzAXHuTaLXPeADJK/gEDH1XA/e9Vaakb3lPUpRVa8tal+w==", "requires": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "@fluentui/font-icons-mdl2": { - "version": "8.5.27", - "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.27.tgz", - "integrity": "sha512-u6J9SmdWsr3WjC7zog930IWWySA+mxLfIqfyux9oATJQPUs+76juYYbolDTJTvndVEmb+piA7qBhEubUoaXJjQ==", + "version": "8.5.55", + "resolved": "https://registry.npmjs.org/@fluentui/font-icons-mdl2/-/font-icons-mdl2-8.5.55.tgz", + "integrity": "sha512-nboUBzP8q05C2NstMgEBSGBVHlgjwIjtttX7RQzsmXRr6C5w/DstImp7Gg/L1GnJUNXhy0pcGuV4V+kyR+f8xA==", "requires": { - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "@fluentui/foundation-legacy": { - "version": "8.2.47", - "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.2.47.tgz", - "integrity": "sha512-El/8/makZh2fqd2YdLSTy3T2oJ3N6WCsPzkud9CdMF98Oby0jny4EAtzjBNRbAwL4/gppOYIIchVuzRL4V2rcw==", - "requires": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/@fluentui/foundation-legacy/-/foundation-legacy-8.4.21.tgz", + "integrity": "sha512-8lqf61wGi7EHtH3o/UaFSsFO7CnhIz316TMoGtLgBwkmLXzKAC+vS+jCf6+nU+bHKF7/d1Z+B54ZE/dH0Rtsrw==", + "requires": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "@fluentui/keyboard-key": { - "version": "0.4.12", - "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.12.tgz", - "integrity": "sha512-9nPglM58ThbOEQ88KijdYl64hiTAQQ0o60HRc0vboibmr41mJ322FoBz5Q5S5QLIEbBZajrAkrDMs3PKW4CCSw==", + "version": "0.4.23", + "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.4.23.tgz", + "integrity": "sha512-9GXeyUqNJUdg5JiQUZeGPiKnRzMRi9YEUn1l9zq6X/imYdMhxHrxpVZS12129cBfgvPyxt9ceJpywSfmLWqlKA==", "requires": { "tslib": "^2.1.0" } }, "@fluentui/merge-styles": { - "version": "8.5.13", - "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.5.13.tgz", - "integrity": "sha512-ocgwNlQcQwn5mNlZKFazrFVbYDEQ6BptoW4GyEv6U5TEHE8HKKYuPRf340NXCRGiacSpz3vLkyDjp+L431qUXg==", + "version": "8.6.13", + "resolved": "https://registry.npmjs.org/@fluentui/merge-styles/-/merge-styles-8.6.13.tgz", + "integrity": "sha512-IWgvi2CC+mcQ7/YlCvRjsmHL2+PUz7q+Pa2Rqk3a+QHN0V1uBvgIbKk5y/Y/awwDXy1yJHiqMCcDHjBNmS1d4A==", "requires": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "@fluentui/react": { - "version": "8.112.8", - "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.112.8.tgz", - "integrity": "sha512-dKbt1t++aKJ9PmZrui1+RYGTXeTBQOxuloxpa+cVaMCcUwlxrAyp4S+xsLD0Pe1vyv37DkTbnTDl59+KKIe+CA==", - "requires": { - "@fluentui/date-time-utilities": "^8.5.14", - "@fluentui/font-icons-mdl2": "^8.5.27", - "@fluentui/foundation-legacy": "^8.2.47", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/react-focus": "^8.8.34", - "@fluentui/react-hooks": "^8.6.33", - "@fluentui/react-portal-compat-context": "^9.0.9", - "@fluentui/react-window-provider": "^2.2.16", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/theme": "^2.6.38", - "@fluentui/utilities": "^8.13.21", + "version": "8.121.13", + "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-8.121.13.tgz", + "integrity": "sha512-jneTBmuRy0s5rjRdhTJKeWJuUoOxH45M06weIKcfbFGEsyBWadjdBvJahJNHE3rUbnNZzg5e5WPb4YwMNACvvQ==", + "requires": { + "@fluentui/date-time-utilities": "^8.6.9", + "@fluentui/font-icons-mdl2": "^8.5.55", + "@fluentui/foundation-legacy": "^8.4.21", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-focus": "^8.9.18", + "@fluentui/react-hooks": "^8.8.16", + "@fluentui/react-portal-compat-context": "^9.0.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/theme": "^2.6.63", + "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" } }, "@fluentui/react-focus": { - "version": "8.8.34", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.8.34.tgz", - "integrity": "sha512-GNi8MqQRdoIaYpiz5kWIQaX1mNzFz3X+UShezA3gohrXnkONUvrPBuFDyYgQXoqk67juEZ+oGxl2PpKjz08HCA==", - "requires": { - "@fluentui/keyboard-key": "^0.4.12", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/style-utilities": "^8.9.20", - "@fluentui/utilities": "^8.13.21", + "version": "8.9.18", + "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-8.9.18.tgz", + "integrity": "sha512-IuRE7XmbLkdPvJH5O9kKy2vzdNb8MRLzwkJpPhDCtDWFJSeZmGaCb8IDhaEmiK1dGFkser6AxWttKL/Qt14CxA==", + "requires": { + "@fluentui/keyboard-key": "^0.4.23", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/style-utilities": "^8.11.4", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "@fluentui/react-hooks": { - "version": "8.6.33", - "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.6.33.tgz", - "integrity": "sha512-3P9RA34QhhjFwHwCvfOqMDgCwvks4hgMsEGvQVTdrcya4uskxBx4FqCLzoMxkXcAJjJCiTJmPx/mZQqQpgoyoA==", + "version": "8.8.16", + "resolved": "https://registry.npmjs.org/@fluentui/react-hooks/-/react-hooks-8.8.16.tgz", + "integrity": "sha512-PQ1BeOp+99mdO0g7j6QLtChfXG1LxXeHG0q5CtUeD1OUGR+vUDK84h60sw7e7qU9sSmvPmHO7jn69Lg3CS+DXw==", "requires": { - "@fluentui/react-window-provider": "^2.2.16", - "@fluentui/set-version": "^8.2.12", - "@fluentui/utilities": "^8.13.21", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "@fluentui/react-icons": { - "version": "2.0.239", - "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.239.tgz", - "integrity": "sha512-F2itXSvcJuHcacPGpp0M4wpH1/hldg3eVv4t4L3aOcKIjp7nECSWHwxgsy2HShB7kVV8LwwqiJAChiogMbnlLg==", + "version": "2.0.266", + "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.266.tgz", + "integrity": "sha512-r979n3hfnK4IfT24BYURIlYRL84pnAT0sP2vIo2Sl36NiIBLXmNjqF+vJCzcNmi6eOHvDnupwLw20cF1Iwop5w==", "requires": { "@griffel/react": "^1.0.0", "tslib": "^2.1.0" } }, "@fluentui/react-portal-compat-context": { - "version": "9.0.10", - "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.10.tgz", - "integrity": "sha512-l38C+tGb76yyFQ9sxUrY8DDyp2hoYru3pISFivPitFgkP6nqlnZPNd8yPE48RuVWjMhTKQ/1uCdE6ymBH9wBZQ==", + "version": "9.0.13", + "resolved": "https://registry.npmjs.org/@fluentui/react-portal-compat-context/-/react-portal-compat-context-9.0.13.tgz", + "integrity": "sha512-N+c6Qs775jnr/4WIzsQuNaRu4v16fa+gGsOCzzU1bqxX0IR9BSjjO2oLGC6luaAOqlQP+JIwn/aumOIJICKXkA==", "requires": { "@swc/helpers": "^0.5.1" } }, "@fluentui/react-window-provider": { - "version": "2.2.16", - "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.16.tgz", - "integrity": "sha512-4gkUMSAUjo3cgCGt+0VvTbMy9qbF6zo/cmmfYtfqbSFtXz16lKixSCMIf66gXdKjovqRGVFC/XibqfrXM2QLuw==", + "version": "2.2.28", + "resolved": "https://registry.npmjs.org/@fluentui/react-window-provider/-/react-window-provider-2.2.28.tgz", + "integrity": "sha512-YdZ74HTaoDwlvLDzoBST80/17ExIl93tLJpTxnqK5jlJOAUVQ+mxLPF2HQEJq+SZr5IMXHsQ56w/KaZVRn72YA==", "requires": { - "@fluentui/set-version": "^8.2.12", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, "@fluentui/set-version": { - "version": "8.2.12", - "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.12.tgz", - "integrity": "sha512-I4uXIg9xkL2Heotf1+7CyGcHQskdtMSH0B5mSV0TL3w7WI2qpnzrpKuP2Kq6DHZN6Xrsg4ORFNJSjLxq/s9cUQ==", + "version": "8.2.23", + "resolved": "https://registry.npmjs.org/@fluentui/set-version/-/set-version-8.2.23.tgz", + "integrity": "sha512-VPXaBsiaa3Xn/AY40nLU9bvDQ62lpMVnFzFTlQ8CbpdwrjxNlRxDUY5vRToNzp1+Zu5gD/+CgsXqIZGcry5L5w==", "requires": { "tslib": "^2.1.0" } }, "@fluentui/style-utilities": { - "version": "8.9.20", - "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.9.20.tgz", - "integrity": "sha512-oj0ghn21DnqCardlcEp+zob3IEAfA/Z7ZjzuYqlHuPUItwRqGmpr1wErssRC4R1kHsH6gq9ALxVgMa4/FvdzGg==", - "requires": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/theme": "^2.6.38", - "@fluentui/utilities": "^8.13.21", + "version": "8.11.4", + "resolved": "https://registry.npmjs.org/@fluentui/style-utilities/-/style-utilities-8.11.4.tgz", + "integrity": "sha512-qJGlwX1FiDemPwCuzqYkmjfDNi0JQMum47FNB5dEtGz65/C2MSqLsZChcSpYwQEGCgY+L0qI1EwgbquTFxJqSw==", + "requires": { + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/theme": "^2.6.63", + "@fluentui/utilities": "^8.15.19", "@microsoft/load-themed-styles": "^1.10.26", "tslib": "^2.1.0" } }, "@fluentui/theme": { - "version": "2.6.38", - "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.38.tgz", - "integrity": "sha512-LObK/mZOQFb3aTcDlKBSLpPV0BOp5BOuNqg0Wps51b1RlisI6oS3STmw3BkcAe6jOi/p4cgLpwHMkYHh2o8PmQ==", + "version": "2.6.63", + "resolved": "https://registry.npmjs.org/@fluentui/theme/-/theme-2.6.63.tgz", + "integrity": "sha512-BZ+YG4Vqb+ulhmZzDv8yZFuYo2kHp1m2cttBZLkc+61FnrwCaDBmJxwg65gXoF7wwXKh2qJIcJueSLMmvVyAOQ==", "requires": { - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", - "@fluentui/utilities": "^8.13.21", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/set-version": "^8.2.23", + "@fluentui/utilities": "^8.15.19", "tslib": "^2.1.0" } }, "@fluentui/utilities": { - "version": "8.13.21", - "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.13.21.tgz", - "integrity": "sha512-YPWsRAL1jgbPxf+wAY8p6LjIG4em0NReqgU8ZCFnQx9wpQbe/ZRjQcaU06pD1tYtRGvyCutwhnWDaQHDw843Xg==", - "requires": { - "@fluentui/dom-utilities": "^2.2.12", - "@fluentui/merge-styles": "^8.5.13", - "@fluentui/set-version": "^8.2.12", + "version": "8.15.19", + "resolved": "https://registry.npmjs.org/@fluentui/utilities/-/utilities-8.15.19.tgz", + "integrity": "sha512-20WoYz0wW7pkmur+7qxTwRfvkdAnHfylLdCYSm91WLupb0cwQ1wWZWIuyo+e0cjcvem1T9TC1+NjWs0kavTWBg==", + "requires": { + "@fluentui/dom-utilities": "^2.3.9", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react-window-provider": "^2.2.28", + "@fluentui/set-version": "^8.2.23", "tslib": "^2.1.0" } }, @@ -21350,11 +21359,18 @@ } }, "@swc/helpers": { - "version": "0.5.3", - "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.3.tgz", - "integrity": "sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==", + "version": "0.5.15", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz", + "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==", "requires": { - "tslib": "^2.4.0" + "tslib": "^2.8.0" + }, + "dependencies": { + "tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==" + } } }, "@tabler/icons": { diff --git a/portal/package.json b/portal/package.json index acad7d7f01..bf53d3871b 100644 --- a/portal/package.json +++ b/portal/package.json @@ -6,6 +6,7 @@ ], "type": "module", "scripts": { + "postinstall": "./scripts/npm-postinstall.sh", "test": "jest", "start": "vite", "build": "vite build", @@ -60,10 +61,11 @@ "@apollo/client": "3.8.7", "@authgear/web": "1.0.1", "@elgorditosalsero/react-gtm-hook": "2.7.2", - "@fluentui/merge-styles": "8.5.13", - "@fluentui/react": "8.112.8", - "@fluentui/react-hooks": "8.6.33", - "@fluentui/react-icons": "^2.0.239", + "@fluentui/font-icons-mdl2": "^8.5.55", + "@fluentui/merge-styles": "^8.6.13", + "@fluentui/react": "^8.121.13", + "@fluentui/react-hooks": "^8.8.16", + "@fluentui/react-icons": "^2.0.266", "@fortawesome/fontawesome-free": "5.15.4", "@monaco-editor/react": "4.6.0", "@oursky/react-messageformat": "2.0.2", diff --git a/portal/scripts/npm-postinstall.sh b/portal/scripts/npm-postinstall.sh new file mode 100755 index 0000000000..b608b2d403 --- /dev/null +++ b/portal/scripts/npm-postinstall.sh @@ -0,0 +1,45 @@ +#!/bin/sh + +set -x + +# This is how we self-host the runtime assets of FluentUI. +# +# We utilize the public directory feature of Vite. +# See https://v2.vitejs.dev/guide/assets.html#the-public-directory +# This feature merely copies the files in the public directory to the root of the outDir. +# Since we use FileServer to serve asset, assets have to be put in the asset directory. +# We automate this copy process with a NPM postinstall script. (This script) +# +# Finally we tell fluentui to load the assets from the portal backend, instead of from the default CDN. +# This is done with window.FabricConfig. + +# In docker build, the postinstall runs before the src are copied. +# So we run mkdir -p to ensure the directory exist. +mkdir -p ./src/public/shared-assets/ +# In case you wonder why we do not just use shell expansion here, +# if ./src/public/shared-assets is really empty, sh DOES NOT expand, and take '*' literally. +# Since we do not have such a file, the command will fail. +find ./src/public/shared-assets -name 'fabric-icons-*.woff' -print -exec rm '{}' \; +# When window.FabricConfig.iconBaseUrl is set, it loads the font directly in the directory. +# So we just copy the fonts to outDir. +cp -r ./node_modules/@fluentui/font-icons-mdl2/fonts/. ./src/public/shared-assets/. + +# When window.FabricConfig.fontBaseUrl is set, it loads the font with a certain structure. +# The original URL is https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 +# When fontBaseUrl is set, the URL looks like https://origin/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 + +# FluentUI actually has support for many fonts. +# For the full list of the fonts it may load at runtime, see ./node_modules/@fluentui/react/dist/css/fabric.css +# Since our site is lang=en, it will ever load "Segoe UI Web (West European)" +# So we just download and copy them. +# Since this process has to be done once only, the following commands are commented out. +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff2 +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-light.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semilight.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-regular.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-semibold.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 +# wget https://static2.sharepointonline.com/files/fabric/assets/fonts/segoeui-westeuropean/segoeui-bold.woff -O ./src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff diff --git a/portal/src/ChoiceButton.tsx b/portal/src/ChoiceButton.tsx index 85be853948..ec75c8f928 100644 --- a/portal/src/ChoiceButton.tsx +++ b/portal/src/ChoiceButton.tsx @@ -1,12 +1,6 @@ -import React, { - useCallback, - ReactNode, - ReactElement, - ComponentType, -} from "react"; +import React, { useCallback, ReactElement, ComponentType } from "react"; import { CompoundButton, - IButtonStyles, IButtonProps, useTheme, IRenderFunction, @@ -18,12 +12,12 @@ export interface IconComponentProps { } export interface ChoiceButtonProps { - className?: string; - styles?: IButtonStyles; + className?: IButtonProps["className"]; + styles?: IButtonProps["styles"]; checked?: IButtonProps["checked"]; disabled?: IButtonProps["disabled"]; - text?: ReactNode; - secondaryText?: ReactNode; + text?: IButtonProps["text"]; + secondaryText?: IButtonProps["secondaryText"]; onClick?: IButtonProps["onClick"]; IconComponent?: ComponentType; } @@ -87,7 +81,6 @@ export default function ChoiceButton(props: ChoiceButtonProps): ReactElement { diff --git a/portal/src/TextFieldWithCopyButton.tsx b/portal/src/TextFieldWithCopyButton.tsx index b02fe6edd7..9d79b29ab4 100644 --- a/portal/src/TextFieldWithCopyButton.tsx +++ b/portal/src/TextFieldWithCopyButton.tsx @@ -14,7 +14,6 @@ const TextFieldWithCopyButton: React.VFC = function TextFieldWithCopyButton(props: TextFieldWithCopyButtonProps) { const { disabled, additionalIconButtons, ...rest } = props; const { themes } = useSystemConfig(); - // eslint-disable-next-line no-useless-assignment const { copyButtonProps, Feedback } = useCopyFeedback({ textToCopy: props.value ?? "", }); diff --git a/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx b/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx index f81348815c..9be3e1410b 100644 --- a/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx +++ b/portal/src/graphql/portal/LoginMethodConfigurationScreen.tsx @@ -1600,6 +1600,8 @@ function AuthenticationButton(props: AuthenticationButtonProps) { const checked = targetValue === currentValue; const iconName = AUTHENTICATION_BUTTON_ICON[targetValue]; + const { renderToString } = useContext(Context); + const IconComponent = useCallback( (props) => { return ( @@ -1641,16 +1643,12 @@ function AuthenticationButton(props: AuthenticationButtonProps) { styles={buttonStyles} disabled={disabled} checked={checked} - text={ - - } - secondaryText={ - - } + text={renderToString( + `LoginMethodConfigurationScreen.second-level.${targetValue}.title` + )} + secondaryText={renderToString( + `LoginMethodConfigurationScreen.second-level.${targetValue}.description` + )} IconComponent={IconComponent} onClick={onClick} /> diff --git a/portal/src/index.html b/portal/src/index.html index b2f87d5cd8..fbea49f8ae 100644 --- a/portal/src/index.html +++ b/portal/src/index.html @@ -16,6 +16,14 @@ display: none; } + diff --git a/portal/src/index.tsx b/portal/src/index.tsx index 2286bde622..9f814a8983 100644 --- a/portal/src/index.tsx +++ b/portal/src/index.tsx @@ -8,6 +8,23 @@ import "@fortawesome/fontawesome-free/css/all.min.css"; import React from "react"; import { render } from "react-dom"; import { initializeIcons, registerIcons } from "@fluentui/react"; + +// See below for details. +// Monaco editor initialization imports - Start +import { loader } from "@monaco-editor/react"; +import * as monaco from "monaco-editor"; +// @ts-expect-error +import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"; +// @ts-expect-error +import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"; +// @ts-expect-error +import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"; +// @ts-expect-error +import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"; +// @ts-expect-error +import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"; +// Monaco editor initialization imports - End + import { Chart as ChartJS, CategoryScale, @@ -62,4 +79,41 @@ ChartJS.register( // and AnalyticsSignupMethodsWidget ChartJS.register(ArcElement, Tooltip); -render(, document.getElementById("react-app-root")); +// See https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite +// See https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#use-monaco-editor-as-an-npm-package +// +// By using this approach, it is now our own responsibility to keep monaco-editor and @monaco-editor/react compatible. +// @monaco-editor/react uses @monaco-editor/loader, and @monaco-editor/loader uses a specific version of monaco-editor. +// So when you need to update them, you do +// 1. Pick a version of @monaco-editor/react. +// 2. Inspect @monaco-editor/loader in package-lock.json to see the actual version of @monaco-editor/loader +// 3. Inspect https://github.com/suren-atoyan/monaco-loader/blob/master/src/config/index.js to see what version of monaco-editor it is using. +// 4. Install the same version of monaco-editor. +// +// Note that monaco-editor has some breaking changes in 0.45.0 +// See https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md#0450 +// So the highest version we can use is 0.44.0, until @monaco-editor/react supports >= 0.45.0 +window.MonacoEnvironment = { + getWorker(_, label) { + switch (label) { + case "json": + return new jsonWorker(); + case "css": + case "scss": + case "less": + return new cssWorker(); + case "html": + case "handlebars": + case "razor": + return new htmlWorker(); + case "javascript": + case "typescript": + return new tsWorker(); + } + return new editorWorker(); + }, +}; +loader.config({ monaco }); +loader.init().then(() => { + render(, document.getElementById("react-app-root")); +}); diff --git a/portal/src/public/shared-assets/fabric-icons-0-467ee27f.woff b/portal/src/public/shared-assets/fabric-icons-0-467ee27f.woff new file mode 100644 index 0000000000..35f9ea5af4 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-0-467ee27f.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-1-4d521695.woff b/portal/src/public/shared-assets/fabric-icons-1-4d521695.woff new file mode 100644 index 0000000000..7cc5ae0c64 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-1-4d521695.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-10-c4ded8e4.woff b/portal/src/public/shared-assets/fabric-icons-10-c4ded8e4.woff new file mode 100644 index 0000000000..4548c652ac Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-10-c4ded8e4.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-11-2a8393d6.woff b/portal/src/public/shared-assets/fabric-icons-11-2a8393d6.woff new file mode 100644 index 0000000000..9b9525d6b5 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-11-2a8393d6.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-12-7e945a1e.woff b/portal/src/public/shared-assets/fabric-icons-12-7e945a1e.woff new file mode 100644 index 0000000000..2ad03ec0b5 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-12-7e945a1e.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-13-c3989a02.woff b/portal/src/public/shared-assets/fabric-icons-13-c3989a02.woff new file mode 100644 index 0000000000..fdad17acee Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-13-c3989a02.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-14-5cf58db8.woff b/portal/src/public/shared-assets/fabric-icons-14-5cf58db8.woff new file mode 100644 index 0000000000..7b3f4477f6 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-14-5cf58db8.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-15-3807251b.woff b/portal/src/public/shared-assets/fabric-icons-15-3807251b.woff new file mode 100644 index 0000000000..7ddc4865a6 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-15-3807251b.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-16-9cf93f3b.woff b/portal/src/public/shared-assets/fabric-icons-16-9cf93f3b.woff new file mode 100644 index 0000000000..2234b4827b Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-16-9cf93f3b.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-17-0c4ed701.woff b/portal/src/public/shared-assets/fabric-icons-17-0c4ed701.woff new file mode 100644 index 0000000000..dc9e4adda3 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-17-0c4ed701.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-2-63c99abf.woff b/portal/src/public/shared-assets/fabric-icons-2-63c99abf.woff new file mode 100644 index 0000000000..88295a5929 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-2-63c99abf.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-3-089e217a.woff b/portal/src/public/shared-assets/fabric-icons-3-089e217a.woff new file mode 100644 index 0000000000..3b6284725b Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-3-089e217a.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-4-a656cc0a.woff b/portal/src/public/shared-assets/fabric-icons-4-a656cc0a.woff new file mode 100644 index 0000000000..712e2ffe2f Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-4-a656cc0a.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-5-f95ba260.woff b/portal/src/public/shared-assets/fabric-icons-5-f95ba260.woff new file mode 100644 index 0000000000..f403adfe69 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-5-f95ba260.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-6-ef6fd590.woff b/portal/src/public/shared-assets/fabric-icons-6-ef6fd590.woff new file mode 100644 index 0000000000..779aa0d366 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-6-ef6fd590.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-7-2b97bb99.woff b/portal/src/public/shared-assets/fabric-icons-7-2b97bb99.woff new file mode 100644 index 0000000000..ef94e67ba4 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-7-2b97bb99.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-8-6fdf1528.woff b/portal/src/public/shared-assets/fabric-icons-8-6fdf1528.woff new file mode 100644 index 0000000000..7f2968ff63 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-8-6fdf1528.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-9-c6162b42.woff b/portal/src/public/shared-assets/fabric-icons-9-c6162b42.woff new file mode 100644 index 0000000000..a91f02265b Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-9-c6162b42.woff differ diff --git a/portal/src/public/shared-assets/fabric-icons-a13498cf.woff b/portal/src/public/shared-assets/fabric-icons-a13498cf.woff new file mode 100644 index 0000000000..75742389d4 Binary files /dev/null and b/portal/src/public/shared-assets/fabric-icons-a13498cf.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff new file mode 100644 index 0000000000..8de65daaee Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 new file mode 100644 index 0000000000..2b3ad86c07 Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-bold.woff2 differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff new file mode 100644 index 0000000000..1ebe3b5065 Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff2 b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff2 new file mode 100644 index 0000000000..f2bf6af45c Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-light.woff2 differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff new file mode 100644 index 0000000000..4a12c32ffa Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 new file mode 100644 index 0000000000..a084e1b4e7 Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-regular.woff2 differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff new file mode 100644 index 0000000000..15fe5de04d Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 new file mode 100644 index 0000000000..8aaf95207d Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semibold.woff2 differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff new file mode 100644 index 0000000000..e47ce02bca Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff differ diff --git a/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 new file mode 100644 index 0000000000..c4be6d548b Binary files /dev/null and b/portal/src/public/shared-assets/fonts/segoeui-westeuropean/segoeui-semilight.woff2 differ diff --git a/portal/src/util/mergeStyles.ts b/portal/src/util/mergeStyles.ts index c1106d73b0..11fe1b0885 100644 --- a/portal/src/util/mergeStyles.ts +++ b/portal/src/util/mergeStyles.ts @@ -1,30 +1,32 @@ import { useCallback, useMemo } from "react"; -import { IStyleFunctionOrObject, IStyleSet } from "@fluentui/react"; +import { IStyleFunctionOrObject } from "@fluentui/react"; import { concatStyleSetsWithProps, concatStyleSets, IConcatenatedStyleSet, + IStyleSetBase, } from "@fluentui/merge-styles"; -export function useMergedStyles( - ...styless: (IStyleFunctionOrObject | undefined)[] -): IStyleFunctionOrObject { +export function useMergedStyles( + ...styless: (IStyleFunctionOrObject | undefined)[] +): ( + props: TStylesProps +) => ReturnType> { return useCallback( (props) => { return concatStyleSetsWithProps(props, ...styless); }, - // eslint-disable-next-line + // eslint-disable-next-line react-hooks/exhaustive-deps [...styless] ); } -export function useMergedStylesPlain( - // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents - ...styless: (IStyleSet | undefined)[] -): IConcatenatedStyleSet { +export function useMergedStylesPlain( + ...styless: (TStyleSet | undefined)[] +): IConcatenatedStyleSet { return useMemo( () => concatStyleSets(...styless), - // eslint-disable-next-line + // eslint-disable-next-line react-hooks/exhaustive-deps [...styless] - ) as IConcatenatedStyleSet; + ) as IConcatenatedStyleSet; }