Merge branch 'develop' into sainak/replace-axios

.devcontainer/devcontainer.json

@@ -0,0 +1,40 @@
+// For format details, see https://aka.ms/devcontainer.json. For config options, see the
+// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
+{
+  "name": "care_fe",
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:1-18-bullseye",
+  "features": {
+    "ghcr.io/devcontainers/features/docker-outside-of-docker:1": {
+      "moby": true,
+      "installDockerBuildx": true,
+      "version": "latest",
+      "dockerDashComposeVersion": "v2"
+    }
+  },
+  "customizations": {
+    "vscode": {
+      "settings": {},
+      "extensions": [
+        "esbenp.prettier-vscode",
+        "bradlc.vscode-tailwindcss",
+        "yoavbls.pretty-ts-errors",
+        "chenglou92.rescript-vscode"
+      ]
+    }
+  },
+  "hostRequirements": {
+    "cpus": 4
+  },
+  "waitFor": "onCreateCommand",
+  "postCreateCommand": "npm install",
+  "postAttachCommand": {
+    "server": "npm run dev"
+  },
+  "portsAttributes": {
+    "4000": {
+      "label": "Application",
+      "onAutoForward": "openPreview"
+    }
+  },
+  "forwardPorts": [4000]
+}

.env

@@ -1,11 +1,10 @@
 # Whitelabelling envs
 
-REACT_APP_TITLE="CARE"
-REACT_APP_META_DESCRIPTION="CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations."
+REACT_APP_TITLE=CARE
+REACT_APP_META_DESCRIPTION=CoronaSafe Network is an open-source public utility designed by a multi-disciplinary team of innovators and volunteers. CoronaSafe Care is a Digital Public Good recognised by United Nations.
 REACT_APP_COVER_IMAGE=https://cdn.coronasafe.network/care_logo.svg
 REACT_APP_COVER_IMAGE_ALT=https://cdn.coronasafe.network/care_logo.svg
-REACT_APP_CONFIG=""
-REACT_PUBLIC_URL="https://care.coronasafe.in"
+REACT_PUBLIC_URL=https://care.coronasafe.in
 
 # Dev envs
 ESLINT_NO_DEV_ERRORS=true

.envrc

@@ -0,0 +1 @@
+test -f .env.local && dotenv .env.local

.github/workflows/cypress.yaml

@@ -14,6 +14,10 @@ jobs:
     permissions: write-all
     if: github.repository == 'coronasafe/care_fe'
     runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1,2,3,4,5,6,7,8]
     steps:
       - name: Checkout 📥
         uses: actions/checkout@v3
@@ -24,20 +28,26 @@ jobs:
           repository: coronasafe/care
           path: care
 
-      - name: Run docker compose up on care 🐳
-        run: cd care && touch .env && make docker_config_file=docker-compose.pre-built.yaml up && cd .. && sleep 60s
-        # Voluntarily kept 60 seconds delay to wait for migrations to complete.
-
-      - name: Run Django collectstatic and load dummy data on care 🐍
+      - name: Start care docker containers 🐳
+        run: |
+          cd care
+          make docker_config_file=docker-compose.pre-built.yaml up 
+          while docker compose exec backend bash -c "python manage.py showmigrations 2>/dev/null | cat | grep -q '\[ \]'"; do
+            >&2 echo "Migrations are not yet applied - sleeping"
+            sleep 5
+          done
+          echo "Migrations are applied"
+          cd ..
+
+      - name: Load dummy data into care backend 📂
         run: |
-          docker exec care python manage.py load_dummy_data
+          cd care
+          docker compose exec backend bash -c "python manage.py load_dummy_data"
+          cd ..
 
       - name: Check care is up ♻
         run: curl -o /dev/null -s -w "%{http_code}\n" http://localhost:9000
 
-      - name: Change api proxy url 📝
-        run: 'sed --in-place "s^target: .*,^target: \"http://localhost:9000\",^g" vite.config.ts'
-
       - name: Install dependencies 📦
         run: npm install
 
@@ -52,40 +62,16 @@ jobs:
           start: "npx vite preview --host"
           wait-on: "http://localhost:4000"
           wait-on-timeout: 300
-          browser: electron
+          browser: chrome
           record: true
+          parallel: true
         env:
+          CARE_API: http://localhost:9000
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_OPTIONS: --max_old_space_size=4096
-
-      - name: Remove cypress passed label on failure 🏷️
-        uses: actions-ecosystem/action-remove-labels@v1
-        if: failure()
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          labels: cypress passed
-
-      - name: Add cypress passed label on success 🏷️
-        uses: actions-ecosystem/action-add-labels@v1
-        if: success()
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          labels: cypress passed
-
-      - name: Remove cypress failed label on success 🏷️
-        uses: actions-ecosystem/action-remove-labels@v1
-        if: success()
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          labels: cypress failed
-
-      - name: Add cypress failed label on failure 🏷️
-        uses: actions-ecosystem/action-add-labels@v1
-        if: failure()
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          labels: cypress failed
+          COMMIT_INFO_MESSAGE: ${{github.event.pull_request.title}}
+          COMMIT_INFO_SHA: ${{github.event.pull_request.head.sha}}
 
       - name: Upload cypress screenshots on failure 📸
         uses: actions/upload-artifact@v3
@@ -94,10 +80,3 @@ jobs:
           name: cypress-screenshots
           path: cypress/screenshots
 
-      # Test run video was always captured, so this action uses "always()" condition
-      - name: Upload cypress videos 📹
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          name: cypress-videos
-          path: cypress/videos

.gitignore

@@ -29,7 +29,8 @@ storybook-static
 .swp
 stats.json
 public/build-meta.json
-.vscode
+.vscode/*
+!.vscode/launch.json
 
 
 # Reason React
@@ -53,6 +54,7 @@ public/build-meta.json
 # Using NPM
 yarn.lock
 pnpm-lock.yaml
+bun.lockb
 
 # Cypress
 cypress/downloads

.vscode/launch.json

@@ -0,0 +1,23 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Run application",
+            "type": "node",
+            "request": "launch",
+            "cwd": "${workspaceFolder}",
+            "console": "integratedTerminal",
+            "runtimeExecutable": "npm",
+            "runtimeArgs": [
+              "run-script",
+              "dev"
+            ],
+            "skipFiles": [
+              "<node_internals>/**"
+            ]
+        }
+    ]
+}

cypress.config.ts

@@ -19,7 +19,6 @@ export default defineConfig({
           return null;
         },
       });
-
       return config;
     },
     baseUrl: "http://localhost:4000",

cypress/e2e/assets_spec/asset_homepage.cy.ts

@@ -0,0 +1,114 @@
+/// <reference types="cypress" />
+
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import { AssetSearchPage } from "../../pageobject/Asset/AssetSearch";
+import { AssetQRScanPage } from "../../pageobject/Asset/AssetQRScan";
+import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+import { AssetFilters } from "../../pageobject/Asset/AssetFilters";
+import { AssetPage } from "../../pageobject/Asset/AssetCreation";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import { v4 as uuidv4 } from "uuid";
+
+describe("Asset Tab", () => {
+  const assetSearchPage = new AssetSearchPage();
+  const assetQRScanPage = new AssetQRScanPage();
+  const assetPagination = new AssetPagination();
+  const assetFilters = new AssetFilters();
+  const assetPage = new AssetPage();
+  const loginPage = new LoginPage();
+  const assetName = "Dummy Camera 10";
+  const qrCode = uuidv4();
+  const serialNumber = Math.floor(Math.random() * 10 ** 10).toString();
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.restoreLocalStorage();
+    cy.awaitUrl("/assets");
+  });
+
+  // search for a element
+
+  it("Search Asset Name/QR_ID/Serial_number", () => {
+    assetSearchPage.typeSearchKeyword(assetName);
+    assetSearchPage.pressEnter();
+    assetSearchPage.verifyBadgeContent(assetName);
+    assetSearchPage.clickAssetByName(assetName);
+    assetSearchPage.clickUpdateButton();
+    assetSearchPage.clearAndTypeQRCode(qrCode);
+    assetSearchPage.clearAndTypeSerialNumber(serialNumber);
+    assetSearchPage.clickAssetSubmitButton();
+    assetSearchPage.visitAssetsPage();
+    assetSearchPage.typeSearchKeyword(qrCode);
+    assetSearchPage.pressEnter();
+    assetSearchPage.verifyAssetListContains(assetName);
+    assetSearchPage.verifyBadgeContent(qrCode);
+    assetSearchPage.typeSearchKeyword(serialNumber);
+    assetSearchPage.verifyAssetListContains(assetName);
+    assetSearchPage.verifyBadgeContent(serialNumber);
+  });
+
+  // scan a asset qr code
+
+  it("Scan Asset QR", () => {
+    assetQRScanPage.scanAssetQR();
+  });
+
+  // filter the asset and verify the badges are there
+
+  it("Filter Asset", () => {
+    assetFilters.filterAssets(
+      "Dummy Facility 1",
+      "INTERNAL",
+      "ACTIVE",
+      "ONVIF Camera",
+      "Camera Loc"
+    );
+    assetFilters.clickadvancefilter();
+    assetFilters.clickslideoverbackbutton(); // to verify the back button doesn't clear applied filters
+    assetFilters.assertFacilityText("Dummy Facility 1");
+    assetFilters.assertAssetTypeText("INTERNAL");
+    assetFilters.assertAssetClassText("ONVIF");
+    assetFilters.assertStatusText("ACTIVE");
+    assetFilters.assertLocationText("Camera Locations");
+    assetFilters.clickadvancefilter();
+    assetFilters.clearFilters();
+  });
+
+  // Verify the pagination in the page
+
+  it("Next/Previous Page", () => {
+    assetPagination.navigateToNextPage();
+    assetPagination.navigateToPreviousPage();
+  });
+
+  it("Import new asset", () => {
+    assetPage.selectassetimportbutton();
+    assetPage.selectImportOption();
+    assetPage.selectImportFacility("Dummy Facility 1");
+    assetPage.importAssetFile();
+    assetPage.selectImportLocation("Camera Locations");
+    assetPage.clickImportAsset();
+    assetPage.verifySuccessNotification("Assets imported successfully");
+  });
+
+  it("verify imported asset", () => {
+    assetSearchPage.typeSearchKeyword("New Test Asset");
+    assetSearchPage.pressEnter();
+    assetSearchPage.verifyAssetIsPresent("New Test Asset");
+  });
+
+  it("Export asset", () => {
+    assetPage.selectassetimportbutton();
+    assetPage.selectjsonexportbutton();
+    assetPage.selectassetimportbutton();
+    assetPage.selectcsvexportbutton();
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});