Description

I would like to report an issue regarding the logging behavior in the Workflow/File Upload feature. The application logs certain events to the console, even when the application is running on port 3000 and I reload a different website, such as example.com.

How to reproduce

1. Open the application and navigate to the Workflow/File Upload feature.
2. Select an option in the form.
3. Check the console logs for the following entries:
   1. Logs the form from index.js:37
   2. Logs true repeated multiple times per second from controller-webform.js:23
   3. Logs "Broadcasting file update" from form-controller.js:221
4. When the app is running in port 3000, but if we reload a different website say example.com, it logs all given entries again

Screenshots

Logs:

Reload bug video:

Versions

• Operating System : Ubuntu 22.04
• Browser : Chrome

Logs

Description

Images are uploaded to the Minio once the user submits the form. But to enable Save as draft feature we should also save the images whenever the file upload event is triggered. In this way we can save the progress of the form.

The following issue can be resolved from here:
https://github.com/Samagra-Development/workflow/blob/feat/file-upload/packages/enketo-express/public/js/src/module/form-controller.js#L195

Approach:

• Filtering the events on the basis of the event == fileUpload.
• Hitting the /form/uploadFile API.
• Testing it with the wrapper codebase.

Project Details

Workflow is a complete package that allows you to deploy an application with authentication, database, backend, storage service, frontend and enketo forms with just a single command.

Enketo has been used all around the world for a wide range of uses from needs assessments in humanitarian aid, to raising historical awareness, to clinical research, to election monitoring.

Feature to be implemented

We need to create a state machine based system in React which allows to handle UI changes according to the state transitions and actions using XState and move application to NextJs

What needs to be built

1. Migrate app to NextJS
2. Add Redux Persist
3. Implement State Machine logic for UI

Learning Path

Complexity

Medium

Skills Required

React, Redux, XState, LocalForage, Enketo

Name of Mentors

@amit-s19

Project Size

8 weeks

Product Setup

Follow this link

Acceptance Criteria

• React app is now a NextJS based app
• Redux is now integrated with properly written dispatchers, reducers, actions and middlewares
• Transform React app to be powered through state machines and UI is handled through state transitions using XState
• Enketo forms render properly

Milestones

• Setting up the project locally
• Understanding NextJS
• Figuring out how state machine works and how to implement in React
• Understanding Redux and integrating in React
• Integrating State Machines in the app

C4GT

This issue is nominated for Code for GovTech (C4GT) 2023 edition.
C4GT is India's first annual coding program to create a community that can build and contribute to global Digital Public Goods. If you want to use Open Source GovTech to create impact, then this is the opportunity for you! More about C4GT here: https://codeforgovtech.in/

Make the dockerifle a multi-stage dockerfile so that it does not install dependencies on each build if no changes are made to package.json and lock files.

https://github.com/Samagra-Development/workflow/blob/main/packages/enketo-express/Dockerfile

Description

Hitting the delete image API from the storage on clicking the reload button.

Write a CLI script in any language (preferrable python, bash, js) that rotates the secrets in a .env file.

It should be generalised enough to work with any .env file, so we can use it for other projects as well.

For example: Providing names of variables for which secrets are to be rotated in the .env file

Form workflow to uphrh-workflow repo.
Move UP HRH forms to that repo.
Delete branches and data from this repo.
Follow trunk based development

Description

Adding a Spec-driven UI changes. Currently, for any instance we have to replace all the primary, secondary and tertiary colours values in the code. Instead it should be the part of config. The config can look like:

{
    "primaryColor": "#F34621",
    "secondaryColor": "#F34621"
    "backgroundColor": "#F34621"
    "fontFamily": "#F34621"
} 

Lots of developers trying to set up project locally but facing issue how could they do it.
This issue will guide to set up project locally by adding guide commands in README.md of project

https://github.com/Samagra-Development/workflow/blob/main/packages/form-manager/src/app.module.ts#L14

Use env variable to pick values from .env

When using the reload button or adding new images to the webpage, the URL of the initially loaded image remains the same.

Description

P.S. These will be divided into separate issues and tracked there.

1. A route to allow for testing your XLSX forms. Something like this
2. API to onboard an XML to the workflow. Currently, all of these are hardcoded and manually uploaded in the form-manager.

.gitpod.yml can be used to refer to the flow of running a server.

Description

Currently, the form-controller is part of Enketo client and can live outside of it as a package. Keeping it outside of Enketo will allow for

1. Decoupling would allow for easier upgrades to Enketo.
2. Enable it to be written in TypeScript. Faster and safer development lifecycle.
3. Ability to add tests for features without Enketo.

Things to implement

• Extract form-controller as a separate package and import into enketo
• Use Typescript to refactor the code (index.js -> index.ts)
• Make the build command, automatically push the package to the NPM registry
• Use babel and browserify to convert the nodeJS APIs to browser based APIs
• Enable easy setup of the form-controller package using the npm install command.

Description

• Create a feature where we can copy the XML/JSON written in textarea on Generic Form Component
• Remove the overflow on Generic Forms

Steps followed and expected result

• There must be a button that should be named "Copy" with the respective icon on top of it.

• Whenever the user clicks on the button the XML/JSON shown in the textarea must be copied to the clipboard.

• Additionally, remove the unwanted scroll on the generic form component.

Screenshots

Remove the unwanted overflow(scroll)

Copy button(with an icon) should be added at the marked place

Description

Make a toggle button that will have the functionality to toggle between dark and light theme

Description

Make the User Interface of workflow responsive for mobile screens

Steps followed and expected result

• The UI must be presentable on the mobile screen
• Make it responsive for App.js and GenericForm/index.js

Screenshots

Description

After starting the project from gitpod and following all the standard rules but there is some issue at the end of enketo express causing forms to load we are getting this error in our iframe

How to reproduce

Start a new workspace and open port 3000 and open any type of form

Screenshots

we are getting loading error.

Description

Currently, to see live changes in the app we have to use npm install in ./apps/wrapper directory and then hardcode the .env file in the directory then stop the wrapper container to be able to interact.
In place of that what we can do is we can automatically add and update a .env file in the wrapper directory through gitpod scripts in our workspace.
Or we can add a bash script that will install dependencies, stop the wrapper container and start the server all at once with just one script for live interaction.

Steps followed and expected result

Add a bash script or update the gitpod script whichever path we want to choose and remove the hardcoded steps to copy-paste .env from here and there.

We should leverage service workers to:

Milestone 1 - Cache React Layers

• Cache static react screens
• Cache API responses rendering screens
• Storing offline entered data into index DB
• Syncing offline entered data when user online on subsequent app launch
• Force updating the react app when a new release is made - Using service workers.
• Keep elements online dependent - eg: Login
• Offline location handling
• Add installable option for PWA
• Documentation

Milestone 2 - Render enketo offline

• Cache the enketo form when opened for the first time in online mode.
• Cache and prefill form - Text
• Cache and prefill form - Image - Send to minio? Save in local?
• Cache submission
• Sync response to remote when user online
• Clear prefilled form on custom logic
• Display messages when user offline / online - When offline show dialog - "Queued response"
• Offline location handling
• Explore background submission (Naively implemented for now)
• Rendering of form without iframe
• Documentation

Milestone 3 - Offline Support next.js frontend screens - FamilyId

• Project Setup of Family ID (1h)
• Use a service worker library like Workbox or Next PWA to simplify the setup. (4h)
• Cache important assets and data for offline access. (2h)
• Implement data synchronization between the client and server when the app is online after one time login. (1d)
  • Store data locally using browser storage mechanisms like IndexedDB or localStorage.
• Web app manifest file (manifest.json) that defines the PWA's metadata. (30m)
  • Include properties like the app name, icons, background color, and display mode.
• Submitting of offline feedback (4h-8h)
• Optimize the app's performance using techniques like code splitting, lazy loading, and image optimization. (1d)
• Documentation (4+8h)
• Integrate push notification functionality using the Push API and a push service like Firebase Cloud Messaging (FCM). - P2

Milestone 4 - Documenting & contributing

• Contributing back to enketo - Open issue, Discuss approach & on agreement Plan a PR back:
  • Submitting to custom backend - #572
  • Image handling - #573
  • Event callbacks from enketo input -#574
  • Config for UI and icons - #575
• Discuss to enketo - Open issue and discuss approach only:
  • Background submissions - #576
  • [Abandoned] Enketo queue UI Handling of offline resubmission.
  • Icon on offline form - #575
• Documentation improvements
  • Define a lens - For external contributors or internal samagra folks.
  • Make it generic and take inspiration from nextjs, reactjs docs.
  • Quick setup instructions (video optionally)
• Offline Sync Handler
  • Improve documentation
  • Retry handling
  • Success callbacks
  • Chaining calls
  • Unit Tests suite - Retry, different input types, different methods, all functionalities.
  • [Abandoned] Optionally create a PWA out of the box

Milestone 5 - Download enketo offline upfront - Community driven

• Download offline forms in ghost component on app launch ( Current Approach )
• Forms should be loaded in parallel
• Config based form downloading
• Config based UI rendering

Description

The readme steps do not work for installing the repo. Grunt fails and many other dependencies fail.
We should add support for docker deployment to the repo.
We should also follow trunk based development with main, develop and feature branches. All projects should fork the main repo instead of creating branches inside this repo. Currently default branch is not main. This should be fixed.

https://github.com/Samagra-Development/workflow/blob/main/apps/wrapper/src/components/GenericForm/index.js#L123

Wrapper currently is configured to use gitpod specific environment variables.

Related to #38

Description

Create a platform for the .xlsx upload.

Functions of the platform:

• Converting the .xlsx to .xml format. Reference
• API for the XML file creation.
• Redeploying of the application.

Description

Improving the Documentation to ease the process of first time setup is essential as the current README.md documentation does not outline the exact steps required for building the project.

Update existing documentation on installation to include exact steps for setup. Contributions to documentations are welcome.

Description

Right now Minio is part of the controller. There are certain abstractions that can improve the implementation

1. NestJS Minio
2. NestJS Minio Client

There could be others as well that I was not able to find. The idea is to build/reuse a cloud-agnostic S3-compatible storage provider library and use that to store the data.

Description

By incorporating a form retrieval feature, users can easily access their previously submitted forms and can rectify mistakes or update outdated information.

Steps followed and expected result

After submitting the form there is a button shows named “Edit Response”, by clicking this
button you can retrieve all data and it is shown on the portal which helps users to change
the required data once again.

Description

MIgrate current code base structure into a monorepo by leveraging turborepo.

Resources

Turborepo Official Documentation

If you open a jumping form then you can see in layout there are horizontal and vertical scroll bars which is not so good for UI.
In this issue we will fix it.

Description

Setting up Docusaurus for automatic building and deployment of documentation using Github Actions on commit.

Description

Right now the formData is available only at the end of filling the form.

Description

Upload all files to Minio and share the link of the file as part of formData. The file upload API will be part of the form-manager service. All files will be uploaded to https://cdn.samagra.io.

formData files would be identified as

{
	"selfie": {
		"type": "file",
		"data": "base64 string"
	},
	"name": "nameOfThePerson"
}

will be converted to

{
	"selfie": "https://cdn.samagra.io/pathOfTheFile"
	"name": "nameOfThePerson"
}

Description

In order to welcome contributions from the open source community, it is important to have a well defined contributions file to which people can refer and get started with contributions to the project.

Description

Move current servers into docker / vscode integrated containers.

Description

• Concurrently run all node scripts present in package.json via single command in order to enhance user experience
• Configure Turborepo config file in order to enable faster builds and first time setup.
• Move wrapper under examples and run during setup in order to help developers get familiarized via examples.

.env is used to store secrets and it can be unknowingly pushed to GitHub leaking prod secrets if present. Add a sample.env and use that to make .env in gitpod