[FEAT] Create Team CTA #539

VipinDevelops · 2024-09-07T16:05:43Z

Linked Issue(s)

#529
#537

Acceptance Criteria fulfillment

Add a button that redirects to the team page with create query
Consume the query in the team Page and show create team component

Proposed changes (including videos or screenshots)

Screencast.from.2024-09-09.13-24-32.webm

VipinDevelops · 2024-09-07T16:18:01Z

Hey @e-for-eshaan

Can you Please take a look ?
Thanks :)

e-for-eshaan · 2024-09-08T04:16:28Z

asymmetric design, looks a bit off
suggestions:

make the button to be full width of the selector-popover
make padding, margins and spacings to be uniform (above the button)
use <Button variant="outlined"/>. My hopes are that it might look better than the current design

e-for-eshaan · 2024-09-08T04:19:51Z

web-server/src/components/TeamsList.tsx

+      showCreate.true();
+      router.replace(router.pathname, '');
+    }
+  }, [router, router.query.create, showCreate]);


see, you only need to showCreate.true in your dependency array, but my guess is linter asked you to add the entire showCreate object.

instead of calling showCreate.true(), use depFn(showCreate, true),

update the dependency array to include showCreate.true, instead of showCreate

https://middle-out-group.slack.com/archives/C06U2M1UEA0/p1724305199044449

e-for-eshaan · 2024-09-08T04:22:08Z

web-server/src/components/TeamSelector/TeamPopover.tsx

                  'We getting your teams together, but someone seems missing 🤔'
                )}
              </Scrollbar>
+              {apiTeams.length && (


if teams don't exists (length==0), then we DEFINITELY need to ask them to create teams

although, we already have reroutes in place that redirect to teams page, but still, your check is redundant

We already have this button that asks to create a team if there are no teams that's why I added this check to show this button only if we have some team already

I will update it to check for {apiTeams.length > 0 && ( BUTTON) }

oh, well i missed that. great, keep the current condition,

don't add direct numbers as conditional checks
apiTeams.length would render a 0 on false

can convert to Boolean(apiTeams.length)
what you said {apiTeams.length > 0 && ( BUTTON) }

VipinDevelops · 2024-09-08T06:38:08Z

asymmetric design, looks a bit off suggestions:

make the button to be full width of the selector-popover

make padding, margins and spacings to be uniform (above the button)

use <Button variant="outlined"/>. My hopes are that it might look better than the current design

Hey, @e-for-eshaan Looks Good now?

VipinDevelops · 2024-09-08T07:44:18Z

Hey @e-for-eshaan I have also solved #537 in this PR
In this PR as well There Is some type assertion Because payload.team was unknow

e-for-eshaan · 2024-09-08T07:46:47Z

yes this happens when consuming the response from dispatch pomise.
use this as the .then callback

(res: any) => {
if(res.meta.requestStatus !== 'rejected')
/*...your code...*/
}

VipinDevelops · 2024-09-08T08:33:21Z

Hey @e-for-eshaan You mean to handle this call inside .then right?
I am already doing it inside that even here the res.payload type exist but .team in unknown

e-for-eshaan · 2024-09-08T08:35:42Z

we typecast it to any

(res: any) => {}

that's what i was referring to in previous comment

VipinDevelops · 2024-09-08T08:36:57Z

okay so we are not sure about the response type here understood

VipinDevelops · 2024-09-08T08:41:02Z

@e-for-eshaan I have made the changes and here I didn't use the requestStatus check because we already had a check and where we returned early

e-for-eshaan · 2024-09-08T08:45:50Z

cool, i want you to check for data now

console.log a singleTeam when selecting from the teams selector

and console.log the response that you get after creating a team

are they the same type of object? does it need any more/fewer keys?

VipinDevelops · 2024-09-08T08:46:56Z

Sure Let me check last time I check it was same but lets see how it's different from other case

VipinDevelops · 2024-09-08T08:52:13Z

@e-for-eshaan This is what we get when we use the selector to update team

this is what we get from the response team

only difference is manager_id and is_deleted here

I don't think mangaer_id is a problem because manager_id is optional

VipinDevelops · 2024-09-08T08:53:10Z

also you can checkout complete working in the updated video above

VipinDevelops · 2024-09-08T09:09:21Z

I added the is_deleted in our response as well and obviously its just created so its not false

Response

Selector

VipinDevelops · 2024-09-08T09:12:45Z

@e-for-eshaan Please take a look let me know if anything else left to do

e-for-eshaan · 2024-09-08T09:19:46Z

it's not okay to assign selectedTeam in such an unsafe manner, might get troublesome later since it violates some basic assumptions.

How to approach this?

we have to find the team from the team-map we have in the redux state.
const teamMap = useSelector((state) => state.team.teams)
so now, the events that transpire will be:
- create team
- wait for the creation call to finish (and be successful). get this response's teamId (c-id)
- wait for the call that refreshes the teams maps
- find the c-id w.r.t this fresh team-map

e-for-eshaan · 2024-09-08T09:20:07Z

feel free to ask more questions!

e-for-eshaan · 2024-09-09T04:42:53Z

fetchTeamsAndRepos: this seems to be the function refreshing the teams-map
edit this function to return a promise-response (async await)
use a .then on this function
consume the teams payload for this function
definitely add checks on the requestStatus every time, whenever consuming directly from dispatch promises

VipinDevelops · 2024-09-09T05:02:54Z

Awesome I was doing the same thing last night I basically tried different ways thanks for suggestion @e-for-eshaan I will make suggested changes.

VipinDevelops · 2024-09-09T05:41:10Z

Have a look @e-for-eshaan

e-for-eshaan · 2024-09-09T06:02:56Z

jagged alignment, use <FlexBox centered>...</Flexbox>

e-for-eshaan · 2024-09-09T06:08:21Z

web-server/src/components/TeamSelector/TeamPopover.tsx

                )}
              </Scrollbar>
+              {Boolean(apiTeams.length) && (
+                <FlexBox marginTop={'10px'}>


make this mt={2}

looked better

e-for-eshaan · 2024-09-09T06:08:35Z

web-server/src/components/TeamSelector/TeamPopover.tsx

+              {Boolean(apiTeams.length) && (
+                <FlexBox marginTop={'10px'}>
+                  <Button fullWidth variant="outlined" onClick={addTeam}>
+                    <FlexBox>


e-for-eshaan · 2024-09-09T06:09:47Z

web-server/src/components/Teams/useTeamsConfig.tsx

+              const singleTeam = teams.find(
+                (team: Team) => team.id === createdTeam.id
+              );
+              dispatch(appSlice.actions.setSingleTeam([singleTeam]));


this check will never fail, but still,
if(singleTeam)

VipinDevelops · 2024-09-09T06:17:57Z

Have a Look @e-for-eshaan
Thanks for Quick Responses

VipinDevelops · 2024-09-09T06:20:10Z

This is how it looks with more than 4 teams

e-for-eshaan · 2024-09-09T07:43:14Z

Can you update the final video?

VipinDevelops · 2024-09-09T07:57:41Z

Can you update the final video?

Updated

e-for-eshaan · 2024-09-09T08:02:37Z

Good stuff, approving! 🎉

VipinDevelops · 2024-09-09T08:03:57Z

Good stuff, approving! 🎉

Thanks man 😊 🔥

VipinDevelops · 2024-09-09T08:11:18Z

Can we get this merged?

VipinDevelops added 3 commits September 7, 2024 21:31

add create button

3a40346

handle create query

f1af317

lint fix

a28b7fc

e-for-eshaan suggested changes Sep 8, 2024

View reviewed changes

button fix

9b9a1ca

VipinDevelops requested a review from e-for-eshaan September 8, 2024 06:48

VipinDevelops added 2 commits September 8, 2024 12:22

use boolean

d710000

select recent team

23d1e5d

fix type

274fd68

add is_deleted

42a3797

update fetch team method

dcf2e30

e-for-eshaan suggested changes Sep 9, 2024

View reviewed changes

ui changes

1fa9fcc

e-for-eshaan approved these changes Sep 9, 2024

View reviewed changes

e-for-eshaan merged commit aa0c53d into middlewarehq:main Sep 9, 2024
3 checks passed

e-for-eshaan mentioned this pull request Sep 10, 2024

Allow direct-link to view dora-metrics of a team #540

Closed

[FEAT] Create Team CTA #539

[FEAT] Create Team CTA #539

Uh oh!

Conversation

VipinDevelops commented Sep 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Linked Issue(s)

Acceptance Criteria fulfillment

Proposed changes (including videos or screenshots)

Uh oh!

VipinDevelops commented Sep 7, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

e-for-eshaan commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VipinDevelops Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

e-for-eshaan Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

e-for-eshaan commented Sep 8, 2024

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

e-for-eshaan commented Sep 8, 2024

Uh oh!

VipinDevelops commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

e-for-eshaan commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

VipinDevelops commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

VipinDevelops commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Response

Selector

Uh oh!

VipinDevelops commented Sep 8, 2024

Uh oh!

e-for-eshaan commented Sep 8, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

e-for-eshaan commented Sep 8, 2024

Uh oh!

e-for-eshaan commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VipinDevelops commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VipinDevelops commented Sep 9, 2024

Uh oh!

e-for-eshaan commented Sep 9, 2024

VipinDevelops commented Sep 7, 2024 •

edited

Loading

VipinDevelops commented Sep 7, 2024 •

edited

Loading

e-for-eshaan commented Sep 8, 2024 •

edited

Loading

VipinDevelops Sep 8, 2024 •

edited

Loading

e-for-eshaan Sep 8, 2024 •

edited

Loading

VipinDevelops commented Sep 8, 2024 •

edited

Loading

e-for-eshaan commented Sep 8, 2024 •

edited

Loading

VipinDevelops commented Sep 8, 2024 •

edited

Loading

VipinDevelops commented Sep 8, 2024 •

edited

Loading

e-for-eshaan commented Sep 8, 2024 •

edited

Loading

e-for-eshaan commented Sep 9, 2024 •

edited

Loading

VipinDevelops commented Sep 9, 2024 •

edited

Loading

VipinDevelops commented Sep 9, 2024 •

edited

Loading