UI Guidelines

Owned by JaganKumar
Last updated: Dec 16, 2022
3 min read

Pre-requisites :

  1. Prerequisite

  2. One should know how to create single-page React applications 

  3. https://create-react-app.dev/docs/getting-started/

  4. Keep updated with the latest versions and hooks of React.

  5. The strong base on Javascript

  6. ES6 features.

  7. Basic knowledge of Cascading Style Sheet(CSS) & SCSS.

  8. Including media query styles and pseudo-classes 

Guidelines and Principles: 

 

  1. Clone the repository - https://github.com/egovernments/DIGIT-OSS

  2. Install the dependencies

Git branching and guidelines: 

  • Identify the Jira ticket with the ticket ID.

  • Create a feature branch with Ticket ID as the branch name. ex: UM-1331 (either from master or develop depending on the above-mentioned use cases).

  • Commit message format : <Ticket-ID : Ticket-description>

  • Unit testing performed in the dev environment with the feature branch

New Feature Implementation -

  1. Use the ‘develop‘ branch to implement the latest releases/features.

  2. Merge master to the ‘develop’ branch frequently.

  • git merge master (code currently pointing to release branch)

  1. Push day-to-day changes or features to the ‘develop’ branch.

  • git push

  1. Merge the' develop' branch to the master copy and raise the PR to master before every release cycle.

Previous release bugs -

  1. Fix the issues in the feature branch from the latest 'master'.

  2. Raise PR to ‘master’ after dev testing on the feature branch.

  3. Once merged to master, cherry-pick the commit id to the 'develop' branch.

  4. Provide both master and develop branch builds to the QA team.

 

Do’s and Dont’s while working with EGOV UI

DO’s

  • Always take a pull before doing any changes.

  • All the commits should be tagged with Jira Tickets - ID and description.

  • Frequently keep develop branch up-to-date with the master branch.

  • Resolve any conflicts before pushing to the origin/branch.

  • Once any feature/issue is fixed, the unit test must be done in the feature branch locally and then in the dev environment as a dev sign-off step.

  • Make sure while giving builds to the QA team, the corresponding Ticket ID is marked “DONE“.

  • Delete all the unused branches on a frequent basis.

  • Have a look at the Security guidelines Security Guidelines Handbook

DONT’s

  • Do not give random branch names and random commit messages.

  • Do not push the commits without resolving conflicts.

  • Do not just test locally without testing in the dev environment and give dev sign-off.

  • Do not move the ticket status to “DONE” unless it's tested in dev and builds are shared.

  • Do not merge code to master or develop branches without reviewing the code.

  • Do not push the changes unless the branch you working on is up-to-date with the remote branch.

  • Do not copy any codebase of any module and junk the folder with unused codes.


Localization Naming Convention:

  • Always use only localization codes, don't hard code direct messages in the code.

  • if any hardcoded messages then they won’t be translated into the user-selected language

  • Use the t() function to translate the code to the Localised message.

  • The Localisation code should not contain space and be lowercase.

     

    Localization Search call based on Module wise

    curl --location --request POST 'https://dev.digit.org/localization/messages/v1/_search?locale=en_IN&tenantId=pb&module=rainmaker-bnd' \ --header 'Content-Type: application/json' \ --data-raw '{ "RequestInfo": { "apiId" : "emp", "ver" : "1.0", "ts" : "10-03-2017 00:00:00", "action" : "create", "did" : "1", "key" : "abcdkey", "msgId" : "20170310130900", "requesterId" : "rajesh", "authToken" : "06afae01-c9d8-49b3-8f75-f10ba5a4ee62", "userInfo" : { "id" : 1 } }, "tenantId" : "pb" }'

 

 

Troubleshooting:

Troubleshoot using Browser network Tab