opengovsg / askgovsg Goto Github PK

We currently do not know when a user decides to send enquiries to an agency, which is important since that helps us to understand when users are unable to find answers for the questions they have. Add Google Analytics events and trigger them at appropriate points in the user flow in the frontend

APIs are a contract between the frontend and backend. This means that the client and server should agree on the shape of every API. In order to ensure that the frontend and backend agree on the API shapes without duplicating code, it makes sense for API types to be shared between the frontend and backend.

Implementing this will involve the following steps:

1. Edit the build pipeline to accommodate shared code between the client and server directories.
2. Create base types for each database table and have the model types inherit from the shared base types.
3. Create types for each API's return shape by composing the base types, and use these types in both the frontend services (which call the API) and the backend controllers (which serve the responses).

Given that this repo is now public, we should take advantage of as much free tooling as possible.

Moving our CI from Travis to GitHub Actions would allow us to use much better build infra,
and free Travis up for FormSG and Postman.

react-helmet no longer works well with React 16, using the deprecated UNSAFE_componentWillMount (see nfl/react-helmet#548). The library is no longer maintained by the NFL, and has been dropped by the community in favour of react-helmet-async, written by @staylor of the NYT.

Work will chiefly centre around the following:

responseHandler provides very little value, and the patterns involving its use in the codebase are dated and confusing. Remove responseHandler and its invocations, reshaping responses as appropriate.

Downloading and setting up sql locally is time consuming for new developers and has been known to have issues.

Use docker compose instead for a smoother developer experience, and to allow for the addition of future services in future (eg, localstack and maildev)

Currently, we use an Email Us with mailto:. Changing this to a form where a user fills up gives us the following benefits:

• As a user is typing the question, we can show other already answered questions (like StackOverflow), so that user can refer to those and get their answers faster.
• We can also store what questions users are asking for further analysis (e.g. are these new questions that we should get agencies to create FAQs for, or existing questions such that users are not searching)

Doesn't have to be the actual logo yet, can just be in text form just like "Help Center" now. Continue to include the "alpha".

Some of the backend controllers are typed incorrectly. express middleware functions should be typed as RequestHandler (can import from ‘express’) and one should always supply generic type arguments to specify the shape of the route params, response body, request body and query params.

Rationale

If you go to getSingleAgency and try to access req.body.nonsense, req.query.nonsense or req.params.nonsense, you can see that they are all either any or string, even though we know that these are undefined. this is because there are no generic type arguments to Request and Response, so everything defaults to any or string.

Example

https://github.com/opengovsg/FormSG/blob/f4db38bde03c59ec0b8856bfed08f0f31bdcb538/src/app/modules/submission/email-submission/email-submission.controller.ts#L34-L38

When importing questions from FAQ sites to our product, hyperlinks lose their redirecting ability, as seen in here:
https://staging.help.gov.sg/questions/87

Add a feature to automatically detect hyperlinks and make it clickable by default.

To limit the number of source locations that AskGov needs to run, all external <script> entries in index.html should be examined and removed or replaced with equivalent npm entries, with corresponding changes to the frontend. Relevant lines in Content Security Policy are also to be removed.

Lines to be removed include:

There are currently two prevailing policies used to manage content:

• Answers can be edited by users whose agency tags intersect with those found on the post
• Posts can only be edited by users with the same exact set of tags as the post's tags

One of these policies should be chosen, and implemented throughout the codebase

Describe the bug
npm run server no longer works because it depends on docker, specifically the db. So to develop the backend, npm run dev is still needed. This makes the readme misleading as new users will think npm run server is all they need to work on the backend.

responseHandler provides very little value, and the patterns involving its use in the codebase are dated and confusing. Remove responseHandler and its invocations, reshaping responses as appropriate.

To reproduce

• Visit the page for ParkingSG
• Search for ticket and press Enter

Observed

• Search results come from across agencies

Expected

• Search results should be specific to agency

Describe the bug
Client makes two request to the server for /posts, even after adding pagination.

This is because the searchbox component makes a query for the whole list of post, which results in duplicated query for post (one by searchbox, another by the questionList). This results in a not insignificant size of response, which will only grow as the question list increases.

Expected behavior
Remove the query for the whole list of post. Since search only requires the title of the post, consider adding another endpoint (preferred), or sending the search query to the server.

Screenshots

Let's sort this alphabetically first. Can revisit in future if it should be by popularity or recency.

To ensure proper separation of concerns between controller and biz logic, AuthService and UserService should hold their relevant Sequelize models.

The opportunity should also be taken to clean up as follows:

• Controller handlers should be typed
• Unit tests should also be provided for coverage

we should probably get all of the icon packages from one source. Right now its 3/4 different one with no clear preferred way.

Originally posted by @nauynix in #12 (comment)

JWT for authentication has several issues, highlighted http://cryto.net/~joepie91/blog/2016/06/13/stop-using-jwt-for-sessions/. Replace JWT with session tokens generated by server using express-session, and still using the token table.

The NotFound page currently consists of plain React and DOM elements, and has unwanted CSS artifacts from the codebase we forked from. As a minimum, a faithful reproduction using Chakra and without box__ghost CSS should be done. Optionally, the page should be redesigned.

[WIP] to first determine how big a problem this is.

Resolution: 312x570

Fullstory link.

Problem

Current session lasts about 1 hour. Agency user is automatically logged out after that, which prevents user from creating/editing questions. This problem is difficult for user to recognise given that

1. agency and citizen UI have very subtle differences by design
2. error message is not clear.

Solution

• Keep agency user logged in while they are active
• Make error messages clearer (e.g. Please relogin and try again)

Possible Implementation

• Implement JWT refresh tokens https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them/
• Implement session-based authentication

Steps to reproduce:

1. Go to https://ask.gov.sg/agency/parkingsg on mobile
2. Scroll to the bottom of the page, click on the last question
3. /questions is loaded, but scrolled to the bottom of the page

Ideal behaviour:
Load /questions at the top of the page.

Screenshots:
Click on my car has multiple drivers....

Loads the below, user needs to scroll up.

Problem

Currently, our primary colour is the "OGP Blue". This may not fit so well with some of the agency branding colours.

Solution:

Allow Agency to change primary colour based on a fixed palette (like FormSG).

add Google Analytics events that capture search result when user taps outside of searchbox and continues scrolling.

Describe the bug
Submit an Enquiry modal form is not optimised for mobile [doesn't work for either android / iOS]

To Reproduce
Steps to reproduce the behavior:

1. On mobile, go to 'https://ask.gov.sg/agency/parkingsg'
2. Click on 'Submit an Enquiry'
3. See error

Expected behavior
Modal should be within phone screen

Screenshots

Following on from our migration from redux to react-query, type API frontend services which currently return Promise<unknown>

Feedback from IPOS.

Email group should consist of users currently in [email protected].

Email correspondence – one of our colleagues mentioned that the “@open.gov.sg” may create a wrong impression that their email is “open”. Understand that it’s part of the Open Gov products from GovTech. For your consideration.

• [backend] paginate APIs
• [frontend] paginate home page

When navigating from agency page to post detail page, clicking on topic tag will scope to show posts with that topic tag AND agency tag eg. visit post of 'Am I entitled to a 10-minute grace period after I have parked via the app?' Clicking start-session should navigate to /agency/parkingsg?tags=start-session, including parkingsg in the scope. As it is, it navigates to ?tags=start-session

Screenshots

Note the URL
BEFORE

AFTER

When navigating AskGov midway scroll, the new page reloads in the same scroll position instead of going back to the top
Disorientating for user.

Expected behaviour:
New page scroll position should always load from the top

First take suggests it is an encoding issue as other multi word tags like TOPIC TAG 1 work correctly when clicking on tag to see all questions under topic tag as discovered by @barnettx

Replacing & with %26 in the query string fixes it.

Describe the bug
Adding any hyperlink during creating or editing form leads back to home page after clicking add.

Expected behavior
Should add the link and stay on the same page.

Problem

Users who land on ask.gov.sg should see a landing page so that they know what AskGov is about.

Currently, they go to a FAQ page that has questions from all agencies. While this is envisioned as what Phase 2 will be, it is currently and not our priority. Putting up a simple page provides users with information and reduces confusion.

Solution

Can be a single pager like https://pay.gov.sg/.

Will be useful for hosting our privacy policy and terms of use.

Google Analytics

Stats from 6-12 July 2021

When a user is not authenticated, axios throws an error that is uncaught. While there is no noticeable effect on the user, for developers working with Firefox it can be noticeably disruptive. This error should be duly caught and handled.

Advantages of ModelDefined:

• Allows you to define interfaces which specify the object shape without extending from Model
• Allows you to specify which attributes the model will have once it is created, and which attributes must be specified at the point of creation (e.g. if a model has a default value for a particular attribute, it will have that value once it is created but it doesn't need to be specified at the point of creation)

Describe the bug
When the user clicks on a specific question, the client makes a request to posts/:id to retrieve the post and then posts/answers/:id for the answers, even though both of the request data is already stored when the user fetches for posts/. This means there are two extra requests made.

This function was used in the frontend for sorting, but has fallen out of use, with more recent updates to the codebase favouring sorting to be done in the backend. Work should be done to remove this, along with the Sequelize literals that it was dependent on

1. <title>

2. Login page

User should be able to view and go to related questions in case the current one does not answer their question, or if they just want to read up more about the topic.

Logic

show top 3 questions (by popularity) with as many similar tags as possible

this caters to users who did not attempt to search the site before submitting their question.

downside: for a user who has already searched, this is potentially annoying because we are showing the same answers that are not helpful for them.

Given that our primary goal is to reduce repeat questions to agency users, we will build this in and monitor results.

helpgovsg/server/modules/post/post.service.ts
Lines 312 to 322 in c23acfb

views currently increment on every GET of a post. Issues:

• If the same user navigates multiple times to a page, views increments
• We refetch questions from the server to keep the data fresh eg. if someone navigates away from the browser then returns, we GET the post again.

Currently our otp email is very bare. Can follow FormSG's email:

Set max px width or max text count length to optimise readability for desktop / tablet