use i18n for missing extension warning / fix encoding for branches containing slashes

scm-ui/ui-webapp/src/repos/sources/containers/SourceExtensions.tsx

@@ -3,17 +3,13 @@ import { Repository, File } from "@scm-manager/ui-types";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { ExtensionPoint, binder } from "@scm-manager/ui-extensions";
-import {
-  fetchSources,
-  getFetchSourcesFailure,
-  getSources,
-  isFetchSourcesPending
-} from "../modules/sources";
-import { connect} from "react-redux";
+import { fetchSources, getFetchSourcesFailure, getSources, isFetchSourcesPending } from "../modules/sources";
+import { connect } from "react-redux";
 import { Loading, ErrorNotification } from "@scm-manager/ui-components";
 import Notification from "@scm-manager/ui-components/src/Notification";
+import {WithTranslation, withTranslation} from "react-i18next";
 
-type Props = RouteComponentProps & {
+type Props = WithTranslation & RouteComponentProps & {
   repository: Repository;
 
   // url params
@@ -36,11 +32,11 @@ class SourceExtensions extends React.Component<Props> {
   componentDidMount() {
     const { fetchSources, repository, revision, path } = this.props;
     // TODO get typing right
-    fetchSources(repository, revision || "", path || "");
+    fetchSources(repository,revision || "", path || "");
   }
 
   render() {
-    const { loading, error, repository, extension, revision, path, sources } = this.props;
+    const { loading, error, repository, extension, revision, path, sources, t } = this.props;
     if (error) {
       return <ErrorNotification error={error} />;
     }
@@ -50,8 +46,7 @@ class SourceExtensions extends React.Component<Props> {
 
     const extprops = { extension, repository, revision, path, sources };
     if (!binder.hasExtension(extensionPointName, extprops)) {
-      // TODO i18n
-      return <Notification type="warning">No extension bound</Notification>;
+      return <Notification type="warning">{t("sources.extension.notBound")}</Notification>;
     }
 
     return <ExtensionPoint name={extensionPointName} props={extprops} />;
@@ -60,15 +55,12 @@ class SourceExtensions extends React.Component<Props> {
 
 const mapStateToProps = (state: any, ownProps: Props): Partial<Props> => {
   const { repository, match } = ownProps;
-  // TODO add query-string v6
-  // see : https://www.pluralsight.com/guides/react-router-typescript
   // @ts-ignore
   const revision: string = match.params.revision;
   // @ts-ignore
   const path: string = match.params.path;
   // @ts-ignore
   const extension: string = match.params.extension;
-  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
   const loading = isFetchSourcesPending(state, repository, revision, path);
   const error = getFetchSourcesFailure(state, repository, revision, path);
   const sources = getSources(state, repository, revision, path);
@@ -76,7 +68,7 @@ const mapStateToProps = (state: any, ownProps: Props): Partial<Props> => {
   return {
     repository,
     extension,
-    revision: decodedRevision,
+    revision,
     path,
     loading,
     error,
@@ -87,12 +79,14 @@ const mapStateToProps = (state: any, ownProps: Props): Partial<Props> => {
 const mapDispatchToProps = (dispatch: any) => {
   return {
     fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, revision, path));
+      dispatch(fetchSources(repository, decodeURIComponent(revision), path));
     }
   };
 };
 
-export default withRouter(connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(SourceExtensions));
+export default withRouter(
+  connect(
+    mapStateToProps,
+    mapDispatchToProps
+  )(withTranslation("repos")(SourceExtensions))
+);

scm-ui/ui-webapp/src/repos/sources/containers/Sources.tsx

@@ -171,18 +171,18 @@ class Sources extends React.Component<Props, State> {
 const mapStateToProps = (state, ownProps) => {
   const { repository, match } = ownProps;
   const { revision, path } = match.params;
-  const decodedRevision = revision ? decodeURIComponent(revision) : undefined;
+  const decodedRevision = revision ? decodeURIComponent(revision) : revision;
   const loading = isFetchBranchesPending(state, repository);
   const error = getFetchBranchesFailure(state, repository);
   const branches = getBranches(state, repository);
-  const currentFileIsDirectory = decodedRevision
+  const currentFileIsDirectory = revision
     ? isDirectory(state, repository, decodedRevision, path)
-    : isDirectory(state, repository, revision, path);
-  const sources = getSources(state, repository, revision, path);
+    : isDirectory(state, repository, decodedRevision, path);
+  const sources = getSources(state, repository, decodedRevision, path);
 
   return {
     repository,
-    revision: decodedRevision,
+    revision,
     path,
     loading,
     error,
@@ -198,7 +198,7 @@ const mapDispatchToProps = dispatch => {
       dispatch(fetchBranches(repository));
     },
     fetchSources: (repository: Repository, revision: string, path: string) => {
-      dispatch(fetchSources(repository, revision, path));
+      dispatch(fetchSources(repository, decodeURIComponent(revision), path));
     }
   };
 };

scm-ui/ui-webapp/src/repos/sources/modules/sources.ts

@@ -1,5 +1,5 @@
 import * as types from "../../../modules/types";
-import { Repository, File, Action } from "@scm-manager/ui-types";
+import { Repository, File, Action, Link } from "@scm-manager/ui-types";
 import { apiClient } from "@scm-manager/ui-components";
 import { isPending } from "../../../modules/pending";
 import { getFailure } from "../../../modules/failure";
@@ -16,16 +16,16 @@ export function fetchSources(repository: Repository, revision: string, path: str
       .get(createUrl(repository, revision, path))
       .then(response => response.json())
       .then(sources => {
-        dispatch(fetchSourcesSuccess(repository, revision, path, sources));
+        dispatch(fetchSourcesSuccess(repository, decodeURIComponent(revision), path, sources));
       })
       .catch(err => {
-        dispatch(fetchSourcesFailure(repository, revision, path, err));
+        dispatch(fetchSourcesFailure(repository, decodeURIComponent(revision), path, err));
       });
   };
 }
 
 function createUrl(repository: Repository, revision: string, path: string) {
-  const base = repository._links.sources.href;
+  const base = (repository._links.sources as Link).href;
   if (!revision && !path) {
     return base;
   }
@@ -61,7 +61,7 @@ export function fetchSourcesFailure(repository: Repository, revision: string, pa
 function createItemId(repository: Repository, revision: string, path: string) {
   const revPart = revision ? revision : "_";
   const pathPart = path ? path : "";
-  return `${repository.namespace}/${repository.name}/${revPart}/${pathPart}`;
+  return `${repository.namespace}/${repository.name}/${decodeURIComponent(revPart)}/${pathPart}`;
 }
 
 // reducer