hugogresse / open-feedback Goto Github PK

On Admin, Talks should be editable to change the:

• talk name
• date + hour
• category/label
• speaker(s)

hoverboardv2 event type will not be able to edit those information, provide them read only + offer some explaination about why they are readonly.

Design: https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=88%3A16

Allow any users connected to the admin to create from zero a new event.
He will have to:

1. Select the project name
2. Fill the additional infos (schedule link, website link, smallLogo, favicon, admin email)

Next he should be asked with tho option before validation the new project:

1. Recommenced setup (in this case the data will stored inside firestore, project type will be native).
2. Advanced:
   • with Hoverboardv2
   • with json link

Upon 1. selection, you can create the event directly
Upon 2. selection, you need to ask addtional infor for each type:
For hoverboardv2:

firebaseConfig : {
    apiKey: "",
    databaseURL: "",
    projectId: ""
}

For json link: the link of the json file. When filled, do a separate process to validate the formating of the file content and allow the user to create the project only if well formatted. Probably indicate the format too somewhere.

Design not ready, cc @LaurianeGresse

the current OpenFeedback openpage (https://openfeedback.io) is lacking a ton of stuff.
We need to:

• List what we want to promote on OF
• Write the wording
• Design it
• Integrate it

When a single session is open so the user can vote directly on it withotu browsing all the sessions, it only load the current session. WHen the user go back to the list of all sessions, only the current is loaded before everything load. This could be improved by loading all sessions after the single one is loaded.

When a console.error is report within a PR build (either in Cypress or classic build), the PR should report a failure.

The function from functions folder are written in JS.
The goal is to migrate them to Typescript & probably add unit test on them.

This is the next TECH issue to be done

Following this guide: GoogleChrome/lighthouse-ci@b23f2d6

When deleting a speaker, we should check if it's linked to other talk and confirm that from the user:
The speaker XXXX is linked to 3 talks: talk1, talk2, talk3. Are you sure you want to delete him?

By allowing any event to be embeded into the organizer website within their own schedule, it reduce the cost of having a different website.
This should be fairly doable.

This will probably be done for the next Sunny Tech edition July 2020 or June 2021

TODO:

• remove header/footer when embed into an iframe
• maybe allow iframe embeding (???)
• find a way to have some OpenFeedback branding that could go smoothly with any host website.

From https://twitter.com/mOoot/status/1199372443560873984

Brave seems to block login with Google on the admin.

This need more check, is other login method not working too?

The feedback app need to be greatly reduced in size (currently around 1.1 / 1.4 mB unzipped.

Possible improvement

• Lodash 30ko, only use for orderBy in projectSelectors.js
• Moment 50 ko :/ > it can probably be removed in favor of Dayjs or Luxon.
• firebase auth: 160ko, used only for anonymous sign in, maybe e could built a custom auth system based ok cookie + uid? Firebase team is currently working on reducing the bundle size & also plan to support tree shacking which should help reduce this issue. See here
• material ui is 170ko
• styled component is 23 ko, remove it from the Feedback app
• switch to Preact ?

using npx source-map-explorer static/

The docs is build by Docz. We could migrate it to Storybook to have one doc with the setup, installation etc + the component api/demo.

On Admin, Speakers should be editable to change the:

• avatar/image url
• name
• social link

hoverboardv2 event type will not be able to edit those information, provide them read only + offer some explaination about why they are readonly.

Design: https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=91%3A54

The event creator or other admin should be able to add other member who will have the same rights as the other on this event.

This feature is ready on Firestore + security (project.members[] is already an array of user id) but need the frontend to be done.

Design: https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=110%3A1621
TODO:

• Design + email design
• Base admin page listing the admin
• User table with createdAt, updatedAt, displayName, email, photoURL, uid + security rules in order to be able to retrieve it's name, email, photoURL
• When user sign in, we add it to the user table
• Email setup
• Invite system: cloud function + email + UI

• 404 is shortly display after creating a project
• missing speakers chip background not same as the others

Following #8 and #79, we should allow a third setup mode namely jsonlink where all the data will be stored on another server in a json format.

The feedback client need to be adjusted to fetch this data and put it in the reducer. Don't create the second firebase instance in those case. Also when working on this issue, if #79 is not closed yet, think that there will be another setup mode that will also change the way the talks/speakers/schedule is fetched.

The format of the json should be shown to the user.
When the user will enter the json link/url, validate the link content so it match the format.

To specs:
2. Additional design for the setup cc @LaurianeGresse

To Do:

• Support feedback JSON url setup type #88
• New admin UI to edit the JSON Url
• JSON Url validator

JSON Model

{
	"sessions": {
		"2": {
			"description": "Une conférence pou...",
			"speakers": ["lhwORZ2dSGbF1OG6VkfbjkOCzR12"],
			"tags": ["Architecture & Paradigme"],
			"title": "Entre industrialisation et artisanat, le métier de développeur",
			"id": "2",
			"startTime": "2019-06-27T16:20:00+02:00",
			"endTime": "2019-06-27T17:10:00+02:00",
			"trackTitle": "Amphi D"
		},
		"30": {
			"description": "Scaling your o...",
			"speakers": ["vAQguQPbehbyRxkDuXzJ9HSHqVS2"],
			"tags": ["Random"],
			"title": "Scaling on-call",
			"id": "30",
			"startTime": "2019-06-27T18:00:00+02:00",
			"endTime": "2019-06-27T18:20:00+02:00",
			"trackTitle": "Amphi D"
		}
	},
	"speakers": {
		"zQ0mhj745ZgtNDL3QL6pVT316ai2": {
			"company": "Suricats Consulting",
			"name": "Olivier PONCET",
			"photoUrl": "https://avatars2.githubusercontent.com/u/29702924?v=4",
			"socials": [{
				"icon": "twitter",
				"link": "https://twitter.com/ponceto91",
				"name": "Twitter"
			}],
			"id": "zQ0mhj745ZgtNDL3QL6pVT316ai2"
		}
	}
}

Current is using Bitrise.io as build CI&CD, we could probably move to GitHub Action to have better perf + configuration in the project + future improvement.

Status: Waiting HugoGresse account to have GitHub Action access (in closed beta for the moment)

The vote UI should be tested and covered using Cypress.io or similar tools to have end to end non-regression test.

When toggling the "Enable Comment" switch in the Admin/VotingForm, the change is only saved locally and the "Save" button need to be triggered for the change to be persisted, it should not as the switch is outside of the "Save" scope visually.

We should use css media queries level 5 prefer color scheme darkbor light to change the feedback theme. We also need to create it at the same time...

Selector & reducer may be tested in first.
Next could be E2E to also cover cloud function though it may be tested using the Firebase emulator

If we press Enter, would be great to valid the current line, add a new empty one and add the focus to the first input of this new line.

Admin home page of an event should display statistics of the event is it has started or is finished.

Design: https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=84%3A81

This is a major feature.
The goal is to store speaker, schedule & talks inside OpenFeedback db.

Currently, the client is either gathering data to a second Firestore (from Hoverboard v2 db) or an external JSON. OpenFeedback firebase account is used for the login, votes, functions & so.

Next: we should create another project type: openfeedback where everything is stored inside OpenFeedback. The speakers/schedule/talks will need to be saved inside OpenFeedback firestore.

Work to be done on that:

• Database model + security rules
• Work on the feedback part: fetch data from OpenFeedback firestore (= create a new api in src/core/setupType.
• Admin: Speaker administration : create
• Admin: Speaker administration : update
• Admin: Speaker administration : delete
• Admin: Talk + schedule administration : create
• Admin: Talk + schedule administration : update
• Admin: Talk + schedule administration : delete
• Admin: Setup UI for new project and when editing project Setup.
• Admin: Setup setting screen

Designs https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=92%3A1167

To protect your project from abuse, Firebase limits the number of new email/password and anonymous sign-ups that your application can have from the same IP address in a short period of time. You can request and schedule temporary changes to this quota from the Firebase console.

We need to check this and report the issue on the service admin.

TODO:

• Setup a new cloud functions plugged to OpsGenie + documentaion for installation
• When quota reached is catched, report it to this function
• When an error is catched by ErrorBoundaryWithGame, report it too.

1. Navigate to Feedback part
2. You are now anonymously sign in
3. Navigate to /admin
4. Login page need to be refreshed to show the button because the user was signout as it need a real account, not an anonymous

Would be great to have a copy to clipboard button in this collapsible panel .

Exepected behavior, admin Login.js does signOut the user, which is ok but the signOut action push on the same page if on /admin/ thus doing nothing

Submit button should be disable on form error + error displayed more clearly

Setup FIrebase Firestore backup every day or so.

Some inspiration: https://t.co/hb2qWrZSsg?amp=1

The whole codebase should be written in similar style and using the same components/library.

Styled Component

Styled Component should be used mostly for base component like button, generic layout reused outside of one specific pages.

Grid

Material UI Grid should be used for most basic layout. Styled component should be used if the target design is not possible using Grid or if the overhead is much lower (in term of code complexity/readability & verbosity)

MaterialUI / MUI

Material UI should be used only for layout parts & low design / generic element like checkboxes. Button for exemple is specific for OpenFeedback thus MUI buttons shouldn't be used. Plus it's design are different for admin & feedback pages.

File architecture

Features should be regrouped together inside the same folder. So reducers, selectors, components used for a given feature should live inside the same folder.

Common action or selector from the admin and the feedback pages should live inside the src/core

Common components for admin or feedback should live inside the components folder like src/admin/components/OFButton.js.

Because the design of the admin and the feedback are different, they should mostly don't share components.

About this

This is just a dump of my mind regarding the organisation of the project. Everyone can contribute to those guidelines to improve them. They may probably also evolve with the time.

Using react componentDidCatch, report the error to the owner service (from env).
It should send an email, we may use some webservices to do so.

Speaker & VotingForm is built from Table.
We need to use the same structure as the Talks screen, meaning OFListItem & OFListHeader.

TODO:

• speaker refacto
• voting form refacto

We should use React Lazy and suspense to import the AdminApp.
We need to check the improvement on the bundle size too.

Setup base layout & component following the prototype https://www.figma.com/proto/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=83%3A15&scaling=min-zoom

Include:

• menu
• project switcher
• Header

Currently, voteItems are stored in a collection within the project document.
This make it difficult to fetch requiring additional network request to read & write. It's also somewhat useless as there will not be big (like 50-100) voteItem by project and the data stored are very lightweight.

Gain:

• faster feedback loading
• reducing Firestore cost by removing one read request for every woter

Cost:

• refacto :p

TODO:

• migration script
• new model
• read query from frontend
• read-write query for the admin + id generation.

When clicking on a speaker from the admin talk list, we should filter the list by the speaker name.

we could also improve the project creation to stop displaying shortly the 404 page

When speaking about a talk, two word are used in the base code: "talk" and "session".

The basecode should be uniformised to keep "Talk", while constant string used to query db for hoverboard should stay named "session"

Event admin cannot create/edit vote voting form but it's already configurable on the database itself.

Design: https://www.figma.com/file/EivIdkyPELnGs416ND0C2bWG/Open-feedback?node-id=92%3A675

example: https://openfeedback.io/admin/gjregjioreijogjiorejiogriojegjiorejiogjoirejiogijorejg/

Step to reproduce:

1. Login with GitHub (user has not been using github before = new account)
2. Confirm email from te email received
3. Is redirected to OF Admin
4. Projet list failed to load beause he is not verified yet.

We can probably reproduce it on Email/Pwd login too.

TO check:

• new github account with last fix
• changing redirect github from firebaseapp to of real domain
• check google method redirect url

It will be nice to be able to import the talks & speakers from a json within OpenFeedback and then store them in OpenFeedback as it's own data.

react-dom.development.js:12050 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move code with side effects to componentDidMount, and set initial state in the constructor.
* Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: AdminApp

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Area, AreaChart
printWarning @ react-dom.development.js:12050

and other components too

We should allow the admin to moderate the comment and delete / hide them
We can also add a report button on the comment directly that notify the admins.

TODO:

• user interface to delete comment

Depends on #55 where the email setup will be done

Prevent a bug on the first vote

TODO :

• One default color
• Created server timestamp

Lighthouse CI has just been released, and we need to add it on each PR to measure impactful change in the code.

This should also be a great time to measure & comapre on each PR the bundle size in production.

Following MaterialUI v4 release in May 2019, this projectn eed to be migrated to it.
Following changelog and migration notice show that it should not be a lot of issue with the migration.

Migration can follow
migration guide: https://material-ui.com/guides/migration-v3/
migration helper: https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#theme-spacing-api

Email verify on the admin prevent the user to see anything.
He should be able at least to see his email, username, a logout button and a resend email verification button.
We should also refactor the login to use function component.