style: responsive title (#1683)
* style: responsive issue title added * style: responsive breadcrumbs and app-header layout * style: breadcrumbs styling * fix: app header dropdown issue and limit app header title to 32 characters
This commit is contained in:
parent
81b1405448
commit
e8f748a67d
30 changed files with 155 additions and 68 deletions
|
|
@ -23,6 +23,8 @@ import { IIssue } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues = {
|
||||
name: "",
|
||||
|
|
@ -146,13 +148,15 @@ const ArchivedIssueDetailsPage: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
|
||||
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
|
||||
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
|
||||
issueDetails?.sequence_id ?? "..."
|
||||
} Details`}
|
||||
unshrinkTitle
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import useSWR from "swr";
|
|||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// hooks
|
||||
import useIssuesView from "hooks/use-issues-view";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// contexts
|
||||
|
|
@ -21,8 +23,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
import useIssuesView from "hooks/use-issues-view";
|
||||
import { useEffect } from "react";
|
||||
|
||||
const ProjectArchivedIssues: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -44,7 +44,7 @@ const ProjectArchivedIssues: NextPage = () => {
|
|||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Archived Issues`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -109,8 +109,9 @@ const SingleCycle: React.FC = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${cycleDetails?.project_detail.name ?? "Project"} Cycles`}
|
||||
title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/cycles`}
|
||||
linkTruncate
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
@ -122,7 +123,7 @@ const SingleCycle: React.FC = () => {
|
|||
{cycleDetails?.name && truncateText(cycleDetails.name, 40)}
|
||||
</>
|
||||
}
|
||||
className="ml-1.5"
|
||||
className="ml-1.5 flex-shrink-0"
|
||||
width="auto"
|
||||
>
|
||||
{cycles?.map((cycle) => (
|
||||
|
|
@ -137,7 +138,7 @@ const SingleCycle: React.FC = () => {
|
|||
</CustomMenu>
|
||||
}
|
||||
right={
|
||||
<div className={`flex items-center gap-2 duration-300`}>
|
||||
<div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
|
||||
<IssuesFilterView />
|
||||
<SecondaryButton
|
||||
onClick={() => setAnalyticsModal(true)}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ import emptyCycle from "public/empty-state/cycle.svg";
|
|||
// types
|
||||
import { SelectCycleType } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
|
||||
|
||||
|
|
@ -91,7 +93,7 @@ const ProjectCycles: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Cycles`} />
|
||||
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Cycles`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ const ProjectInbox: NextPage = () => {
|
|||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Inbox`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ import { IIssue } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues = {
|
||||
name: "",
|
||||
|
|
@ -110,13 +112,15 @@ const IssueDetailsPage: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
|
||||
title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
|
||||
link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<Breadcrumbs.BreadcrumbItem
|
||||
title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
|
||||
issueDetails?.sequence_id ?? "..."
|
||||
} Details`}
|
||||
unshrinkTitle
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ const ProjectIssues: NextPage = () => {
|
|||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 12)} Issues`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,8 +112,9 @@ const SingleModule: React.FC = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
|
||||
title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/modules`}
|
||||
linkTruncate
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ import { IModule, SelectModuleType } from "types/modules";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const ProjectModules: NextPage = () => {
|
||||
const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
|
||||
|
|
@ -73,7 +75,7 @@ const ProjectModules: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Modules`} />
|
||||
<BreadcrumbItem title={`${truncateText(activeProject?.name ?? "Project", 32)} Modules`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ import {
|
|||
import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
|
||||
// helpers
|
||||
import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
|
|
@ -346,7 +346,7 @@ const SinglePage: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
|
||||
<BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project",32)} Pages`} />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { Tab } from "@headlessui/react";
|
|||
import projectService from "services/project.service";
|
||||
// hooks
|
||||
import useLocalStorage from "hooks/use-local-storage";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// icons
|
||||
import { PlusIcon } from "components/icons";
|
||||
// layouts
|
||||
|
|
@ -27,7 +28,8 @@ import { TPageViewProps } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const AllPagesList = dynamic<TPagesListProps>(
|
||||
() => import("components/pages").then((a) => a.AllPagesList),
|
||||
|
|
@ -107,7 +109,9 @@ const ProjectPages: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
|
||||
<BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ import type { NextPage } from "next";
|
|||
import { IProject } from "types";
|
||||
// constant
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const AutomationsSettings: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -65,10 +67,11 @@ const AutomationsSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Automations Settings" />
|
||||
<BreadcrumbItem title="Automations Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ import { IProject, IUserLite, IWorkspace } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
project_lead: null,
|
||||
|
|
@ -103,10 +105,11 @@ const ControlSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Control Settings" />
|
||||
<BreadcrumbItem title="Control Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ import { IEstimate, IProject } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const EstimatesSettings: NextPage = () => {
|
||||
const [estimateFormOpen, setEstimateFormOpen] = useState(false);
|
||||
|
|
@ -115,10 +117,11 @@ const EstimatesSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Estimates Settings" />
|
||||
<BreadcrumbItem title="Estimates Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ import { IProject } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const featuresList = [
|
||||
{
|
||||
|
|
@ -139,10 +141,11 @@ const FeaturesSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Features Settings" />
|
||||
<BreadcrumbItem title="Features Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import {
|
|||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// helpers
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import { IProject, IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
|
|
@ -161,10 +162,11 @@ const GeneralSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="General Settings" />
|
||||
<BreadcrumbItem title="General Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,8 @@ import { IProject } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const ProjectIntegrations: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -48,10 +50,11 @@ const ProjectIntegrations: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Integrations" />
|
||||
<BreadcrumbItem title="Integrations" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,8 @@ import { IIssueLabels } from "types";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const LabelsSettings: NextPage = () => {
|
||||
// create/edit label form
|
||||
|
|
@ -103,10 +105,11 @@ const LabelsSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Labels Settings" />
|
||||
<BreadcrumbItem title="Labels Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ import type { NextPage } from "next";
|
|||
import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const MembersSettings: NextPage = () => {
|
||||
const [inviteModal, setInviteModal] = useState(false);
|
||||
|
|
@ -94,10 +96,11 @@ const MembersSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Members Settings" />
|
||||
<BreadcrumbItem title="Members Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
|||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { getStatesList, orderStateGroups } from "helpers/state.helper";
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
|
|
@ -64,10 +65,11 @@ const StatesSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="States Settings" />
|
||||
<BreadcrumbItem title="States Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -26,6 +26,8 @@ import emptyProject from "public/empty-state/project.svg";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const ProjectsPage: NextPage = () => {
|
||||
// router
|
||||
|
|
@ -44,7 +46,10 @@ const ProjectsPage: NextPage = () => {
|
|||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Projects`}
|
||||
unshrinkTitle={false}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
right={
|
||||
|
|
|
|||
|
|
@ -16,6 +16,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const BillingSettings: NextPage = () => {
|
||||
const {
|
||||
|
|
@ -32,10 +34,11 @@ const BillingSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeWorkspace?.name ?? "Workspace"}`}
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
|
||||
link={`/${workspaceSlug}`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Billing & Plans Settings" />
|
||||
<BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,26 +1,43 @@
|
|||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// layouts
|
||||
import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
|
||||
import { SettingsHeader } from "components/workspace";
|
||||
// components
|
||||
import IntegrationGuide from "components/integration/guide";
|
||||
import { IntegrationAndImportExportBanner } from "components/ui";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import { IntegrationAndImportExportBanner } from "components/ui";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const ImportExport: NextPage = () => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
const { data: activeWorkspace } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
return (
|
||||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title={`${workspaceSlug ?? "Workspace"}`} link={`/${workspaceSlug}`} />
|
||||
<BreadcrumbItem title="Import/ Export Settings" />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
|
||||
link={`/${workspaceSlug}`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
|||
// icons
|
||||
import { LinkIcon } from "@heroicons/react/24/outline";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
import { copyTextToClipboard, truncateText } from "helpers/string.helper";
|
||||
// types
|
||||
import type { IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
|
|
@ -146,7 +146,9 @@ const WorkspaceSettings: NextPage = () => {
|
|||
<WorkspaceAuthorizationLayout
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`}
|
||||
/>
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
|||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const WorkspaceIntegrations: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -38,10 +40,11 @@ const WorkspaceIntegrations: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeWorkspace?.name ?? "Workspace"}`}
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
|
||||
link={`/${workspaceSlug}`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Integrations" />
|
||||
<BreadcrumbItem title="Integrations" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,8 @@ import type { NextPage } from "next";
|
|||
import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const MembersSettings: NextPage = () => {
|
||||
const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
|
||||
|
|
@ -89,10 +91,11 @@ const MembersSettings: NextPage = () => {
|
|||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeWorkspace?.name ?? "Workspace"}`}
|
||||
title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
|
||||
link={`/${workspaceSlug}`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Members Settings" />
|
||||
<BreadcrumbItem title="Members Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue