thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: fix breadcrumbs inconsistency. (#4574)

Browse Source
This commit is contained in:
Prateek Shourya 2024-05-24 14:20:56 +05:30 committed by GitHub
parent 4bb4609833
commit 571d35cd8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
19 changed files with 62 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/headers/project-inbox.tsx
View File

@ -46,7 +46,7 @@ export const ProjectInboxHeader: FC = observer(() => {
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink label="Inbox Issues" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
<BreadcrumbLink label="Inbox" icon={<LayersIcon className="h-4 w-4 text-custom-text-300" />} />
}
/>
</Breadcrumbs>

22
web/components/headers/project-settings.tsx
View File

@ -2,22 +2,17 @@ import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
// ui
import { Settings } from "lucide-react";
import { Breadcrumbs, CustomMenu } from "@plane/ui";
// helper
// components
import { BreadcrumbLink } from "@/components/common";
import { ProjectLogo } from "@/components/project";
// constants
import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
// hooks
import { useProject, useUser } from "@/hooks/store";
// constants
// components
export interface IProjectSettingHeader {
title: string;
}
export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props) => {
const { title } = props;
export const ProjectSettingHeader: FC = observer(() => {
// router
const router = useRouter();
const { workspaceSlug, projectId } = router.query;
@ -52,7 +47,12 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
}
/>
<div className="hidden sm:hidden md:block lg:block">
<Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
<Breadcrumbs.BreadcrumbItem
type="text"
link={
<BreadcrumbLink label="Settings" icon={<Settings className="h-4 w-4 text-custom-text-300" />} />
}
/>
</div>
</Breadcrumbs>
</div>
@ -62,7 +62,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
maxHeight="lg"
customButton={
<span className="text-xs px-1.5 py-1 border rounded-md text-custom-text-200 border-custom-border-300">
{title}
Settings
</span>
}
placement="bottom-start"

22
web/components/headers/workspace-settings.tsx
View File

@ -1,21 +1,15 @@
import { FC } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import { observer } from "mobx-react";;
import { Settings } from "lucide-react";
// ui
import { Breadcrumbs } from "@plane/ui";
// components
import { BreadcrumbLink } from "@/components/common";
// hooks
import { useWorkspace } from "@/hooks/store";
export interface IWorkspaceSettingHeader {
title: string;
}
export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((props) => {
const { title } = props;
const router = useRouter();
const { workspaceSlug } = router.query;
export const WorkspaceSettingHeader: FC = observer(() => {
const { currentWorkspace } = useWorkspace();
return (
<div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
@ -26,13 +20,13 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
type="text"
link={
<BreadcrumbLink
href={`/${workspaceSlug}/settings`}
label="Settings"
href={`/${currentWorkspace?.slug}/settings`}
label={currentWorkspace?.name ?? "Workspace"}
icon={<Settings className="h-4 w-4 text-custom-text-300" />}
/>
}
/>
<Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label={title} />} />
<Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
</Breadcrumbs>
</div>
</div>

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
View File

@ -63,7 +63,7 @@ const AutomationSettingsPage: NextPageWithLayout = observer(() => {
AutomationSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="Automations Settings" />} withProjectWrapper>
<AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
View File

@ -35,7 +35,7 @@ const EstimatesSettingsPage: NextPageWithLayout = observer(() => {
EstimatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="Estimates Settings" />} withProjectWrapper>
<AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
View File

@ -54,7 +54,7 @@ const FeaturesSettingsPage: NextPageWithLayout = observer(() => {
FeaturesSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="Features Settings" />} withProjectWrapper>
<AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
View File

@ -93,7 +93,7 @@ const GeneralSettingsPage: NextPageWithLayout = observer(() => {
GeneralSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="General Settings" />} withProjectWrapper>
<AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
View File

@ -45,7 +45,7 @@ const LabelsSettingsPage: NextPageWithLayout = observer(() => {
LabelsSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout withProjectWrapper header={<ProjectSettingHeader title="Labels Settings" />}>
<AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View File

@ -31,7 +31,7 @@ const MembersSettingsPage: NextPageWithLayout = observer(() => {
MembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<ProjectSettingHeader title="Members Settings" />} withProjectWrapper>
<AppLayout header={<ProjectSettingHeader />} withProjectWrapper>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
View File

@ -32,7 +32,7 @@ const StatesSettingsPage: NextPageWithLayout = observer(() => {
StatesSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout withProjectWrapper header={<ProjectSettingHeader title="States Settings" />}>
<AppLayout withProjectWrapper header={<ProjectSettingHeader />}>
<ProjectSettingLayout>{page}</ProjectSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/api-tokens.tsx
View File

@ -99,7 +99,7 @@ const ApiTokensPage: NextPageWithLayout = observer(() => {
ApiTokensPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="API Tokens" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/billing.tsx
View File

@ -59,7 +59,7 @@ const BillingSettingsPage: NextPageWithLayout = observer(() => {
BillingSettingsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Billing & Plans Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/exports.tsx
View File

@ -50,7 +50,7 @@ const ExportsPage: NextPageWithLayout = observer(() => {
ExportsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Export Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

24
web/pages/[workspaceSlug]/settings/imports.tsx
View File

@ -1,17 +1,17 @@
import { observer } from "mobx-react";
// hooks
import { PageHead } from "components/core";
import { WorkspaceSettingHeader } from "components/headers";
import IntegrationGuide from "components/integration/guide";
import { EUserWorkspaceRoles } from "constants/workspace";
import { useUser, useWorkspace } from "hooks/store";
// layouts
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
// components
// types
import { NextPageWithLayout } from "lib/types";
import { PageHead } from "@/components/core";
import { WorkspaceSettingHeader } from "@/components/headers";
import IntegrationGuide from "@/components/integration/guide";
// constants
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useUser, useWorkspace } from "@/hooks/store";
// layouts
import { AppLayout } from "@/layouts/app-layout";
import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
// types
import { NextPageWithLayout } from "@/lib/types";
const ImportsPage: NextPageWithLayout = observer(() => {
// store hooks
@ -49,7 +49,7 @@ const ImportsPage: NextPageWithLayout = observer(() => {
ImportsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Import Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/index.tsx
View File

@ -28,7 +28,7 @@ const WorkspaceSettingsPage: NextPageWithLayout = observer(() => {
WorkspaceSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="General Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

34
web/pages/[workspaceSlug]/settings/integrations.tsx
View File

@ -2,25 +2,23 @@ import { ReactElement } from "react";
import { observer } from "mobx-react";
import { useRouter } from "next/router";
import useSWR from "swr";
// hooks
// services
// layouts
// components
import { PageHead } from "components/core";
import { WorkspaceSettingHeader } from "components/headers";
import { SingleIntegrationCard } from "components/integration";
// ui
import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "components/ui";
// types
// fetch-keys
import { APP_INTEGRATIONS } from "constants/fetch-keys";
import { PageHead } from "@/components/core";
import { WorkspaceSettingHeader } from "@/components/headers";
import { SingleIntegrationCard } from "@/components/integration";
import { IntegrationAndImportExportBanner, IntegrationsSettingsLoader } from "@/components/ui";
// constants
import { EUserWorkspaceRoles } from "constants/workspace";
import { useUser, useWorkspace } from "hooks/store";
import { AppLayout } from "layouts/app-layout";
import { WorkspaceSettingLayout } from "layouts/settings-layout";
import { NextPageWithLayout } from "lib/types";
import { IntegrationService } from "services/integrations";
import { APP_INTEGRATIONS } from "@/constants/fetch-keys";
import { EUserWorkspaceRoles } from "@/constants/workspace";
// hooks
import { useUser, useWorkspace } from "@/hooks/store";
// layouts
import { AppLayout } from "@/layouts/app-layout";
import { WorkspaceSettingLayout } from "@/layouts/settings-layout";
// types
import { NextPageWithLayout } from "@/lib/types";
// services
import { IntegrationService } from "@/services/integrations";
const integrationService = new IntegrationService();
@ -73,7 +71,7 @@ const WorkspaceIntegrationsPage: NextPageWithLayout = observer(() => {
WorkspaceIntegrationsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Integrations Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/members.tsx
View File

@ -122,7 +122,7 @@ const WorkspaceMembersSettingsPage: NextPageWithLayout = observer(() => {
WorkspaceMembersSettingsPage.getLayout = function getLayout(page: ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Members Settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/webhooks/[webhookId].tsx
View File

@ -107,7 +107,7 @@ const WebhookDetailsPage: NextPageWithLayout = observer(() => {
WebhookDetailsPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);

2
web/pages/[workspaceSlug]/settings/webhooks/index.tsx
View File

@ -102,7 +102,7 @@ const WebhooksListPage: NextPageWithLayout = observer(() => {
WebhooksListPage.getLayout = function getLayout(page: React.ReactElement) {
return (
<AppLayout header={<WorkspaceSettingHeader title="Webhook settings" />}>
<AppLayout header={<WorkspaceSettingHeader />}>
<WorkspaceSettingLayout>{page}</WorkspaceSettingLayout>
</AppLayout>
);