cal.com
cal.com copied to clipboard
calcom
feat: [CAL-3939] fix org banner
What does this PR do?
I introduced a new component in @calcom/ui to be used for previews of the org banner. This component has minimal functionality, aside for providing a placeholder/fallback that will match the size that is set (in css) for the image using next/image.
- Fixes #15456
- Fixes CAL-3939 (fix org banner)
Loom Video: https://www.loom.com/share/af57febbb0484ff785d7a341ea5cbd1f?sid=81f73775-cb53-4938-9546-c942e8178a1d
Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code (A decent size PR without self-review might be rejected)
- [ ] I have added a Docs issue here if this PR makes changes that would require a documentation change
- [ ] I have added or modified automated tests that prove my fix is effective or that my feature works (PRs might be rejected if logical changes are not properly tested)
How should this be tested?
- Set ENV for enterprise organization testing
- Load user into
acme.cal.local:3000(or whatever org you have setup) - Go to
/settings/organizations/profileto see and test the component
@panzacoder is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
![vercel[bot] avatar](https://avatars.githubusercontent.com/in/8329?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey there and thank you for opening this pull request! 👋🏼
We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.
Details:
No release type found in pull request title "Feat/CAL-3939 (improve org banner preview)". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/
Available types:
- feat: A new feature
- fix: A bug fix
- docs: Documentation only changes
- style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
- refactor: A code change that neither fixes a bug nor adds a feature
- perf: A code change that improves performance
- test: Adding missing tests or correcting existing tests
- build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
- ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
- chore: Other changes that don't modify src or test files
- revert: Reverts a previous commit
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Graphite Automations
"Add community label" took an action on this PR • (06/25/24)
1 label was added to this PR based on Keith Williams's automation.
"Add consumer team as reviewer" took an action on this PR • (06/25/24)
1 reviewer was added to this PR based on Keith Williams's automation.
![graphite-app[bot] avatar](https://avatars.githubusercontent.com/in/158384?v=4 "Published by a pub.dev verified publisher"){kind=small}
@PeerRich the design in figma is different https://github.com/calcom/cal.com/issues/13998#issuecomment-2084670375
Unfortunate that designs weren't attached to the ticket https://github.com/calcom/cal.com/issues/15456 since they've been available for so long. This PR is based on the AC for that ticket, which is somewhat sparse.
Hey pls fix the type error and the unit test.
Sorry for the delay, but the tests and types are all good now, and I added a negative test as well.
@Udit-takkar lets merge this, i think this is fine.
this is on me, i didnt know we had a figma design for this.
this is good enough, we can make the redesign later
📦 Next.js Bundle Analysis for @calcom/web
This analysis was generated by the Next.js Bundle Analysis action. 🤖
Eighty-four Pages Changed Size
The following pages changed size from the code in this PR compared to its base branch:
| Page | Size (compressed) | First Load | % of Budget (350 KB) |
|---|---|---|---|
/apps |
277.24 KB |
504.94 KB | 144.27% (🟢 -1.99%) |
/apps/[slug] |
294.54 KB |
522.24 KB | 149.21% (🟢 -2.07%) |
/apps/[slug]/[...pages] |
587 KB |
814.7 KB | 232.77% (🟢 -1.61%) |
/apps/categories |
254.29 KB |
481.99 KB | 137.71% (🟢 -1.79%) |
/apps/categories/[category] |
259.1 KB |
486.8 KB | 139.08% (🟢 -2.05%) |
/apps/installation/[[...step]] |
467.07 KB |
694.77 KB | 198.51% (🔴 +85.54%) |
/apps/installed/[category] |
278.22 KB |
505.92 KB | 144.55% (🟢 -1.82%) |
/auth/saml-idp |
12.22 KB |
239.92 KB | 68.55% (🟢 -20.80%) |
/availability |
426.64 KB |
654.34 KB | 186.95% (🟢 -1.65%) |
/availability/[schedule] |
410.51 KB |
638.21 KB | 182.34% (🟢 -1.66%) |
/booking/[uid] |
236.5 KB |
464.2 KB | 132.63% (🟡 +0.15%) |
/booking/[uid]/embed |
236.5 KB |
464.2 KB | 132.63% (🟡 +0.15%) |
/bookings/[status] |
324.3 KB |
552 KB | 157.71% (🟢 -1.68%) |
/enterprise |
254.34 KB |
482.04 KB | 137.73% (🟢 -1.79%) |
/event-types |
559.51 KB |
787.21 KB | 224.92% (🟢 -1.67%) |
/event-types/[type] |
435.38 KB |
663.08 KB | 189.45% (🟢 -1.76%) |
/getting-started/[[...step]] |
448.07 KB |
675.77 KB | 193.08% (🟡 +10.70%) |
/insights |
474.29 KB |
701.99 KB | 200.57% (🟢 -1.79%) |
/more |
253.85 KB |
481.55 KB | 137.59% (🟢 -1.79%) |
/settings/admin |
260.32 KB |
488.02 KB | 139.43% (🟢 -1.76%) |
/settings/admin/apps |
273.7 KB |
501.4 KB | 143.26% (🟢 -1.76%) |
/settings/admin/apps/[category] |
273.68 KB |
501.38 KB | 143.25% (🟢 -1.75%) |
/settings/admin/flags |
264.15 KB |
491.85 KB | 140.53% (🟢 -1.77%) |
/settings/admin/impersonation |
260.71 KB |
488.41 KB | 139.55% (🟢 -1.77%) |
/settings/admin/lockedSMS |
281.8 KB |
509.5 KB | 145.57% (🟢 -1.73%) |
/settings/admin/lockedSMS/lockedSMSView |
119.51 KB |
347.21 KB | 99.20% (🟢 -0.15%) |
/settings/admin/oAuth |
272.43 KB |
500.13 KB | 142.89% (🟢 -1.75%) |
/settings/admin/oAuth/oAuthView |
95.41 KB |
323.11 KB | 92.32% (🟢 -0.20%) |
/settings/admin/orgMigrations/_OrgMigrationLayout |
249.1 KB |
476.8 KB | 136.23% (🟢 -1.81%) |
/settings/admin/orgMigrations/moveTeamToOrg |
299.02 KB |
526.72 KB | 150.49% (🟢 -1.74%) |
/settings/admin/orgMigrations/moveUserToOrg |
318.85 KB |
546.55 KB | 156.16% (🟢 -1.71%) |
/settings/admin/orgMigrations/removeTeamFromOrg |
298.78 KB |
526.48 KB | 150.42% (🟢 -1.74%) |
/settings/admin/orgMigrations/removeUserFromOrg |
298.79 KB |
526.5 KB | 150.43% (🟢 -1.74%) |
/settings/admin/organizations |
262.2 KB |
489.9 KB | 139.97% (🟢 -1.76%) |
/settings/admin/organizations/[id]/edit |
260.87 KB |
488.57 KB | 139.59% (🟢 -1.76%) |
/settings/admin/users |
262.97 KB |
490.67 KB | 140.19% (🟢 -1.76%) |
/settings/admin/users/[id]/edit |
392.18 KB |
619.88 KB | 177.11% (🟢 -1.73%) |
/settings/admin/users/add |
391.85 KB |
619.55 KB | 177.01% (🟢 -1.72%) |
/settings/billing |
260.52 KB |
488.22 KB | 139.49% (🟢 -1.76%) |
/settings/developer/api-keys |
264.92 KB |
492.62 KB | 140.75% (🟢 -1.77%) |
/settings/developer/webhooks |
265.09 KB |
492.79 KB | 140.80% (🟢 -1.77%) |
/settings/developer/webhooks/[id] |
266.07 KB |
493.77 KB | 141.08% (🟢 -1.75%) |
/settings/developer/webhooks/new |
266.1 KB |
493.8 KB | 141.09% (🟢 -1.75%) |
/settings/my-account/appearance |
313.53 KB |
541.23 KB | 154.64% (🟢 -1.76%) |
/settings/my-account/calendars |
271.94 KB |
499.64 KB | 142.75% (🟢 -1.80%) |
/settings/my-account/conferencing |
272.85 KB |
500.55 KB | 143.01% (🟢 -1.80%) |
/settings/my-account/general |
376.02 KB |
603.72 KB | 172.49% (🟢 -1.76%) |
/settings/my-account/out-of-office |
265.55 KB |
493.25 KB | 140.93% (🟢 -1.77%) |
/settings/my-account/profile |
408.46 KB |
636.16 KB | 181.76% (🟢 -1.76%) |
/settings/organizations/[id]/about |
159.71 KB |
387.41 KB | 110.69% (🟡 +0.48%) |
/settings/organizations/[id]/add-teams |
159.7 KB |
387.4 KB | 110.68% (🟡 +0.49%) |
/settings/organizations/admin-api |
260.48 KB |
488.18 KB | 139.48% (🟢 -1.77%) |
/settings/organizations/appearance |
122.37 KB |
350.07 KB | 100.02% (🟢 -48.01%) |
/settings/organizations/billing |
260.56 KB |
488.26 KB | 139.50% (🟢 -1.76%) |
/settings/organizations/dsync |
293.18 KB |
520.88 KB | 148.82% (🟢 -1.76%) |
/settings/organizations/general |
348.87 KB |
576.57 KB | 164.73% (🟢 -1.75%) |
/settings/organizations/members |
400.04 KB |
627.74 KB | 179.36% (🟢 -1.76%) |
/settings/organizations/new |
159.71 KB |
387.41 KB | 110.69% (🟡 +0.48%) |
/settings/organizations/privacy |
266.07 KB |
493.77 KB | 141.08% (🟢 -1.77%) |
/settings/organizations/profile |
417 KB |
644.7 KB | 184.20% (🟡 +2.82%) |
/settings/organizations/sso |
271.15 KB |
498.85 KB | 142.53% (🟢 -1.77%) |
/settings/organizations/teams/other |
261.39 KB |
489.09 KB | 139.74% (🟢 -1.77%) |
/settings/organizations/teams/other/[id]/appearance |
273.29 KB |
500.99 KB | 143.14% (🟢 -1.72%) |
/settings/organizations/teams/other/[id]/members |
267.98 KB |
495.68 KB | 141.62% (🟢 -1.76%) |
/settings/organizations/teams/other/[id]/profile |
471.67 KB |
699.38 KB | 199.82% (🟢 -1.76%) |
/settings/platform |
258.95 KB |
486.65 KB | 139.04% (🟢 -1.78%) |
/settings/platform/new |
120.72 KB |
348.42 KB | 99.55% (🟡 +0.52%) |
/settings/platform/oauth-clients/[clientId]/edit |
257.26 KB |
484.96 KB | 138.56% (🟢 -1.79%) |
/settings/platform/oauth-clients/create |
256.4 KB |
484.1 KB | 138.31% (🟢 -1.78%) |
/settings/security/impersonation |
265.73 KB |
493.43 KB | 140.98% (🟢 -1.76%) |
/settings/security/password |
303.91 KB |
531.61 KB | 151.89% (🟢 -1.74%) |
/settings/security/sso |
270.6 KB |
498.3 KB | 142.37% (🟢 -1.76%) |
/settings/security/two-factor-auth |
269.21 KB |
496.91 KB | 141.97% (🟢 -1.76%) |
/settings/teams |
260.05 KB |
487.75 KB | 139.36% (🟢 -1.77%) |
/settings/teams/[id]/appearance |
273.27 KB |
500.97 KB | 143.14% (🟢 -1.72%) |
/settings/teams/[id]/billing |
260.56 KB |
488.26 KB | 139.50% (🟢 -1.76%) |
/settings/teams/[id]/members |
378.11 KB |
605.81 KB | 173.09% (🟢 -1.76%) |
/settings/teams/[id]/profile |
472.51 KB |
700.21 KB | 200.06% (🟢 -1.75%) |
/settings/teams/new |
193.04 KB |
420.74 KB | 120.21% (🟢 -1.81%) |
/teams |
254.08 KB |
481.78 KB | 137.65% (🟢 -1.79%) |
/upgrade |
254.2 KB |
481.9 KB | 137.69% (🟢 -1.79%) |
/video/[uid] |
291.23 KB |
518.93 KB | 148.27% (🟢 -0.17%) |
/workflows |
286.1 KB |
513.8 KB | 146.80% (🟢 -1.73%) |
/workflows/[workflow] |
414.39 KB |
642.09 KB | 183.45% (🟢 -1.50%) |
Details
Only the gzipped size is provided here based on an expert tip.
First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.
Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis
The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-