Adds Meta component to handle layout headings/metadata #4021

zomars · 2022-08-30T02:32:44Z

To be merged after #4018

What does this PR do?

Adds a Meta component that allows to update metadata from any page children
Exposes metadata via a useMeta hook, this can be used to sync page metadata and display it in UI (Like Headings, subtitles, etc.)
Adds Meta to pages in /v2/settings
Adds example usage in SettingsLayout as ShellHeader

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

Go to /v2/settings/my-account/profile
Navigate between settings pages and see how headings change

vercel · 2022-08-30T02:32:47Z

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

Name	Status	Preview	Updated
cal	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 2:41AM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
swagger	⬜️ Ignored (Inspect)		Aug 30, 2022 at 2:41AM (UTC)

PeerRich · 2022-08-30T11:52:58Z

packages/ui/v2/core/Meta.tsx

+  return (
+    <Head>
+      <title>{t(title)} | Cal.com</title>
+      <meta name="description" content={t(description)} />


i've noticed that translated descriptions dont work in social previews

we should just use english here, to i18n function @zomars

We don't need social previews here. These are being used in the authed screens.

Is there a way to make sure these aren't used on public pages?

@zlwaterfield not worth the effort to enforce via linting if you ask me. We can add some comments and make sure it doesn't slip on reviews.

PeerRich · 2022-08-30T11:53:05Z

packages/ui/v2/core/Meta.tsx

+
+  return (
+    <Head>
+      <title>{t(title)} | Cal.com</title>


same for title

zlwaterfield · 2022-08-30T16:59:56Z

packages/ui/v2/core/Meta.tsx

+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+
+type MetaType = {


My worry with this PR is that the MetaType attributes are not typed so if an unsupported title/description is passed in it will use that string directly. And since the strings are snakecase it won't look good.

For example for the conferencing page if conferencing2 was passed in by accident, it would pass typing but not match supported within the i18n lookups.

This might be out of scope for this PR but we should look into typing i18n lookups.

We could also add a "Cal.com" backup for the title so it doesn't show up weird if the lookup fails.

It is definitively out of scope and a current limitation of the next-i18n library we're using.

zomars · 2022-08-30T18:55:37Z

Will merge as it is to unblock @sean-brydon and @joeauyeung who we're asking for this

* Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>

* Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (calcom#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>

* Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * add Test action button + UI improvements * add test action functionality * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * add confirmation dialog before sending SMS * code clean up * show error message if test action fails * disable test action button in edit mode * fixes SMS testing * use updated values * fix wrongly updated data in useEffect * fix typo * code clean up * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * setup folders for v2 * add lost translations from merge * add all files to v2 + redesign /workflows * use custom template as default template * add first version of v2 for workflow editing page * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * use fi icon for down arrow * add v2 shell * add trigger badge * Even Type move order handles * fix save button * enable editing of workflow name * improve delete workflow functionality * adjust empty screen * make trigger start with uppercase * change trash icon * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * create component for time and timeUnit input/dropdown * add workflows to v2 early access middleware * fix type issues * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * adjust delete and edit button * create custom empty screen for worklows * add workflow examples to empty page * add loading state to button when creating first workflow * Show action as workflow name when no name exists * if no input leave name empty when updating workflow * use reminder template when creating workflow * improve time unit dropdown * Remove unused component * Fix typecheck * add loading state to new workflow button * add label before action dropdown * fixing badges in worflow list * use lighter color for untitled workflows * fix not showing nr of active eventtypes in workflow list * add workflows to event types * implement v2 desing for AddActionDialog * improve phone input * rounded borders for phoneInput in add action dialog * improve message input * fix mobile view for editing page * use md breakpoint for mobile view * finish workflows in event type settings * code cleanup * code cleanup * fix bug in testing workflow action * add v2 design for addition inputs as variables dialog * add V2 design for add variable dropdown * add notification icons to trigger badge * improve mobile version of workflows in eventtypes * remove ring from time before input * fix bug when workflow has no steps * Final UI improvements/fixes * code clean-up * code clean-up * code clean-up * use v2 design for license required * fix translation issues * fix adding variables in different language in old design * limit for pro users only for now * fix import * fix mobile view for empty screen * ues destructive button color for deleting workfow * remove padding at button of creation dialog * V2 Settings - Security View (#4018) * Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com> * fix: rate limit auth (#3820) * fix: rate limit auth * fix: replace lru-cache w memory-cache * remove comments * fix: yarn.lock * fix: remove changes yarn lock * fix: add missing EOL empty liune * fix: move rate limiter so it kicks the last, limit to 10 tries per minute * fix: move limiter w rest of code * test: trying fix onboardong * fix: undo changes in globalSetup.ts * test: fix disable login for onboarding * fix: use username instead of email for token check * fix: tests * fix: don't run on test * fix: add missing comma * fix: remove uniqueTokenPerInterval * fix: add errorcode to packages lib auth * Update packages/lib/rateLimit.ts fix: improve readability Co-authored-by: Omar López <zomars@me.com> * Update packages/lib/rateLimit.ts fix: no unnecessary any Co-authored-by: Omar López <zomars@me.com> * Update packages/lib/rateLimit.ts fix: improve readability Co-authored-by: Omar López <zomars@me.com> * fix: rename interval -> intervalInMs * fix: check user.email not username which could be empty * fix: rateLimit update all naming Co-authored-by: Agusti Fernandez Pardo <git@agusti.me> Co-authored-by: Omar López <zomars@me.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> * Adds deprecation comments Co-authored-by: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: zomars <zomars@me.com> Co-authored-by: CarinaWolli <wollencarina@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com> Co-authored-by: Julian Benegas <julianbenegas99@gmail.com> Co-authored-by: Alan <alannnc@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Co-authored-by: Agusti Fernandez Pardo <6601142+agustif@users.noreply.github.com> Co-authored-by: Agusti Fernandez Pardo <git@agusti.me>

Adds Meta component to handle layout headings/metadata

38eb293

zomars requested review from joeauyeung, sean-brydon and a team August 30, 2022 02:32

vercel bot deployed to Preview – cal August 30, 2022 02:41 View deployment

PeerRich requested changes Aug 30, 2022

View reviewed changes

zlwaterfield self-requested a review August 30, 2022 15:37

zlwaterfield reviewed Aug 30, 2022

View reviewed changes

zomars merged commit d59c23f into v2/settings/security-view Aug 30, 2022

zomars deleted the v2/ui/meta branch August 30, 2022 18:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Meta component to handle layout headings/metadata #4021

Adds Meta component to handle layout headings/metadata #4021

zomars commented Aug 30, 2022

vercel bot commented Aug 30, 2022 •

edited

Loading

PeerRich Aug 30, 2022

zomars Aug 30, 2022

zlwaterfield Aug 30, 2022

zomars Aug 30, 2022

PeerRich Aug 30, 2022

zlwaterfield Aug 30, 2022

zomars Aug 30, 2022

zomars commented Aug 30, 2022


		import { useLocale } from "@calcom/lib/hooks/useLocale";

		type MetaType = {

Adds Meta component to handle layout headings/metadata #4021

Adds Meta component to handle layout headings/metadata #4021

Conversation

zomars commented Aug 30, 2022

What does this PR do?

Type of change

How should this be tested?

vercel bot commented Aug 30, 2022 • edited Loading

PeerRich Aug 30, 2022

Choose a reason for hiding this comment

zomars Aug 30, 2022

Choose a reason for hiding this comment

zlwaterfield Aug 30, 2022

Choose a reason for hiding this comment

zomars Aug 30, 2022

Choose a reason for hiding this comment

PeerRich Aug 30, 2022

Choose a reason for hiding this comment

zlwaterfield Aug 30, 2022

Choose a reason for hiding this comment

zomars Aug 30, 2022

Choose a reason for hiding this comment

zomars commented Aug 30, 2022

vercel bot commented Aug 30, 2022 •

edited

Loading