Set descriptive document titles

Document titles represent the pages, for example in lists
with bookmarks. They are important for navigation and
orientation in websites. If the offer or the content of the
page is not labeled, orientation is impaired.

This changes the behavior for setting document titles.
The functionality has been removed from the Page and
Title components and is now represented by `useDocumentTitle`
hook to better describe the content of inividual pages.

Co-authored-by: Anna Vetcininova<anna.vetcininova@cloudogu.com>
This commit is contained in:
Florian Scholdei
2024-12-10 16:41:01 +01:00
parent 3ed457a891
commit 3c0ad46f07
74 changed files with 812 additions and 445 deletions

View File

@@ -27,6 +27,7 @@ import {
Notification,
urls,
} from "@scm-manager/ui-components";
import { useDocumentTitle } from "@scm-manager/ui-core";
export const usePage = () => {
const match = useRouteMatch();
@@ -39,12 +40,54 @@ type Props = {
url: string;
};
const Changesets: FC<Props> = ({ repository, branch, url }) => {
const Changesets: FC<Props> = ({ repository, branch, ...props }) => {
const page = usePage();
const { isLoading, error, data } = useChangesets(repository, { branch, page: page - 1 });
const [t] = useTranslation("repos");
const getDocumentTitle = () => {
if (data?.pageTotal && data.pageTotal > 1 && page) {
if (branch) {
return t("changesets.commitsWithPageRevisionAndNamespaceName", {
page,
total: data.pageTotal,
revision: branch.name,
namespace: repository.namespace,
name: repository.name,
});
} else {
return t("changesets.commitsWithPageAndNamespaceName", {
page,
total: data.pageTotal,
namespace: repository.namespace,
name: repository.name,
});
}
} else if (branch) {
return t("changesets.commitsWithRevisionAndNamespaceName", {
revision: branch.name,
namespace: repository.namespace,
name: repository.name,
});
} else {
return t("changesets.commitsWithNamespaceName", {
namespace: repository.namespace,
name: repository.name,
});
}
};
useDocumentTitle(getDocumentTitle());
return <ChangesetsPanel repository={repository} error={error} isLoading={isLoading} data={data} url={url} />;
return (
<ChangesetsPanel
isLoading={isLoading}
error={error}
data={data}
repository={repository}
branch={branch}
{...props}
/>
);
};
type ChangesetsPanelProps = Props & {
@@ -53,7 +96,7 @@ type ChangesetsPanelProps = Props & {
data?: ChangesetCollection;
};
export const ChangesetsPanel: FC<ChangesetsPanelProps> = ({ repository, error, isLoading, data, url }) => {
export const ChangesetsPanel: FC<ChangesetsPanelProps> = ({ repository, error, isLoading, data, url, branch }) => {
const page = usePage();
const [t] = useTranslation("repos");
const changesets = data?._embedded?.changesets;