diff --git a/gradle/changelog/breadcrumb_not_clickable.yaml b/gradle/changelog/breadcrumb_not_clickable.yaml new file mode 100644 index 0000000000..3e22d22824 --- /dev/null +++ b/gradle/changelog/breadcrumb_not_clickable.yaml @@ -0,0 +1,2 @@ +- type: Changed + description: Make "not clickable" mode for breadcrumb ([#1907](https://github.com/scm-manager/scm-manager/pull/1907)) diff --git a/scm-ui/ui-components/src/Breadcrumb.stories.tsx b/scm-ui/ui-components/src/Breadcrumb.stories.tsx index 4400d1be25..f900dc13d8 100644 --- a/scm-ui/ui-components/src/Breadcrumb.stories.tsx +++ b/scm-ui/ui-components/src/Breadcrumb.stories.tsx @@ -49,8 +49,8 @@ const prefix = ( ); storiesOf("BreadCrumb", module) - .addDecorator((story) => {story()}) - .addDecorator((storyFn) => {storyFn()}) + .addDecorator(story => {story()}) + .addDecorator(storyFn => {storyFn()}) .add("Default", () => ( + )) + .add("Not clickable", () => ( + )); diff --git a/scm-ui/ui-components/src/Breadcrumb.tsx b/scm-ui/ui-components/src/Breadcrumb.tsx index 66bdfff194..5982971eab 100644 --- a/scm-ui/ui-components/src/Breadcrumb.tsx +++ b/scm-ui/ui-components/src/Breadcrumb.tsx @@ -37,6 +37,7 @@ type Props = { repository: Repository; branch?: Branch; defaultBranch?: Branch; + clickable?: boolean; revision: string; path: string; baseUrl: string; @@ -115,6 +116,27 @@ const PrefixButton = styled.div` border-right: 1px solid lightgray; `; +const BreadcrumbNode: FC<{ clickable: boolean; text: string; url: string; current?: boolean }> = ({ + clickable, + text, + url, + current +}) => { + if (clickable) { + return ( + + {text} + + ); + } else { + return ( + + {text} + + ); + } +}; + const Breadcrumb: FC = ({ repository, branch, @@ -124,7 +146,8 @@ const Breadcrumb: FC = ({ baseUrl, sources, permalink, - preButtons + preButtons, + clickable = true }) => { const location = useLocation(); const history = useHistory(); @@ -135,6 +158,7 @@ const Breadcrumb: FC = ({ if (path) { const paths = path.split("/"); return paths.map((pathFragment, index) => { + const decodedPathFragment = decodeURIComponent(pathFragment); let currPath = paths .slice(0, index + 1) .map(encodeURIComponent) @@ -145,21 +169,17 @@ const Breadcrumb: FC = ({ if (paths.length - 1 === index) { return (
  • - - {decodeURIComponent(pathFragment)} - +
  • ); } return (
  • - - {decodeURIComponent(pathFragment)} - +
  • ); }); @@ -196,9 +216,13 @@ const Breadcrumb: FC = ({ {prefixButtons}
    • - - - + {clickable ? ( + + + + ) : ( + + )}
    • {pathSection()}
    diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 17e487aba4..f8ed215e2d 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -132,6 +132,7 @@ exports[`Storyshots BreadCrumb Default 1`] = ` className="is-ellipsis-overflow" href="/" onClick={[Function]} + title="cloudogu" > cloudogu @@ -290,6 +291,7 @@ exports[`Storyshots BreadCrumb Long path 1`] = ` className="is-ellipsis-overflow" href="/" onClick={[Function]} + title="SvnRepositoryServiceResolver.java" > SvnRepositoryServiceResolver.java @@ -324,6 +326,96 @@ exports[`Storyshots BreadCrumb Long path 1`] = ` `; +exports[`Storyshots BreadCrumb Not clickable 1`] = ` +
    +
    + +
    +
    +
    +
    +`; + exports[`Storyshots BreadCrumb With prefix button 1`] = `
    cloudogu