fix: remove duplicate header in attributes page (#17985)

This commit is contained in:
Benny Joo
2024-12-03 20:32:56 +00:00
committed by GitHub
parent 145449e7b4
commit 6eadadec73
5 changed files with 54 additions and 105 deletions
@@ -1,8 +1,6 @@
import { _generateMetadata, getFixedT } from "app/_utils";
import { _generateMetadata } from "app/_utils";
import OrgAttributesEditPage from "@calcom/ee/organizations/pages/settings/attributes/attributes-edit-view";
import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
export const generateMetadata = async () =>
await _generateMetadata(
@@ -10,15 +8,4 @@ export const generateMetadata = async () =>
(t) => t("edit_attribute_description")
);
const Page = async () => {
const session = await getServerSessionForAppDir();
const t = await getFixedT(session?.user.locale || "en");
return (
<SettingsHeader title={t("attribute")} description={t("edit_attribute_description")}>
<OrgAttributesEditPage />
</SettingsHeader>
);
};
export default Page;
export default OrgAttributesEditPage;
@@ -1,8 +1,6 @@
import { _generateMetadata, getFixedT } from "app/_utils";
import { _generateMetadata } from "app/_utils";
import OrgAttributesCreatePage from "@calcom/ee/organizations/pages/settings/attributes/attributes-create-view";
import { getServerSessionForAppDir } from "@calcom/features/auth/lib/get-server-session-for-app-dir";
import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
export const generateMetadata = async () =>
await _generateMetadata(
@@ -10,15 +8,4 @@ export const generateMetadata = async () =>
(t) => t("create_attribute_description")
);
const Page = async () => {
const session = await getServerSessionForAppDir();
const t = await getFixedT(session?.user.locale || "en");
return (
<SettingsHeader title={t("attribute")} description={t("create_attribute_description")}>
<OrgAttributesCreatePage />
</SettingsHeader>
);
};
export default Page;
export default OrgAttributesCreatePage;
@@ -1,7 +1,6 @@
"use client";
import { useRouter } from "next/navigation";
import React from "react";
import { useFormContext } from "react-hook-form";
import { z } from "zod";
@@ -32,7 +31,6 @@ function CreateAttributesPage() {
showToast(err.message, "error");
},
});
const { t } = useLocale();
return (
<>
@@ -73,7 +71,7 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
<span className="sr-only">{t("back_to_attributes")}</span>
</Button>
<div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
<h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
<h1 className="text-emphasis">{meta.title || t("attribute")}</h1>
{watchedTitle && (
<>
<span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -92,7 +92,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
<span className="sr-only">{t("back_to_attributes")}</span>
</Button>
<div className="font-cal text-cal flex space-x-1 text-xl font-semibold leading-none">
<h1 className="text-emphasis">{meta.title || "Attribute"}</h1>
<h1 className="text-emphasis">{meta.title || t("attribute")}</h1>
{watchedTitle && (
<>
<span className="text-subtle">/</span> <span className="text-emphasis">{watchedTitle}</span>
@@ -101,7 +101,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
</div>
</div>
<Button type="submit" data-testid="create-attribute-button" loading={props.isPending}>
Save
{t("save")}
</Button>
</div>
</>
@@ -130,80 +130,57 @@ function OrganizationAttributesPage() {
}
return (
<>
<ListAttributeHeader />
<LicenseRequired>
<div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
{data && data?.length > 0 ? (
<>
<h2 className="text-emphasis text-base font-semibold leading-none">{t("custom")}</h2>
<li className="border-subtle bg-default divide-subtle flex flex-col divide-y rounded-lg border">
{data?.map((attribute) => (
<AttributeItem
setAttributeToDelete={setAttributeToDelete}
attribute={attribute}
key={attribute.id}
/>
))}
</li>
<Button
className="w-fit"
StartIcon="plus"
color="minimal"
href="/settings/organizations/attributes/create">
{t("add")}
</Button>
</>
) : (
<div className="flex w-full flex-col items-center justify-center p-14">
<div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
<Icon name="tags" />
</div>
<h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
{t("add_attributes")}
</h2>
<p className="text-emphasis mt-3 text-sm font-normal leading-none">
{t("add_attributes_description")}
</p>
<Button
className="mt-8"
StartIcon="plus"
color="secondary"
href="/settings/organizations/attributes/create">
{t("new_attribute")}
</Button>
<LicenseRequired>
<div className="border-subtle bg-default flex flex-col gap-4 rounded-lg border p-6">
{data && data?.length > 0 ? (
<>
<h2 className="text-emphasis text-base font-semibold leading-none">{t("custom")}</h2>
<li className="border-subtle bg-default divide-subtle flex flex-col divide-y rounded-lg border">
{data?.map((attribute) => (
<AttributeItem
setAttributeToDelete={setAttributeToDelete}
attribute={attribute}
key={attribute.id}
/>
))}
</li>
<Button
className="w-fit"
StartIcon="plus"
color="minimal"
href="/settings/organizations/attributes/create">
{t("add")}
</Button>
</>
) : (
<div className="flex w-full flex-col items-center justify-center p-14">
<div className="bg-emphasis text-emphasis flex h-16 w-16 items-center justify-center rounded-full p-2">
<Icon name="tags" />
</div>
)}
</div>
{attributeToDelete && (
<DeleteAttributeModal
attributeToDelete={attributeToDelete}
setAttributeToDelete={setAttributeToDelete}
/>
)}
</LicenseRequired>
</>
);
}
<h2 className="font-cal text-emphasis mt-6 text-xl font-semibold leading-none">
{t("add_attributes")}
</h2>
function ListAttributeHeader() {
const { meta } = useMeta();
const { t } = useLocale();
return (
<>
<div className="min-h-6 mb-6 mt-6 flex flex-grow items-center justify-between lg:mt-12">
<div className="flex items-center gap-4 ">
<div className="flex flex-col space-y-1 ">
<h1 className="text-emphasis font-cal text-xl font-semibold leading-none">
{meta.title || t("attributes")}
</h1>
<p className="text-subtle text-sm">{meta.description || t("attribute_meta_description")}</p>
<p className="text-emphasis mt-3 text-sm font-normal leading-none">
{t("add_attributes_description")}
</p>
<Button
className="mt-8"
StartIcon="plus"
color="secondary"
href="/settings/organizations/attributes/create">
{t("new_attribute")}
</Button>
</div>
</div>
)}
</div>
</>
{attributeToDelete && (
<DeleteAttributeModal
attributeToDelete={attributeToDelete}
setAttributeToDelete={setAttributeToDelete}
/>
)}
</LicenseRequired>
);
}