fix: mobile event types and avatars by leog · Pull Request #11184 · calcom/cal.diy

leog · 2023-09-06T20:51:11Z

What does this PR do?

Mobile event types needed some love, empty personal event types now show an empty state, and also some subteam avatars were not loading for orgs.

Before	After

Same applies for desktop:

Before	After

Type of change

Bug fix (non-breaking change which fixes an issue)

How should this be tested?

Open event types page and shrink the window to get mobile treatment and see how it behaves like the pictures.

vercel · 2023-09-06T20:51:19Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ai	❌ Failed (Inspect)			Sep 6, 2023 9:00pm
api	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2023 9:00pm
cal-demo	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2023 9:00pm
dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2023 9:00pm

3 Ignored Deployments

Name	Status	Preview	Updated (UTC)
cal	⬜️ Ignored (Inspect)	Visit Preview	Sep 6, 2023 9:00pm
qa	⬜️ Ignored (Inspect)	Visit Preview	Sep 6, 2023 9:00pm
ui	⬜️ Ignored (Inspect)	Visit Preview	Sep 6, 2023 9:00pm

github-actions · 2023-09-06T20:51:25Z

Thank you for following the naming conventions! 🙏

leog · 2023-09-06T20:52:27Z

    name: item.profile.name ?? "",
-    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types",
-    avatar: item.profile.image ?? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${item.profile.slug}/avatar.png`,
+    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam",


We need to differentiate a team pathname+query from personal account so the horizontal tabs can correctly identify the active tab

leog · 2023-09-06T20:53:16Z

+    href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types?noTeam",
+    avatar: orgBranding
+      ? `${orgBranding.fullDomain}${item.teamId ? "/team" : ""}/${item.profile.slug}/avatar.png`
+      : item.profile.image ?? `${WEBAPP_URL + (item.teamId && "/team")}/${item.profile.slug}/avatar.png`,


This was preventing org subteams to render correctly

leog · 2023-09-06T20:53:27Z

    <div>
      <HorizontalTabs tabs={tabs} />
-      {events.length && (
+      {events.length > 0 ? (


This was showing a "0" in the UI

leog · 2023-09-06T20:53:43Z

          readOnly={events[0].metadata.readOnly}
        />
+      ) : (
+        <CreateFirstEventTypeView />


We want to show an empty screen

leog · 2023-09-06T20:54:59Z

  }, []);

+  if (!types.length) {
+    return group.teamId ? <EmptyEventTypeList group={group} /> : <CreateFirstEventTypeView />;


To show correct empty screen

leog · 2023-09-06T20:55:51Z

        href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
-        imageSrc={`${orgBranding?.fullDomain ?? WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
+        imageSrc={
+          `${orgBranding?.fullDomain ?? WEBAPP_URL}${teamId ? "/team" : ""}/${profile.slug}/avatar.png` ||


Somehow we were missing the "/team" part of the avatar URL to correctly show a team or user avatar for orgs

leog · 2023-09-06T20:56:32Z

+      buttonRaw={
+        <Button href="?dialog=new" variant="button">
+          {t("create")}
+        </Button>


Added the "create" button to simplify the action for mobile users mainly

leog · 2023-09-06T20:56:40Z

+                ) : group.teamId ? (
                  <EmptyEventTypeList group={group} />
+                ) : (
+                  <CreateFirstEventTypeView />


Empty screen FTW

leog · 2023-09-06T20:57:02Z

                    addOnLeading={
                      orgSlug
-                        ? getOrgFullDomain(orgSlug, { protocol: true })
+                        ? `${getOrgFullDomain(orgSlug, { protocol: true })}/`


Missing trailing "/" on invite

leog · 2023-09-06T20:57:28Z

  return {
-    // don't display event teams without event types,
-    eventTypeGroups: eventTypeGroups.filter((groupBy) => groupBy.parentId || !!groupBy.eventTypes?.length),
+    eventTypeGroups,


We now show any event type group even if it is empty, as we show empty screens for them now

leog · 2023-09-06T20:58:00Z

+              Icon && "mt-6"
+            )}>
+            {headline}
+          </h2>


When no icon is present and no description is passed, there was an extra margin on the title that didn't look good

github-actions · 2023-09-06T21:01:41Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

deploysentinel · 2023-09-06T21:02:36Z

Current Playwright Test Results Summary

✅ 117 Passing - ⚠️ 1 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 09/06/2023 09:03:33pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: 3e3a281

Started: 09/06/2023 09:01:42pm UTC

⚠️ Flakes

📄 packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should be able to reschedule Retry 1 • Initial Attempt	1.88% (6) 6 / 320 runs failed over last 7 days	96.88% (310) 310 / 320 runs flaked over last 7 days

View Detailed Build Results

PeerRich

thank you!!

* Pass organization name & logo * Overflow hidden * Show org icon on public page * Add org logo to large user avatars * Clean up * Add org name and logo to context * Get org logo from /avatar.png endpoint * Do not query for logo * Remove name and logo from session middleware * Type fix * Set user onboarding org logo * feat: organization avatar component (#10788) Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Type fixes * Type fix * Transition to org slug for organization avatar * Address feedback * Clean up * Clean up * Type fix * fix: set avatar cache control (#11163) * test: Integration tests for handleNewBooking (#11044) Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> * fix: booking_paid webhook and added new payment metadata (#11093) * app store improvements, logos, dark mode, added screenshots, fixed author names (#11164) * fix: mobile event types and avatars (#11184) * New Crowdin translations by Github Action * fix: updateProfile metadata overwrite (#11188) Co-authored-by: alannnc <alannnc@gmail.com> * New Crowdin translations by Github Action --------- Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

* Pass organization name & logo * Overflow hidden * Show org icon on public page * Add org logo to large user avatars * Clean up * Add org name and logo to context * Get org logo from /avatar.png endpoint * Do not query for logo * Remove name and logo from session middleware * Type fix * Set user onboarding org logo * feat: organization avatar component (calcom#10788) Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Type fixes * Type fix * Transition to org slug for organization avatar * Address feedback * Clean up * Clean up * Type fix * fix: set avatar cache control (calcom#11163) * test: Integration tests for handleNewBooking (calcom#11044) Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> * fix: booking_paid webhook and added new payment metadata (calcom#11093) * app store improvements, logos, dark mode, added screenshots, fixed author names (calcom#11164) * fix: mobile event types and avatars (calcom#11184) * New Crowdin translations by Github Action * fix: updateProfile metadata overwrite (calcom#11188) Co-authored-by: alannnc <alannnc@gmail.com> * New Crowdin translations by Github Action --------- Co-authored-by: Sean Brydon <sean@cal.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Shivam Kalra <shivamkalra98@gmail.com> Co-authored-by: alannnc <alannnc@gmail.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Leo Giovanetti <hello@leog.me> Co-authored-by: Crowdin Bot <support+bot@crowdin.com>

fix: mobile event types and avatars

f851070

leog requested a review from a team September 6, 2023 20:51

leog self-assigned this Sep 6, 2023

zomars added the core area: core, team members only label Sep 6, 2023

leog commented Sep 6, 2023

View reviewed changes

Remove console.log

3e3a281

leog commented Sep 6, 2023

View reviewed changes

vercel Bot had a problem deploying to Preview – ai September 6, 2023 20:58 Failure

vercel Bot deployed to Preview – api September 6, 2023 20:59 View deployment

vercel Bot deployed to Preview – cal-demo September 6, 2023 21:00 View deployment

vercel Bot deployed to Preview – dev September 6, 2023 21:00 View deployment

PeerRich approved these changes Sep 6, 2023

View reviewed changes

PeerRich merged commit b7ae8c9 into main Sep 6, 2023

PeerRich deleted the fix/mobile-event-types branch September 6, 2023 21:41

sean-brydon pushed a commit that referenced this pull request Sep 7, 2023

fix: mobile event types and avatars (#11184)

d8ca27d

Conversation

leog commented Sep 6, 2023

What does this PR do?

Type of change

How should this be tested?

Uh oh!

vercel Bot commented Sep 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 6, 2023 • 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!

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!

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!

github-actions Bot commented Sep 6, 2023

📦 Next.js Bundle Analysis for @calcom/web

Uh oh!

deploysentinel Bot commented Sep 6, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Playwright Test Results Summary

⚠️ Flakes

Test Case Results

Uh oh!

PeerRich left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

vercel Bot commented Sep 6, 2023 •

edited

Loading

github-actions Bot commented Sep 6, 2023 •

edited

Loading

deploysentinel Bot commented Sep 6, 2023 •

edited

Loading