Show project scope form as card on the top of the project plan tab

[vikasrohit]

Currently we are showing the scope details of the project in a separate tab. This feature is to move scope details of the project to the Project Plan tab as a collapse card. The card should be expandable and in the expanded state it should look like the final summary screen which we are showing now when user is creating a new project.

fyi @maxceem @RishiRajSahu

[maxceem]

@vikasrohit How should the collapsed card look like? Like this?

If so, how should we show it in case we cannot estimate as described in the issue https://github.com/appirio-tech/connect-app/issues/3009 ?

[vikasrohit]

Yes, this is the collapsed view of the scope component and when clicked, it would render in the top right corner in its full form (which is mostly what we have in our final summary screen on project creation). And for the cases identified by #3009, we don't need to show this component at all any where.

[vikasrohit]

One more thing @maxceem, I would like to keep the changes for this issue in a separate branch then a common CF branch so that we can include this feature in our release as per our will depending on the dates for new smart scope forms going live.

[maxceem]

So when we open it should look like this inside this card:

@vikasrohit

1. Can we edit project scope here? As currently, we can do it on the summary page.

2. it would render in the top right corner in its full form

   As I understand we should render this card collapsed and expanded on top of the topics here

   

3. After we clicked the collapsed card and expanded it, how do we collapse it back?

[maxceem]

@vikasrohit

4. To confirm: should we show it on the Dashboard or Project Plan tab?

[vikasrohit]

1. Let it be editable for now until we implement #2970
2. Nopes, I would like to render it as per new styles which I shared with you on Slack. It would not simply expand in place. Rather we need to show an overlay pivoted at top right corner of the viewport. Something like this

3. As per suggested UI above in 2, it should be the close button in the top right which should collapse it back.

4. For now it would be at both pages, in near future we are going to merge both the tabs.

[maxceem]

@vikasrohit I’ve noticed that the new designs tend to be like material design. Do you think it could make sense to use an existent library for material design and only style the components our way?

For example, material designs have:

• buttons https://material-ui.com/demos/buttons/
• bars https://material-ui.com/demos/app-bar/
• drawers https://material-ui.com/demos/drawers/
• lists https://material-ui.com/demos/drawers/
• badges https://material-ui.com/demos/badges/

All these elements we have in a new design and they look pretty similar to the material design

It looks like components may be included separately from this lib, see

So we may include only the components we need.

I think what we can do here is to create a new folder: src/components/meterial inside Connect App. And create proxy components for each component we need from the material design. It would make us independent from the lib. Also, we would apply our custom styles and colors in these proxy components.

Ideally though, such components should be put to the react-components and reused from there. Though we can strat putting them to Connect App first for more rapid development.

What do you think?

[vikasrohit]

Agreed with your views on material designs and I would like to keep the components in react-components from starting even though it slows us down by couple of days.

However, currently we don't have to focus on the actual designs/styles in this issue or any issue that is currently in flight for us. Very soon we have to start efforts for applying these new designs to our product though.

[vikasrohit]

I just realized that your intent is to start using these libraries for new components like drawers. In that case, yes start using that library for drawers as we don't have that component yet in our react-components lib and please store the proxy component in react-components itself.

[maxceem]

However, currently we don't have to focus on the actual designs/styles in this issue or any issue that is currently in flight for us. Very soon we have to start efforts for applying these new designs to our product though.

Another proposition to consider: what if start implementing the new styles from now?

I mean if we follow exactly the new design including colors? The reasons for this, if we don't follow designs exactly, then the resulting design we would get would be just approximate and we would end up having styles mismatches anyway. And after it could be hard to fix it, as it may be hard to notice small differences. If we start implementing the style of new components exactly from the beginning it would be easier to control, that it matches the design.

[vikasrohit]

Understand that concern @maxceem, however, I think problem with adopting new colors would be that some components would look in old colors and other in new colors. What I want is that we adopt for new designs except colors mostly and use appropriate color from current color palette e.g. instead of new green based primary color, we can still reuse our current primary blue based colors.

[maxceem]

@vikasrohit I'm trying to sum up this issue, and here are a few questions.

1. on the Dashboard and Project Plan tab we should show the existent ProjectEstimation component

   

   Currently, it looks like this:

   

   1. Should we update the design of this component to match the new design, or keep like it is now?

2. Once clicked we should open the drawer on the right which looks like this:

   

   What should be displayed inside the drawer?

   1. A summary page like this:

      

   2. The same what we display on the Scope tab:

      

   3. Note, that for old project we don't have a summary page and the spec tab looks like this for them:

      

   So what we do here easily is to display the inner part of the Scope tab, which would look like 2 for new project and like 3 for old projects.

3. Is it possible to get the icon files which are used in the new desgin. In particular, we need the cross for the close button at the moment. But it would good to have all the new icons for the redesign.

[vikasrohit]

1. Keep the design as is for the summary, just encapsulate in a card and exclude the the text Our estimate is from $16000.
2. Please show summary wherever possible, otherwise the the inner content of the scope form.
3. Yes, you can extract the icons from the marvel links (append /handoff in the URLs) I shared you on Slack.

[maxceem]

Thanks, @vikasrohit for clarifications.

A couple of more questions:

1. As per the design, when we open Drawer on the right there is light overlay color which covers the content https://marvelapp.com/3h6bdfd/screen/56039326/handoff

   1. it doesn't cover the top toolbar, which is understandable.
   2. as per design it also doesn't cover the left sidebar, just want to confirm that this is an intentional requirement. So when we have the left sidebar, drawer should cover it with an overlay color. So currently it should look like this https://monosnap.com/file/BMmnEfj87DZVMH89Q5u11sWyfb0uME

2. As I understand we should be able to close Drawer only if we click the Close button, not by clicking the overlay background.

3. Just to confirm. The Drawer should be closed, when we navigate to any other page. And if we come back we should click some button again to open the Drawer again.

[maxceem]

@vikasrohit previously we've agreed, that it would be good to use an existent library for material components, rather than reimplementing them, as the new design uses a lot of them.

I've tried to make some POC using the library https://material-ui.com/demos/drawers/ and it appears that it requires React version 16.3+ even though it's not listed in package.json.

Do you think it makes sense to try to migrate both react-components and connect-app repositories to the React 16+? It would take some time but after we could reuse existent components from material-ui library, which should be faster than reimplementing them and less prone to issues.

Note, that Topcoder Community App and tc-react-utils which we use as dependency use React 16+.

There is an old issue for this migration https://github.com/appirio-tech/connect-app/issues/1564 And some other issues which depend on migration to React 16 https://github.com/appirio-tech/connect-app/issues/2120 and https://github.com/appirio-tech/connect-app/issues/1690.

[vikasrohit]

Go ahead after this CF to get React upgraded to 16.x to be in sync with other topcoder apps. How long do you think it could take? I am asking from the point of view of having it released in upcoming release (not sure about the dates yet) and delaying the the task for this issue.

[vikasrohit]

for your previous questions @maxceem, all your understandings are correct about the drawer behaviour and leave the side bar out of overlay as per design.

[maxceem]

Go ahead after this CF to get React upgraded to 16.x to be in sync with other topcoder apps. How long do you think it could take? I am asking from the point of view of having it released in upcoming release (not sure about the dates yet) and delaying the the task for this issue.

I think we can start migrating react-components rigth now first and after we would migrate Connect App. I would expect that it may take a week, but will try to complete it till the end of this week if it goes well.

[maxceem]

@vikasrohit just remembered, what can bring us problem during migration is the third-party libraries we are using. So the actual time would depend on them, and this quite hard to predict.

[vikasrohit]

Yes, good point. I think we should start the efforts for upgrade in parallel, however, I think it would take some time. So, we should prepare alternative approach for getting the changes for the current task done. So, I would suggest either implement our custom logic in the proxy component that we talked about and later on use material ui library when we are ready. Or can we try some old version of the material ui library which is compatible with our react version?

[maxceem]

Or can we try some old version of the material ui library which is compatible with our react version?

Great idea. I've checked it out, it works with the old 0.22 version https://monosnap.com/file/lBmIHCKMGNO7RcfG353WBU6MLJU7pi. So we can use the old version of the material-ui and after migrate to the new on together with version of React.

And it would be still easier than reimplementing components ourself.

[maxceem]

@vikasrohit before I had a concern as what to show in a Drawer project specification or project summary.

You suggested:

Please show summary wherever possible, otherwise the the inner content of the scope form.

I've just realized, that to open this drawer we should click Estimation component, but the estimation component is only shown for new projects which have a summary section. Do you think we can keep the logic simple and always show a summary section Or do you think there could be situations when we want to open this drawer for the old project which doesn't have a summary section? So in such case we better support showing the specification for old projects in the drawer.

[vikasrohit]

Do you think we can keep the logic simple and always show a summary section I didn't get it. I mean how can we show the summary for old project?

IMO, for old projects, we might need to keep the Scope tab for old projects and don't show the summary component on the dashboard for them. If you think, we have a way to simulate the summary section for old projects, then we can better keep it on dashboard for old projects and then open the standard scope form in the drawer when user clicks on it.

[maxceem]

@vikasrohit we've implemented showing spec/specification or summary page in the Drawer:

• if the project has a summary section - show summary, otherwise, show like scope/specification tab

The only thing we are suppose to show this Drawer when we click on the project estimation component. But estimation component is shown only for the projects where it's possible to calculate it. So we should create some way to open this drawer for the cases where estimation is not possible to calculate.

You may check out how it works locally now, using feature/redesign branch. Note, for now, there is Toggle Drawer button for demo. Will merge it with the estimation component after decide on what to do when the estimation is not shown.

For testings:

• Example project which has estimation calculated http://local.topcoder-dev.com:3000/projects/8103
• Example project which CANNOT calculate estimation http://local.topcoder-dev.com:3000/projects/8113
• Example of old v2 project which doesn't have an estimation component http://local.topcoder-dev.com:3000/projects/5000

[vikasrohit]

Thanks @maxceem Looking good from the image. I think we can show the normal Scope/Spec tab in cases where it is not possible to show the estimation component. Do you think there would be any issues with that approach? Btw, we would confirm it with the product team as well.

[maxceem]

@vikasrohit I'm thinking about new design where there is no scope/specification tab anymore. Should we add a new option Scope to the new sidebar menu to handle for such projects?

[vikasrohit]

Yep, we have to have that backward compatibility.

[vikasrohit]

Verified, working as per requirements on production.