awslabs / iot-application Goto Github PK

Add a new eslint rule to prevent console.log's getting into the repo.

What's happening?

When editing a dashboard name or description through inline editing on the dashboards page (/dashboards), validation errors persist after canceling changes.

What should happen?

Validation errors should be reset after canceling changes.

Steps to reproduce:

1. Go to the dashboards page (/dashboards).
2. (optional) Create a dashboard.
3. Trigger inline editing on the name or description of the dashboard.
4. Trigger a validation error by removing the name/description or exceeding max characters (currently 40 for name and 200 for description).
5. Cancel making the change by clicking the "X".
6. Trigger inline editing again.
7. Observe a valid name/description with a visible validation error.

Acceptance criteria

• Display "getting started" container using expandable container component with action stripe from cloudscape library
• "Getting started" container should remain expanded (default state)
• Use key value pair component within the "getting started" container to display information
• Use accurate spacing/padding information as provided in the cloudscape
• Use accurate font + font styling

Overview

• Current state: No homepage. User needs to open the hamburger menu to access the list of dashboards or even to create a dashboard.
• Proposed solution: Refer to the image below -
  • Overview section to provide a high-level information about Centurion with the ability to hide.
  • Dashboard table for creating, viewing and deleting the dashboard.
  • Users can further edit their dashboard once they view it.

NOTES

1. use https://refresh.cloudscape.aws.dev/
2. external link https://cloudscape.design/
3. use the visual refresh version as shown in the parent ticket screenshot / figma
4. use the design tokens where ever necessary for spacing and colors
5. https://cloudscape.design/components/app-layout/?tabId=api --> understand how app-layout works

Auto collapse state for both panels when no widget is selected

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Improve our type safety and integration with TanStack Query by migrating our repo from React Router to TanStack Router (https://tanstack.com/router/v1).

Prettier is not running at the root of the project, which is needed on for our Playwright tests. Improve our tests by making this work.

Add support for accessibility scans with Playwright (https://playwright.dev/docs/accessibility-testing).

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Acceptance criteria

1. the footer should be rendered as shown
2. the footer component from the cloudscape should be used (https://refresh.cloudscape.aws.dev/)
3. the links can be dummy for now,

------ NOTES----

1. use https://refresh.cloudscape.aws.dev/
2. external link https://cloudscape.design/
3. use the visual refresh version as shown in the parent ticket screenshot / figma
4. use the design tokens where ever necessary for spacing and colors
5. https://cloudscape.design/components/app-layout/?tabId=api --> understand how app-layout works

Tile layout for informing users to add asset properties to the widget added to the canvas.

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Our build and test GitHub action is starting to hit the 15 minute limit.

Configuration options will differ based on the different widgets added by the user.

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Make it clear to users how to deploy the application to AWS with detailed setup instructions assuming the user is starting from scratch.

Describe the bug

After saving widgets on a dashboard, the widgets would appear on another dashboard incorrectly.

To Reproduce
Steps to reproduce the behavior:

1. Go to /dashboards
2. Click on Create, fill out the modal inputs, and proceed to create a dashboard
3. Click on newly created dashboard and add a widget
4. Go back to /dashboards
5. Click on Create, fill out the modal inputs, and proceed to create another dashboard
6. Click on newly created dashboard
7. See a widget on the newly created dashboard
8. Refresh the page and the widget is no longer there

Expected behavior

the widget(s) state on the dashboard should reflect the select dashboard's configuration

Screenshots

Desktop (please complete the following information):

• OS: MacOS 13.2.1 (22D68)
• Browser Chrome
• Version Version 111.0.5563.64 (Official Build) (x86_64)

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Enable new TypeScript features and improved dev/build performance by upgrading the repo to use TypeScript 5.

Provide ourselves with a nice UI for our test runner by integrating Vitest UI (https://vitest.dev/guide/ui.html).

Document the architecture of the deployment infrastructure to provide understanding to contributors and users.

Currently, the yarn.lock file lists dependencies that work on MacOS. However, the same dependencies does not work on the node:alphine image.

Please work on compatibility and add --frozen-lockfile flag to the line RUN yarn install

(This is not an real issue)

Hi team, it is very nice working will y'all. Unfortunately I won't be able to attend the celebration of the launch of app kit and application. Feel free to reach out to me if you want to talk. My email address is lixiao.bill at gmail.com.

Thanks,
Bill

Document the architecture of the client to provide understanding to contributors.

On the dashboards page (/dashboards/$dashboardId), the breadcrumbs are displaying a hard-coded "Dashboard Name". It should be displaying the name of the dashboard.

To achieve this change, there likely needs to be a mutation to the breadcrumbs on mount, after the dashboard is fetched.

Sign-in → opens the "view mode" for last edited dashboard

Refer image for view mode - it is showing amazon data instead of actual data

Improve our testing by allowing us to get a better view into code coverage. Integrate Stryker Mutator (https://stryker-mutator.io/docs/stryker-js/getting-started/) and create an NPM script for developers to scan their work and make their tests and code more robust.

Align with the client and migrate from Jest to Vitest on the backend. This will speed up our tests and enable features such as in-source testing and TypeScript type testing.

Improve our client-side testing by integrating Jest DOM ESLint plugin (https://testing-library.com/docs/ecosystem-eslint-plugin-jest-dom/).

Improve our client-side testing by integrating Testing Library's ESLint plugin (https://testing-library.com/docs/ecosystem-eslint-plugin-testing-library/).

Enable high-quality performance metrics on the client my integrating Web Vitals (https://github.com/GoogleChrome/web-vitals).

Consuming IoT App Kit dashboard currently pulls in every other module as a dependency. We need this to be tree-shakable.

Rework needed for the creation flow. It should match the cloudscape pattern.

User Action: Click "Create dashboard" → Fills the form → Dashboard created. The user goes back to the "List of dashboards" view page.

Newly created dashboard is pre-selected and the user clicks on "View" to edit the dashboard in the "Edit" mode.

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Document the architecture of core to provide understanding to contributors.

Notifications are expected to have the UX behavior (defined by Cloudscape)[https://cloudscape.design/components/flashbar/?tabId=usage].

There are two issues with our implementation:

1. A side-effect occurs. Users of the useApplication hook must understand that navigate dismisses notifications. This is problematic when creating a dashboard, as a navigation needs to occur and then a success notification needs to appear. If the emission of the notification occurs before navigation, the notification will be dismissed. (note: this behavior is documented in the useApplication hook.
2. navigate dismisses all notifications, but the UX guidance is to persist notifications relevant to pages across navigation. This will require adding context to the notification structure about which pages it should be visible on.

Improve our usage of Tanstack Query by adding its ESLint plugin (https://tanstack.com/query/latest/docs/react/eslint/eslint-plugin-query).

Using Playwright's full-page snapshot feature:

1. Take an image snapshot of every page of the app (bonus points for capturing states, but lower priority).
2. Make these snapshots visible on the repo for users to preview the application (ideally make the snapshots dynamic, meaning automatically replaced when they are updated).

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

The max number of characters for a dashboard name is currently set at 40 characters. We have decided this is too limiting and plan to increase it to 100 characters.

This may be accomplished by updating the Dashboard entity on the back-end with a single line change. After making the change, while the server is live, run yarn gen:types at the root of the project to complete the client-side change.

There are a few tests on core which will need to be updated which catch 400 Bad Request errors for the length validation.

Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Our import of the Amplify stylesheet, which is required for the login page, is impacting dashboard styling (e.g., component icon rendering). We need to resolve the conflicting styles.

Empty state when no widget is added or selected

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Describe the bug

core dashboard definition is not aligned with @iot-app-kit/dashboard Dashboard definition

Expected behavior
Save/update endpoints should expect the same structure as @iot-app-kit/dashboard onSave

Single select option to select any dashboard and click “Delete” btn to delete. A modal will appear to confirm action. (No additional confirmation needed in the modal)

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Add /playwright/.auth/user.json and /apps/core/.cognito/db/us-west-2_h23TJjQR9.json to .gitignore.

Current state: Users are directed to an empty "View mode" state, even if they have no content or are creating the dashboard for the first time.
Proposed solution:
No content//Creating the dashboard for the first time: 
Direct the users to the “edit mode” dashboard 
NOTE: Left and right panels should remain closed in the empty state as well as when no widget is added or selected on the canvas.
With content:
Users are directed to the “View mode” where they will be able to view their saved dashboard and monitor their assets.
They can click on the “Edit” button to make any further changes to the dashboard
NOTE: Left and right panels should remain closed in the empty state as well as when no widget is added or selected on the canvas.

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Core unit test failing in main after accidental merge of cognito-local dependency upgrade https://github.com/awslabs/iot-application/actions/runs/4802517305.

Please reach out for SVGs

Refer -
Doc - https://quip-amazon.com/5U2EAtnId09B/Centurion-UX-Pre-GA
Design - https://www.figma.com/file/pmsbdMcD7ieVWRFMNxStIi/VoT--AppKit-%26-Centurion?type=design&node-id=348%3A423854&mode=design&t=1zPNBiyI9sH6mezN-1

Make it easier for us to create forms by integrating React Hook Form DevTools (https://react-hook-form.com/dev-tools/).