mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 09:25:43 +01:00
transfer frontend changes to typescript files
This commit is contained in:
Eduard Heimbuch
@@ -1,129 +0,0 @@
|
|||||||
//@flow
|
|
||||||
import React from "react";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
import { translate } from "react-i18next";
|
|
||||||
import classNames from "classnames";
|
|
||||||
import styled from "styled-components";
|
|
||||||
import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
|
|
||||||
import type { Branch, Repository } from "@scm-manager/ui-types";
|
|
||||||
import Icon from "./Icon";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
repository: Repository,
|
|
||||||
branch: Branch,
|
|
||||||
defaultBranch: Branch,
|
|
||||||
branches: Branch[],
|
|
||||||
revision: string,
|
|
||||||
path: string,
|
|
||||||
baseUrl: string,
|
|
||||||
|
|
||||||
// Context props
|
|
||||||
t: string => string
|
|
||||||
};
|
|
||||||
|
|
||||||
const FlexStartNav = styled.nav`
|
|
||||||
flex: 1;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const HomeIcon = styled(Icon)`
|
|
||||||
line-height: 1.5rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ActionWrapper = styled.div`
|
|
||||||
align-self: center;
|
|
||||||
padding-right: 1rem;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class Breadcrumb extends React.Component<Props> {
|
|
||||||
renderPath() {
|
|
||||||
const { revision, path, baseUrl } = this.props;
|
|
||||||
|
|
||||||
if (path) {
|
|
||||||
const paths = path.split("/");
|
|
||||||
const map = paths.map((path, index) => {
|
|
||||||
const currPath = paths.slice(0, index + 1).join("/");
|
|
||||||
if (paths.length - 1 === index) {
|
|
||||||
return (
|
|
||||||
<li className="is-active" key={index}>
|
|
||||||
<Link to="#" aria-current="page">
|
|
||||||
{path}
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<li key={index}>
|
|
||||||
<Link to={baseUrl + "/" + revision + "/" + currPath}>{path}</Link>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
return map;
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
baseUrl,
|
|
||||||
branch,
|
|
||||||
defaultBranch,
|
|
||||||
branches,
|
|
||||||
revision,
|
|
||||||
path,
|
|
||||||
repository,
|
|
||||||
t
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
let homeUrl = baseUrl + "/";
|
|
||||||
if (revision) {
|
|
||||||
homeUrl += encodeURIComponent(revision) + "/";
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div className="is-flex">
|
|
||||||
<FlexStartNav
|
|
||||||
className={classNames("breadcrumb", "sources-breadcrumb")}
|
|
||||||
aria-label="breadcrumbs"
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<Link to={homeUrl}>
|
|
||||||
<HomeIcon
|
|
||||||
title={t("breadcrumb.home")}
|
|
||||||
name="home"
|
|
||||||
color="inherit"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{this.renderPath()}
|
|
||||||
</ul>
|
|
||||||
</FlexStartNav>
|
|
||||||
{binder.hasExtension("repos.sources.actionbar") && (
|
|
||||||
<ActionWrapper>
|
|
||||||
<ExtensionPoint
|
|
||||||
name="repos.sources.actionbar"
|
|
||||||
props={{
|
|
||||||
baseUrl,
|
|
||||||
branch: branch ? branch : defaultBranch,
|
|
||||||
revision: branches ? undefined : revision,
|
|
||||||
path,
|
|
||||||
isBranchUrl: branches
|
|
||||||
? branches.filter(
|
|
||||||
b => b.name.replace("/", "%2F") === revision
|
|
||||||
).length > 0
|
|
||||||
: true,
|
|
||||||
repository
|
|
||||||
}}
|
|
||||||
renderAll={true}
|
|
||||||
/>
|
|
||||||
</ActionWrapper>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<hr className="is-marginless" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default translate("commons")(Breadcrumb);
|
|
||||||
@@ -61,13 +61,18 @@ class Breadcrumb extends React.Component<Props> {
|
|||||||
render() {
|
render() {
|
||||||
const { baseUrl, branch, defaultBranch, branches, revision, path, repository, t } = this.props;
|
const { baseUrl, branch, defaultBranch, branches, revision, path, repository, t } = this.props;
|
||||||
|
|
||||||
|
let homeUrl = baseUrl + "/";
|
||||||
|
if (revision) {
|
||||||
|
homeUrl += encodeURIComponent(revision) + "/";
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="is-flex">
|
<div className="is-flex">
|
||||||
<FlexStartNav className={classNames("breadcrumb", "sources-breadcrumb")} aria-label="breadcrumbs">
|
<FlexStartNav className={classNames("breadcrumb", "sources-breadcrumb")} aria-label="breadcrumbs">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<Link to={baseUrl + "/" + revision + "/"}>
|
<Link to={homeUrl}>
|
||||||
<HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
|
<HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -1,230 +0,0 @@
|
|||||||
// @flow
|
|
||||||
import React from "react";
|
|
||||||
import {connect} from "react-redux";
|
|
||||||
import {withRouter} from "react-router-dom";
|
|
||||||
import type {Branch, Repository} from "@scm-manager/ui-types";
|
|
||||||
import FileTree from "../components/FileTree";
|
|
||||||
import {BranchSelector, Breadcrumb, ErrorNotification, Loading} from "@scm-manager/ui-components";
|
|
||||||
import {translate} from "react-i18next";
|
|
||||||
import {
|
|
||||||
fetchBranches,
|
|
||||||
getBranches,
|
|
||||||
getFetchBranchesFailure,
|
|
||||||
isFetchBranchesPending
|
|
||||||
} from "../../branches/modules/branches";
|
|
||||||
import {compose} from "redux";
|
|
||||||
import Content from "./Content";
|
|
||||||
import {fetchSources, isDirectory} from "../modules/sources";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
repository: Repository,
|
|
||||||
loading: boolean,
|
|
||||||
error: Error,
|
|
||||||
baseUrl: string,
|
|
||||||
branches: Branch[],
|
|
||||||
revision: string,
|
|
||||||
path: string,
|
|
||||||
currentFileIsDirectory: boolean,
|
|
||||||
|
|
||||||
// dispatch props
|
|
||||||
fetchBranches: Repository => void,
|
|
||||||
fetchSources: (Repository, string, string) => void,
|
|
||||||
|
|
||||||
// Context props
|
|
||||||
history: any,
|
|
||||||
match: any,
|
|
||||||
location: any,
|
|
||||||
t: string => string
|
|
||||||
};
|
|
||||||
|
|
||||||
type State = {
|
|
||||||
selectedBranch: any
|
|
||||||
};
|
|
||||||
|
|
||||||
class Sources extends React.Component<Props, State> {
|
|
||||||
constructor(props: Props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
|
||||||
selectedBranch: null
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const {
|
|
||||||
fetchBranches,
|
|
||||||
repository,
|
|
||||||
revision,
|
|
||||||
path,
|
|
||||||
fetchSources
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
fetchBranches(repository);
|
|
||||||
fetchSources(repository, revision, path);
|
|
||||||
|
|
||||||
this.redirectToDefaultBranch();
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
|
||||||
const { fetchSources, repository, revision, path } = this.props;
|
|
||||||
if (prevProps.revision !== revision || prevProps.path !== path) {
|
|
||||||
fetchSources(repository, revision, path);
|
|
||||||
}
|
|
||||||
|
|
||||||
this.redirectToDefaultBranch();
|
|
||||||
}
|
|
||||||
|
|
||||||
redirectToDefaultBranch = () => {
|
|
||||||
const { branches } = this.props;
|
|
||||||
if (this.shouldRedirectToDefaultBranch()) {
|
|
||||||
const defaultBranches = branches.filter(b => b.defaultBranch);
|
|
||||||
|
|
||||||
if (defaultBranches.length > 0) {
|
|
||||||
this.branchSelected(defaultBranches[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
shouldRedirectToDefaultBranch = () => {
|
|
||||||
const { branches, revision } = this.props;
|
|
||||||
return branches && !revision;
|
|
||||||
};
|
|
||||||
|
|
||||||
branchSelected = (branch?: Branch) => {
|
|
||||||
const { baseUrl, history, path } = this.props;
|
|
||||||
let url;
|
|
||||||
if (branch) {
|
|
||||||
this.setState({ selectedBranch: branch });
|
|
||||||
if (path) {
|
|
||||||
url = `${baseUrl}/${encodeURIComponent(branch.name)}/${path}`;
|
|
||||||
} else {
|
|
||||||
url = `${baseUrl}/${encodeURIComponent(branch.name)}/`;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.setState({ selectedBranch: null });
|
|
||||||
url = `${baseUrl}/`;
|
|
||||||
}
|
|
||||||
history.push(url);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
repository,
|
|
||||||
baseUrl,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
revision,
|
|
||||||
path,
|
|
||||||
currentFileIsDirectory
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
return <ErrorNotification error={error} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
return <Loading />;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (currentFileIsDirectory) {
|
|
||||||
return (
|
|
||||||
<div className="panel">
|
|
||||||
{this.renderBranchSelector()}
|
|
||||||
{this.renderBreadcrumb()}
|
|
||||||
<FileTree
|
|
||||||
repository={repository}
|
|
||||||
revision={revision}
|
|
||||||
path={path}
|
|
||||||
baseUrl={baseUrl}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Content repository={repository} revision={revision} path={path} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
renderBranchSelector = () => {
|
|
||||||
const { branches, revision, t } = this.props;
|
|
||||||
|
|
||||||
if (branches) {
|
|
||||||
return (
|
|
||||||
<div className="panel-heading">
|
|
||||||
<BranchSelector
|
|
||||||
branches={branches}
|
|
||||||
selectedBranch={revision}
|
|
||||||
label={t("changesets.branchSelectorLabel")}
|
|
||||||
selected={(b: Branch) => {
|
|
||||||
this.branchSelected(b);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
};
|
|
||||||
|
|
||||||
renderBreadcrumb = () => {
|
|
||||||
const { revision, path, baseUrl, branches, repository } = this.props;
|
|
||||||
const { selectedBranch } = this.state;
|
|
||||||
|
|
||||||
//TODO refactor
|
|
||||||
return (
|
|
||||||
<Breadcrumb
|
|
||||||
revision={revision}
|
|
||||||
path={path}
|
|
||||||
baseUrl={baseUrl}
|
|
||||||
branch={selectedBranch}
|
|
||||||
defaultBranch={
|
|
||||||
branches && branches.filter(b => b.defaultBranch === true)[0]
|
|
||||||
}
|
|
||||||
branches={branches}
|
|
||||||
repository={repository}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => {
|
|
||||||
const { repository, match } = ownProps;
|
|
||||||
const { revision, path } = match.params;
|
|
||||||
const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
|
|
||||||
const loading = isFetchBranchesPending(state, repository);
|
|
||||||
const error = getFetchBranchesFailure(state, repository);
|
|
||||||
const branches = getBranches(state, repository);
|
|
||||||
const currentFileIsDirectory = decodedRevision
|
|
||||||
? isDirectory(state, repository, decodedRevision, path)
|
|
||||||
: isDirectory(state, repository, revision, path);
|
|
||||||
|
|
||||||
return {
|
|
||||||
repository,
|
|
||||||
revision: decodedRevision,
|
|
||||||
path,
|
|
||||||
loading,
|
|
||||||
error,
|
|
||||||
branches,
|
|
||||||
currentFileIsDirectory
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => {
|
|
||||||
return {
|
|
||||||
fetchBranches: (repository: Repository) => {
|
|
||||||
dispatch(fetchBranches(repository));
|
|
||||||
},
|
|
||||||
fetchSources: (repository: Repository, revision: string, path: string) => {
|
|
||||||
dispatch(fetchSources(repository, revision, path));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default compose(
|
|
||||||
translate("repos"),
|
|
||||||
withRouter,
|
|
||||||
connect(
|
|
||||||
mapStateToProps,
|
|
||||||
mapDispatchToProps
|
|
||||||
)
|
|
||||||
)(Sources);
|
|
||||||
@@ -151,20 +151,19 @@ class Sources extends React.Component<Props, State> {
|
|||||||
const { revision, path, baseUrl, branches, repository } = this.props;
|
const { revision, path, baseUrl, branches, repository } = this.props;
|
||||||
const { selectedBranch } = this.state;
|
const { selectedBranch } = this.state;
|
||||||
|
|
||||||
if (revision) {
|
return (
|
||||||
return (
|
<Breadcrumb
|
||||||
<Breadcrumb
|
revision={revision}
|
||||||
revision={encodeURIComponent(revision)}
|
path={path}
|
||||||
path={path}
|
baseUrl={baseUrl}
|
||||||
baseUrl={baseUrl}
|
branch={selectedBranch}
|
||||||
branch={selectedBranch}
|
defaultBranch={
|
||||||
defaultBranch={branches && branches.filter(b => b.defaultBranch === true)[0]}
|
branches && branches.filter(b => b.defaultBranch === true)[0]
|
||||||
branches={branches}
|
}
|
||||||
repository={repository}
|
branches={branches}
|
||||||
/>
|
repository={repository}
|
||||||
);
|
/>
|
||||||
}
|
);
|
||||||
return null;
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user