Release 2.0.4

.github/workflows/build-installers.yaml

@@ -244,10 +244,10 @@ jobs:
         run: |
           echo "TAGNAME=$(echo $GITHUB_REF | cut -d / -f 3)" >>$GITHUB_OUTPUT
 
-      - name: Gets JWT Token from GitHub
-        uses: Chia-Network/actions/github/jwt@main
-
       - name: Trigger apt repo update
-        run: |
-          curl -s -XPOST -H "Authorization: Bearer ${{ env.JWT_TOKEN }}" --data '{"cadt_repo":"cadt-ui","release_version":"${{ steps.tag-name.outputs.TAGNAME }}"}' ${{ secrets.GLUE_API_URL }}/api/v1/cadt/${{ github.sha }}/start
-          curl -s -XPOST -H "Authorization: Bearer ${{ env.JWT_TOKEN }}" --data '{"cadt_repo":"cadt-ui","release_version":"${{ steps.tag-name.outputs.TAGNAME }}"}' ${{ secrets.GLUE_API_URL }}/api/v1/cadt/${{ github.sha }}/success/deploy
+        uses: Chia-Network/actions/github/glue@main
+        with:
+          json_data: '{"cadt_repo":"cadt-ui","release_version":"${{ steps.tag-name.outputs.TAGNAME }}"}'
+          glue_url: ${{ secrets.GLUE_API_URL }}
+          glue_project: "cadt"
+          glue_path: "trigger"

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cadt-ui",
   "private": true,
-  "version": "2.0.3",
+  "version": "2.0.4",
   "type": "module",
   "main": "build/main.js",
   "engineStrict": true,
@@ -26,64 +26,65 @@
     "electron:package:linux": "npm run clean && npm run build && electron-builder -l -c.extraMetadata.main=build/main.js"
   },
   "dependencies": {
-    "@emotion/react": "^11.13.0",
+    "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^5.16.7",
     "@reduxjs/toolkit": "^2.2.7",
     "@tailwindcss/aspect-ratio": "^0.4.2",
-    "@tailwindcss/forms": "^0.5.7",
+    "@tailwindcss/forms": "^0.5.9",
     "@types/styled-components": "^5.1.34",
     "@xterm/xterm": "^5.5.0",
     "components": "^0.1.0",
-    "dayjs": "^1.11.12",
+    "dayjs": "^1.11.13",
     "diff": "^5.2.0",
-    "express": "^4.19.2",
+    "express": "^4.21.0",
     "flowbite": "^2.5.1",
     "flowbite-react": "^0.7.8",
     "flowbite-typography": "^1.0.3",
     "formik": "^2.4.6",
     "lodash": "^4.17.21",
-    "qrcode.react": "^3.1.0",
+    "qrcode.react": "^3.2.0",
     "react": "^18.3.1",
     "react-content-loader": "^7.0.2",
     "react-dom": "^18.3.1",
     "react-intl": "^6.6.8",
     "react-redux": "^9.1.2",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "react-webview": "^0.1.0",
     "redux-persist": "^6.0.0",
     "simplebar": "^6.2.7",
     "simplebar-react": "^3.2.6",
-    "styled-components": "^6.1.12",
+    "styled-components": "^6.1.13",
+    "tailwind-scrollbar": "^3.1.0",
     "uuid": "^9.0.1",
     "yup": "^1.4.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^19.2.2",
-    "@types/react": "^18.3.3",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@types/react": "^18.3.7",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.20",
-    "commitlint": "^19.4.0",
+    "commitlint": "^19.5.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "electron": "^28.3.3",
     "electron-builder": "^24.13.3",
-    "eslint": "^8.57.0",
+    "eslint": "^8.57.1",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.9",
-    "postcss": "^8.4.41",
+    "eslint-plugin-react-refresh": "^0.4.12",
+    "husky": "^9.1.6",
+    "lint-staged": "^15.2.10",
+    "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "prettier-eslint": "^16.3.0",
     "standard-version": "^9.5.0",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.1",
+    "tailwindcss": "^3.4.12",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.6",
     "wait-on": "^7.2.0"
   },
   "standard-version": {

src/renderer/App.tsx

@@ -53,6 +53,7 @@ function App() {
   }, [appStore.apiHost, appStore.configFileLoaded, fetchedConfig, configFileLoading, dispatch]);
 
   useEffect(() => {
+    // give the setConfigFileLoaded action time to dispatch
     if (!configFileLoading) setTimeout(() => setAppLoading(false), 400);
   }, [configFileLoading]);
 

src/renderer/components/blocks/buttons/ConnectButton.tsx

@@ -35,6 +35,12 @@ const ConnectButton: React.FC = () => {
     setTimeout(() => window.location.reload(), 0);
   };
 
+  const onClose = () => {
+    refetch();
+    setTimeout(() => setActive(false));
+    setTimeout(() => window.location.reload(), 0);
+  };
+
   return (
     <>
       <Button
@@ -45,7 +51,7 @@ const ConnectButton: React.FC = () => {
       >
         {!serverHealth?.isHealthy ? <FormattedMessage id="connect" /> : <FormattedMessage id="disconnect" />}
       </Button>
-      {isActive && <ConnectModal onClose={() => setActive(false)} />}
+      {isActive && <ConnectModal onClose={onClose} />}
     </>
   );
 };

src/renderer/components/blocks/buttons/FormButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Spinner } from '@/components';
+import { Button } from '@/components';
 
 interface FormButtonProps {
   isSubmitting: boolean;
@@ -9,8 +9,12 @@ interface FormButtonProps {
 
 const FormButton: React.FC<FormButtonProps> = ({ isSubmitting, formikErrors, children }) => {
   return (
-    <Button type="submit" disabled={isSubmitting || Boolean(Object.keys(formikErrors).length)}>
-      {isSubmitting ? <Spinner size="sm" light={true} /> : children}
+    <Button
+      type="submit"
+      disabled={isSubmitting || Boolean(Object.keys(formikErrors).length)}
+      isProcessing={isSubmitting}
+    >
+      {children}
     </Button>
   );
 };

src/renderer/components/blocks/buttons/ProjectOfferFileDownloadButton.tsx

@@ -3,6 +3,8 @@ import { Button } from '@/components';
 import { AiOutlineDeliveredProcedure } from 'react-icons/ai';
 import { Alert } from 'flowbite-react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
 
 interface Props {
   disabled?: boolean;
@@ -11,6 +13,7 @@ interface Props {
 const ProjectOfferFileDownloadButton: React.FC<Props> = ({ disabled }) => {
   const [downloadLoading, setDownloadLoading] = useState(false);
   const [showDownLoadFailedAlert, setShowDownloadFailedAlert] = useState<boolean>(false);
+  const appStore = useSelector((state: RootState) => state.app);
 
   useEffect(() => {
     if (showDownLoadFailedAlert) {
@@ -33,9 +36,20 @@ const ProjectOfferFileDownloadButton: React.FC<Props> = ({ disabled }) => {
   const handleClickDownload = async () => {
     setDownloadLoading(true);
     try {
-      const url = new URL('http://localhost:31310/v1/offer');
+      const url = new URL(`${appStore.apiHost}/v1/offer`);
+      const headers = {
+        Accept: '*/*',
+      };
+
+      if (appStore?.apiKey) {
+        headers['X-Api-Key'] = appStore.apiKey;
+      }
+
+      const downloadResponse: Response = await fetch(url, {
+        mode: 'cors',
+        headers,
+      });
 
-      const downloadResponse: Response = await fetch(url);
       if (!downloadResponse?.ok) {
         setShowDownloadFailedAlert(true);
         return;

src/renderer/components/blocks/buttons/ProjectXlsUploadDownloadButtons.tsx

@@ -4,6 +4,8 @@ import { Button } from '@/components';
 import { useUploadProjectsXlsMutation } from '@/api';
 import { Alert } from 'flowbite-react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
 
 interface XlsUploadDownloadButtonsProps {
   orgUid: string;
@@ -20,6 +22,7 @@ const ProjectXlsUploadDownloadButtons: React.FC<XlsUploadDownloadButtonsProps> =
 }: XlsUploadDownloadButtonsProps) => {
   // upload hooks and state
   const [triggerUploadProjectXls] = useUploadProjectsXlsMutation();
+  const appStore = useSelector((state: RootState) => state.app);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [showUploadFailedAlert, setShowUploadFailedAlert] = useState<boolean>(false);
 
@@ -63,13 +66,25 @@ const ProjectXlsUploadDownloadButtons: React.FC<XlsUploadDownloadButtonsProps> =
   const handleClickDownload = async () => {
     setDownloadLoading(true);
     try {
-      const url = new URL('http://localhost:31310/v1/projects');
+      const url = new URL(`${appStore.apiHost}/v1/projects`);
       url.searchParams.append('xls', 'true');
       orgUid && url.searchParams.append('orgUid', orgUid);
       search && url.searchParams.append('search', search);
       order && url.searchParams.append('order', order);
 
-      const downloadResponse: Response = await fetch(url);
+      const headers = {
+        Accept: '*/*',
+      };
+
+      if (appStore?.apiKey) {
+        headers['X-Api-Key'] = appStore.apiKey;
+      }
+
+      const downloadResponse: Response = await fetch(url, {
+        mode: 'cors',
+        headers,
+      });
+
       if (!downloadResponse?.ok) {
         setShowDownloadFailedAlert(true);
         return;

src/renderer/components/blocks/buttons/UnitXlsUploadDownloadButtons.tsx

@@ -4,6 +4,8 @@ import { Button } from '@/components';
 import { useUploadUnitsXlsMutation } from '@/api';
 import { Alert } from 'flowbite-react';
 import { FormattedMessage } from 'react-intl';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store';
 
 interface XlsUploadDownloadButtonsProps {
   orgUid: string;
@@ -20,6 +22,7 @@ const UnitXlsUploadDownloadButtons: React.FC<XlsUploadDownloadButtonsProps> = ({
 }: XlsUploadDownloadButtonsProps) => {
   // upload hooks and state
   const [triggerUploadUnitXls] = useUploadUnitsXlsMutation();
+  const appStore = useSelector((state: RootState) => state.app);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [showUploadFailedAlert, setShowUploadFailedAlert] = useState<boolean>(false);
   const [downloadLoading, setDownloadLoading] = useState(false);
@@ -63,13 +66,25 @@ const UnitXlsUploadDownloadButtons: React.FC<XlsUploadDownloadButtonsProps> = ({
   const handleClickDownload = async () => {
     setDownloadLoading(true);
     try {
-      const url = new URL('http://localhost:31310/v1/units');
+      const url = new URL(`${appStore.apiHost}/v1/units`);
       url.searchParams.append('xls', 'true');
       orgUid && url.searchParams.append('orgUid', orgUid);
       search && url.searchParams.append('search', search);
       order && url.searchParams.append('order', order);
 
-      const downloadResponse: Response = await fetch(url);
+      const headers = {
+        Accept: '*/*',
+      };
+
+      if (appStore?.apiKey) {
+        headers['X-Api-Key'] = appStore.apiKey;
+      }
+
+      const downloadResponse: Response = await fetch(url, {
+        mode: 'cors',
+        headers,
+      });
+
       if (!downloadResponse?.ok) {
         setShowDownloadFailedAlert(true);
         return;

src/renderer/components/blocks/forms/CreateOrganizationForm.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import * as yup from 'yup';
-import { Button, FloatingLabel, Spinner } from '@/components';
-import { IntlShape, useIntl } from 'react-intl';
+import { FloatingLabel, FormButton } from '@/components';
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 
 const validationSchema = yup.object({
   name: yup.string().required('Name is required'),
@@ -42,9 +42,9 @@ const CreateOrganizationForm: React.FC<FormProps> = ({ onSubmit }) => {
             </Field>
             {touched.name && <ErrorMessage name="name" component="div" className="text-red-600" />}
           </div>
-          <Button type="submit" disabled={isSubmitting}>
-            {isSubmitting ? <Spinner size="sm" light={true} /> : 'Submit'}
-          </Button>
+          <FormButton isSubmitting={isSubmitting} formikErrors={errors}>
+            <FormattedMessage id="submit" />
+          </FormButton>
         </Form>
       )}
     </Formik>

src/renderer/components/blocks/forms/ImportOrganizationForm.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import * as yup from 'yup';
-import { Button, FloatingLabel, Spinner } from '@/components';
-import { IntlShape, useIntl } from 'react-intl';
+import { FloatingLabel, FormButton } from '@/components';
+import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 
 const validationSchema = yup.object({
   orgUid: yup.string().length(64).required('OrgUid is required'),
@@ -43,9 +43,9 @@ const ImportOrganizationForm: React.FC<FormProps> = ({ onSubmit }) => {
               </Field>
               {touched.orgUid && <ErrorMessage name="orgUid" component="div" className="text-red-600" />}
             </div>
-            <Button type="submit" disabled={isSubmitting}>
-              {isSubmitting ? <Spinner size="sm" light={true} /> : 'Submit'}
-            </Button>
+            <FormButton isSubmitting={isSubmitting} formikErrors={errors}>
+              <FormattedMessage id="submit" />
+            </FormButton>
           </Form>
         )}
       </Formik>