From 7ee3f9409c2182ea4d13584ac0969c52523286b6 Mon Sep 17 00:00:00 2001 From: Jake Hebert Date: Fri, 19 Jul 2024 00:30:50 -0500 Subject: [PATCH] feat: [CAL-3939] fix org banner (#15557) * update documentation for proper hostile command * add OrgBanner component and replace it in ee organization profile settings * add width and height defaults, with option to override * updated sizing with image loaded * fix: add alt to OrgBanner in test * fix: failing OrgBanner test, added neg test --------- Co-authored-by: Keith Williams Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Co-authored-by: Peer Richelsen --- packages/features/ee/organizations/README.md | 6 ++-- .../organizations/pages/settings/profile.tsx | 11 ++++--- .../organization-banner/OrgBanner.test.tsx | 20 +++++++++++ .../organization-banner/OrgBanner.tsx | 33 +++++++++++++++++++ .../components/organization-banner/index.ts | 2 ++ packages/ui/index.tsx | 2 ++ 6 files changed, 67 insertions(+), 7 deletions(-) create mode 100644 packages/ui/components/organization-banner/OrgBanner.test.tsx create mode 100644 packages/ui/components/organization-banner/OrgBanner.tsx create mode 100644 packages/ui/components/organization-banner/index.ts diff --git a/packages/features/ee/organizations/README.md b/packages/features/ee/organizations/README.md index 4723fb73a9..766f017cfb 100644 --- a/packages/features/ee/organizations/README.md +++ b/packages/features/ee/organizations/README.md @@ -11,8 +11,8 @@ From the [Original RFC](https://github.com/calcom/cal.com/issues/7142): 2. Set the following environment variables as described: 1. **`CALCOM_LICENSE_KEY`**: Since Organizations is an EE feature, a license key should be present, either as this environment variable or visiting as an Admin `/auth/setup`. To get a license key you should visit Cal Console ([prod](https://console.cal.com) or [dev](https://console.cal.dev)) - 2. **`NEXT_PUBLIC_WEBAPP_URL`**: In case of local development, this variable should be set to `https://app.cal.local:3000` to be able to handle subdomains correctly in terms of authentication and cookies - 3. **`NEXTAUTH_URL`**: Should be equal to `NEXT_PUBLIC_WEBAPP_URL` which is `https://app.cal.local:3000` + 2. **`NEXT_PUBLIC_WEBAPP_URL`**: In case of local development, this variable should be set to `http://app.cal.local:3000` to be able to handle subdomains correctly in terms of authentication and cookies + 3. **`NEXTAUTH_URL`**: Should be equal to `NEXT_PUBLIC_WEBAPP_URL` which is `http://app.cal.local:3000` 4. **`NEXTAUTH_COOKIE_DOMAIN`**: In case of local development, this variable should be set to `.cal.local` to be able to accept session cookies in subdomains as well otherwise it should be set to the corresponding environment such as `.cal.dev`, `.cal.qa` or `.cal.com`. If you choose another subdomain, the value for this should match the apex domain of `NEXT_PUBLIC_WEBAPP_URL` with a leading dot (`.`) 5. **`ORGANIZATIONS_ENABLED`**: Should be set to `1` or `true` 6. **`STRIPE_ORG_MONTHLY_PRICE_ID`**: For dev and all testing should be set to your own testing key. Or ask for the shared key if you're a core member. @@ -20,7 +20,7 @@ From the [Original RFC](https://github.com/calcom/cal.com/issues/7142): 3. Add `app.cal.local` to your host file, either: - 1. `sudo npx hostile app.cal.local` + 1. `sudo npx hostile set localhost app.cal.local` 2. Add it yourself 6. Add `acme.cal.local` to host file given that the org create for it will be `acme`, otherwise do this for whatever slug will be assigned to the org. This is needed to test org-related public URLs, such as sub-teams, members and event-types. diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx index fd35ca5cef..f459f557d5 100644 --- a/packages/features/ee/organizations/pages/settings/profile.tsx +++ b/packages/features/ee/organizations/pages/settings/profile.tsx @@ -35,6 +35,8 @@ import { SkeletonText, TextField, } from "@calcom/ui"; +// if I include this in the above barrel import, I get a runtime error that the component is not exported. +import { OrgBanner } from "@calcom/ui"; import { getLayout } from "../../../../settings/layouts/SettingsLayout"; import { useOrgBranding } from "../../../organizations/context/provider"; @@ -97,7 +99,7 @@ const OrgProfileView = () => { router.replace("/enterprise"); } }, - [error] + [error, router] ); if (isPending || !orgBranding || !currentOrganisation) { @@ -258,7 +260,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => { /> -
+
{ return ( <> -
diff --git a/packages/ui/components/organization-banner/OrgBanner.test.tsx b/packages/ui/components/organization-banner/OrgBanner.test.tsx new file mode 100644 index 0000000000..d68e981a5b --- /dev/null +++ b/packages/ui/components/organization-banner/OrgBanner.test.tsx @@ -0,0 +1,20 @@ +/* eslint-disable playwright/missing-playwright-await */ +import { render } from "@testing-library/react"; + +import { OrgBanner } from "./OrgBanner"; + +describe("tests for OrgBanner component", () => { + test("Should render the OrgBanner correctly when supplied imageSrc", () => { + const { getByTestId } = render( + + ); + const orgBanner = getByTestId("org-banner-test"); + + expect(orgBanner).toBeInTheDocument(); + }); + test("Should not render the OrgBanner when no imageSrc is supplied", () => { + const { getByTestId } = render(); + + expect(() => getByTestId("org-banner-test")).toThrow(); + }); +}); diff --git a/packages/ui/components/organization-banner/OrgBanner.tsx b/packages/ui/components/organization-banner/OrgBanner.tsx new file mode 100644 index 0000000000..41f0e7cc73 --- /dev/null +++ b/packages/ui/components/organization-banner/OrgBanner.tsx @@ -0,0 +1,33 @@ +import Image from "next/image"; + +import classNames from "@calcom/lib/classNames"; + +type Maybe = T | null | undefined; + +export type OrgBannerProps = { + alt: string; + width?: number; + height?: number; + imageSrc?: Maybe; + fallback?: React.ReactNode; + className?: string; + "data-testid"?: string; +}; + +export function OrgBanner(props: OrgBannerProps) { + const { imageSrc, alt, width = 1500, height = 500 } = props; + + if (!imageSrc) { + return
{props.fallback}
; + } + return ( + {alt} + ); +} diff --git a/packages/ui/components/organization-banner/index.ts b/packages/ui/components/organization-banner/index.ts new file mode 100644 index 0000000000..c802dc4158 --- /dev/null +++ b/packages/ui/components/organization-banner/index.ts @@ -0,0 +1,2 @@ +export { OrgBanner } from "./OrgBanner"; +export type { OrgBannerProps } from "./OrgBanner"; diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx index b7ba7fa86c..a63f5d1065 100644 --- a/packages/ui/index.tsx +++ b/packages/ui/index.tsx @@ -193,6 +193,8 @@ export { } from "./components/command"; export { Popover, PopoverContent, PopoverTrigger } from "./components/popover"; +export { OrgBanner } from "./components/organization-banner"; +export type { OrgBannerProps } from "./components/organization-banner"; export { StorybookTrpcProvider } from "./components/mocks/trpc"; export { default as Icon } from "./components/icon/Icon";