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 <keithwillcode@gmail.com> 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 <peeroke@gmail.com>
2024-07-19 05:30:50 +00:00
parent 0d1dd036eb
commit 7ee3f9409c
6 changed files with 67 additions and 7 deletions
@@ -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.
@@ -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 }) => {
          />
        </div>

-        <div className="mt-2 flex items-center">
+        <div className="my-4 flex flex-col gap-4">
          <Controller
            control={form.control}
            name="banner"
@@ -267,11 +269,12 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {

              return (
                <>
-                  <Avatar
+                  <OrgBanner
                    data-testid="profile-upload-banner"
                    alt={`${defaultValues.name} Banner` || ""}
+                    className="grid min-h-[150px] w-full place-items-center rounded-md sm:min-h-[200px]"
+                    fallback={t("no_target", { target: "banner" })}
                    imageSrc={value}
-                    size="lg"
                  />
                  <div className="ms-4">
                    <div className="flex gap-2">
@@ -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(
+      <OrgBanner alt="Test Org Banner" data-testid="org-banner-test" imageSrc="/logo.svg" />
+    );
+    const orgBanner = getByTestId("org-banner-test");
+
+    expect(orgBanner).toBeInTheDocument();
+  });
+  test("Should not render the OrgBanner when no imageSrc is supplied", () => {
+    const { getByTestId } = render(<OrgBanner alt="Test Org Banner" data-testid="org-banner-test" />);
+
+    expect(() => getByTestId("org-banner-test")).toThrow();
+  });
+});
@@ -0,0 +1,33 @@
+import Image from "next/image";
+
+import classNames from "@calcom/lib/classNames";
+
+type Maybe<T> = T | null | undefined;
+
+export type OrgBannerProps = {
+  alt: string;
+  width?: number;
+  height?: number;
+  imageSrc?: Maybe<string>;
+  fallback?: React.ReactNode;
+  className?: string;
+  "data-testid"?: string;
+};
+
+export function OrgBanner(props: OrgBannerProps) {
+  const { imageSrc, alt, width = 1500, height = 500 } = props;
+
+  if (!imageSrc) {
+    return <div className={classNames("bg-muted", props.className)}>{props.fallback}</div>;
+  }
+  return (
+    <Image
+      data-testid={props?.["data-testid"]}
+      src={imageSrc}
+      alt={alt}
+      className={props.className}
+      width={width}
+      height={height}
+    />
+  );
+}
@@ -0,0 +1,2 @@
+export { OrgBanner } from "./OrgBanner";
+export type { OrgBannerProps } from "./OrgBanner";
@@ -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";