migrate ui-components from flow to typescript

2025-11-15 09:46:16 +01:00 · 2019-10-20 16:59:02 +02:00
parent c41efbdc4f
commit f49e17a3a7
151 changed files with 2039 additions and 25265 deletions
--- a/scm-ui/ui-components/src/repos/Diff.tsx
+++ b/scm-ui/ui-components/src/repos/Diff.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import DiffFile from './DiffFile';
-import { DiffObjectProps, File } from './DiffTypes';
+import React from "react";
+import DiffFile from "./DiffFile";
+import { DiffObjectProps, File } from "./DiffTypes";

 type Props = DiffObjectProps & {
  diff: File[];
@@ -8,8 +8,8 @@ type Props = DiffObjectProps & {
 };

 class Diff extends React.Component<Props> {
-  static defaultProps = {
-    sideBySide: false,
+  static defaultProps: Partial<Props> = {
+    sideBySide: false
  };

  render() {
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -1,35 +1,36 @@
-import React from 'react';
-import { translate } from 'react-i18next';
-import classNames from 'classnames';
-import styled from 'styled-components';
+import React from "react";
+import { translate, InjectedTranslateProps } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
 import {
  Change,
  Diff as DiffComponent,
-  DiffObjectProps,
-  File,
  getChangeKey,
-  Hunk,
-} from 'react-diff-view';
-import { Button, ButtonGroup } from '../buttons';
-import Tag from '../Tag';
-import Icon from '../Icon';
+  Hunk
+} from "react-diff-view";
+import { Button, ButtonGroup } from "../buttons";
+import Tag from "../Tag";
+import Icon from "../Icon";
+import { File, Hunk as HunkType, DiffObjectProps } from "./DiffTypes";
+import { ReactNode } from "react";

-type Props = DiffObjectProps & {
-  file: File;
-  defaultCollapse: boolean;
+type Props = DiffObjectProps &
+  InjectedTranslateProps & {
+    file: File;
+    defaultCollapse?: boolean;
+  };

-  // context props
-  t: (p: string) => string;
+type Collapsible = {
+  collapsed?: boolean;
 };

-type State = {
-  collapsed: boolean;
+type State = Collapsible & {
  sideBySide: boolean;
 };

 const DiffFilePanel = styled.div`
  /* remove bottom border for collapsed panels */
-  ${props => (props.collapsed ? 'border-bottom: none;' : '')};
+  ${(props: Collapsible) => (props.collapsed ? "border-bottom: none;" : "")};
 `;

 const FlexWrapLevel = styled.div`
@@ -83,24 +84,24 @@ const ModifiedDiffComponent = styled(DiffComponent)`
 `;

 class DiffFile extends React.Component<Props, State> {
-  static defaultProps = {
-    defaultCollapse: false,
+  static defaultProps: Partial<Props> = {
+    defaultCollapse: false
  };

  constructor(props: Props) {
    super(props);
    this.state = {
-      collapsed: this.props.defaultCollapse,
-      sideBySide: false,
+      collapsed: !!this.props.defaultCollapse,
+      sideBySide: false
    };
  }

  // collapse diff by clicking collapseDiffs button
-  componentDidUpdate(prevProps) {
+  componentDidUpdate(prevProps: Props) {
    const { defaultCollapse } = this.props;
    if (prevProps.defaultCollapse !== defaultCollapse) {
      this.setState({
-        collapsed: defaultCollapse,
+        collapsed: defaultCollapse
      });
    }
  }
@@ -109,67 +110,67 @@ class DiffFile extends React.Component<Props, State> {
    const { file } = this.props;
    if (file && !file.isBinary) {
      this.setState(state => ({
-        collapsed: !state.collapsed,
+        collapsed: !state.collapsed
      }));
    }
  };

  toggleSideBySide = () => {
    this.setState(state => ({
-      sideBySide: !state.sideBySide,
+      sideBySide: !state.sideBySide
    }));
  };

  setCollapse = (collapsed: boolean) => {
    this.setState({
-      collapsed,
+      collapsed
    });
  };

-  createHunkHeader = (hunk: Hunk, i: number) => {
+  createHunkHeader = (hunk: HunkType, i: number) => {
    if (i > 0) {
      return <HunkDivider />;
    }
    return null;
  };

-  collectHunkAnnotations = (hunk: Hunk) => {
+  collectHunkAnnotations = (hunk: HunkType) => {
    const { annotationFactory, file } = this.props;
    if (annotationFactory) {
      return annotationFactory({
        hunk,
-        file,
+        file
      });
    }
  };

-  handleClickEvent = (change: Change, hunk: Hunk) => {
+  handleClickEvent = (change: Change, hunk: HunkType) => {
    const { file, onClick } = this.props;
    const context = {
      changeId: getChangeKey(change),
      change,
      hunk,
-      file,
+      file
    };
    if (onClick) {
      onClick(context);
    }
  };

-  createCustomEvents = (hunk: Hunk) => {
+  createCustomEvents = (hunk: HunkType) => {
    const { onClick } = this.props;
    if (onClick) {
      return {
        gutter: {
          onClick: (change: Change) => {
            this.handleClickEvent(change, hunk);
-          },
-        },
+          }
+        }
      };
    }
  };

-  renderHunk = (hunk: Hunk, i: number) => {
+  renderHunk = (hunk: HunkType, i: number) => {
    return (
      <Hunk
        key={hunk.content}
@@ -181,59 +182,55 @@ class DiffFile extends React.Component<Props, State> {
    );
  };

-  renderFileTitle = (file: any) => {
+  renderFileTitle = (file: File) => {
    if (
      file.oldPath !== file.newPath &&
-      (file.type === 'copy' || file.type === 'rename')
+      (file.type === "copy" || file.type === "rename")
    ) {
      return (
        <>
-          {file.oldPath} <Icon name="arrow-right" color="inherit" />{' '}
+          {file.oldPath} <Icon name="arrow-right" color="inherit" />{" "}
          {file.newPath}
        </>
      );
-    } else if (file.type === 'delete') {
+    } else if (file.type === "delete") {
      return file.oldPath;
    }
    return file.newPath;
  };

-  hoverFileTitle = (file: any) => {
+  hoverFileTitle = (file: File): string => {
    if (
      file.oldPath !== file.newPath &&
-      (file.type === 'copy' || file.type === 'rename')
+      (file.type === "copy" || file.type === "rename")
    ) {
-      return (
-        <>
-          {file.oldPath} > {file.newPath}
-        </>
-      );
-    } else if (file.type === 'delete') {
+      return `${file.oldPath} > ${file.newPath}`;
+    } else if (file.type === "delete") {
      return file.oldPath;
    }
    return file.newPath;
  };

-  renderChangeTag = (file: any) => {
+  renderChangeTag = (file: File) => {
    const { t } = this.props;
    if (!file.type) {
      return;
    }
-    const key = 'diff.changes.' + file.type;
+    const key = "diff.changes." + file.type;
    let value = t(key);
    if (key === value) {
      value = file.type;
    }
    const color =
-      value === 'added'
-        ? 'success is-outlined'
-        : value === 'deleted'
-        ? 'danger is-outlined'
-        : 'info is-outlined';
+      value === "added"
+        ? "success is-outlined"
+        : value === "deleted"
+        ? "danger is-outlined"
+        : "info is-outlined";

    return (
      <ChangeTypeTag
-        className={classNames('is-rounded', 'has-text-weight-normal')}
+        className={classNames("is-rounded", "has-text-weight-normal")}
        color={color}
        label={value}
      />
@@ -243,15 +240,15 @@ class DiffFile extends React.Component<Props, State> {
  render() {
    const { file, fileControlFactory, fileAnnotationFactory, t } = this.props;
    const { collapsed, sideBySide } = this.state;
-    const viewType = sideBySide ? 'split' : 'unified';
+    const viewType = sideBySide ? "split" : "unified";

    let body = null;
-    let icon = 'angle-right';
+    let icon = "angle-right";
    if (!collapsed) {
      const fileAnnotations = fileAnnotationFactory
        ? fileAnnotationFactory(file)
        : null;
-      icon = 'angle-down';
+      icon = "angle-down";
      body = (
        <div className="panel-block is-paddingless">
          {fileAnnotations}
@@ -269,34 +266,34 @@ class DiffFile extends React.Component<Props, State> {
      : null;
    return (
      <DiffFilePanel
-        className={classNames('panel', 'is-size-6')}
+        className={classNames("panel", "is-size-6")}
        collapsed={(file && file.isBinary) || collapsed}
      >
        <div className="panel-heading">
          <FlexWrapLevel className="level">
            <FullWidthTitleHeader
              className={classNames(
-                'level-left',
-                'is-flex',
-                'has-cursor-pointer',
+                "level-left",
+                "is-flex",
+                "has-cursor-pointer"
              )}
              onClick={this.toggleCollapse}
              title={this.hoverFileTitle(file)}
            >
              {collapseIcon}
              <TitleWrapper
-                className={classNames('is-ellipsis-overflow', 'is-size-6')}
+                className={classNames("is-ellipsis-overflow", "is-size-6")}
              >
                {this.renderFileTitle(file)}
              </TitleWrapper>
              {this.renderChangeTag(file)}
            </FullWidthTitleHeader>
-            <ButtonWrapper className={classNames('level-right', 'is-flex')}>
+            <ButtonWrapper className={classNames("level-right", "is-flex")}>
              <ButtonGroup>
                <Button
                  action={this.toggleSideBySide}
-                  icon={sideBySide ? 'align-left' : 'columns'}
-                  label={t(sideBySide ? 'diff.combined' : 'diff.sideBySide')}
+                  icon={sideBySide ? "align-left" : "columns"}
+                  label={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
                  reducedMobile={true}
                />
                {fileControls}
@@ -310,4 +307,4 @@ class DiffFile extends React.Component<Props, State> {
  }
 }

-export default translate('repos')(DiffFile);
+export default translate("repos")(DiffFile);
--- a/scm-ui/ui-components/src/repos/DiffTypes.ts
+++ b/scm-ui/ui-components/src/repos/DiffTypes.ts
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import React, { ReactNode } from "react";

 // We place the types here and not in @scm-manager/ui-types,
 // because they represent not a real scm-manager related type.
 // This types represents only the required types for the Diff related components,
 // such as every other component does with its Props.

-export type FileChangeType = 'add' | 'modify' | 'delete' | 'copy' | 'rename';
+export type FileChangeType = "add" | "modify" | "delete" | "copy" | "rename";

 export type File = {
  hunks: Hunk[];
@@ -18,6 +18,8 @@ export type File = {
  oldPath: string;
  oldRevision?: string;
  type: FileChangeType;
+  // TODO does this property exists?
+  isBinary: boolean;
 };

 export type Hunk = {
@@ -25,7 +27,7 @@ export type Hunk = {
  content: string;
 };

-export type ChangeType = 'insert' | 'delete' | 'normal';
+export type ChangeType = "insert" | "delete" | "normal";

 export type Change = {
  content: string;
@@ -45,11 +47,11 @@ export type BaseContext = {

 export type AnnotationFactoryContext = BaseContext;

-export type FileAnnotationFactory = (file: File) => React.Node[];
+export type FileAnnotationFactory = (file: File) => ReactNode[];

 // key = change id, value = react component
 export type AnnotationFactory = (
-  context: AnnotationFactoryContext,
+  context: AnnotationFactoryContext
 ) => {
  [key: string]: any;
 };
@@ -63,8 +65,8 @@ export type DiffEventHandler = (context: DiffEventContext) => void;

 export type FileControlFactory = (
  file: File,
-  setCollapseState: (p: boolean) => void,
-) => React.Node | null | undefined;
+  setCollapseState: (p: boolean) => void
+) => ReactNode | null | undefined;

 export type DiffObjectProps = {
  sideBySide: boolean;
--- a/scm-ui/ui-components/src/repos/LoadingDiff.tsx
+++ b/scm-ui/ui-components/src/repos/LoadingDiff.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { apiClient } from '../apiclient';
-import ErrorNotification from '../ErrorNotification';
-import parser from 'gitdiff-parser';
+import React from "react";
+import { apiClient } from "../apiclient";
+import ErrorNotification from "../ErrorNotification";
+import parser from "gitdiff-parser";

-import Loading from '../Loading';
-import Diff from './Diff';
-import { DiffObjectProps, File } from './DiffTypes';
+import Loading from "../Loading";
+import Diff from "./Diff";
+import { DiffObjectProps, File } from "./DiffTypes";

 type Props = DiffObjectProps & {
  url: string;
@@ -20,13 +20,13 @@ type State = {

 class LoadingDiff extends React.Component<Props, State> {
  static defaultProps = {
-    sideBySide: false,
+    sideBySide: false
  };

  constructor(props: Props) {
    super(props);
    this.state = {
-      loading: true,
+      loading: true
    };
  }

@@ -47,16 +47,16 @@ class LoadingDiff extends React.Component<Props, State> {
      .then(response => response.text())
      .then(parser.parse)
      // $FlowFixMe
-      .then((diff: File[]) => {
+      .then((diff: any) => {
        this.setState({
          loading: false,
-          diff: diff,
+          diff: diff
        });
      })
-      .catch(error => {
+      .catch((error: Error) => {
        this.setState({
          loading: false,
-          error,
+          error
        });
      });
  };
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetAuthor.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Changeset } from '@scm-manager/ui-types';
-import { ExtensionPoint } from '@scm-manager/ui-extensions';
-import { translate } from 'react-i18next';
+import React from "react";
+import { Changeset } from "@scm-manager/ui-types";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { translate } from "react-i18next";

 type Props = {
  changeset: Changeset;
@@ -28,8 +28,8 @@ class ChangesetAuthor extends React.Component<Props> {
    const { t } = this.props;
    return (
      <a
-        href={'mailto:' + mail}
-        title={t('changeset.author.mailto') + ' ' + mail}
+        href={"mailto:" + mail}
+        title={t("changeset.author.mailto") + " " + mail}
      >
        {name}
      </a>
@@ -40,11 +40,11 @@ class ChangesetAuthor extends React.Component<Props> {
    const { t } = this.props;
    return (
      <>
-        {t('changeset.author.prefix')} {child}
+        {t("changeset.author.prefix")} {child}
        <ExtensionPoint
          name="changesets.author.suffix"
          props={{
-            changeset: this.props.changeset,
+            changeset: this.props.changeset
          }}
          renderAll={true}
        />
@@ -53,4 +53,4 @@ class ChangesetAuthor extends React.Component<Props> {
  }
 }

-export default translate('repos')(ChangesetAuthor);
+export default translate("repos")(ChangesetAuthor);
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetButtonGroup.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Changeset, Repository } from '@scm-manager/ui-types';
-import { ButtonAddons, Button } from '../../buttons';
-import { createChangesetLink, createSourcesLink } from './changesets';
-import { translate } from 'react-i18next';
+import React from "react";
+import { Changeset, Repository } from "@scm-manager/ui-types";
+import { ButtonAddons, Button } from "../../buttons";
+import { createChangesetLink, createSourcesLink } from "./changesets";
+import { translate } from "react-i18next";

 type Props = {
  repository: Repository;
@@ -22,13 +22,13 @@ class ChangesetButtonGroup extends React.Component<Props> {
        <Button
          link={changesetLink}
          icon="exchange-alt"
-          label={t('changeset.buttons.details')}
+          label={t("changeset.buttons.details")}
          reducedMobile={true}
        />
        <Button
          link={sourcesLink}
          icon="code"
-          label={t('changeset.buttons.sources')}
+          label={t("changeset.buttons.sources")}
          reducedMobile={true}
        />
      </ButtonAddons>
@@ -36,4 +36,4 @@ class ChangesetButtonGroup extends React.Component<Props> {
  }
 }

-export default translate('repos')(ChangesetButtonGroup);
+export default translate("repos")(ChangesetButtonGroup);
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetDiff.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Changeset } from '@scm-manager/ui-types';
-import LoadingDiff from '../LoadingDiff';
-import Notification from '../../Notification';
-import { translate } from 'react-i18next';
+import React from "react";
+import { Changeset, Link } from "@scm-manager/ui-types";
+import LoadingDiff from "../LoadingDiff";
+import Notification from "../../Notification";
+import { translate } from "react-i18next";

 type Props = {
  changeset: Changeset;
@@ -18,7 +18,11 @@ class ChangesetDiff extends React.Component<Props> {
  }

  createUrl(changeset: Changeset) {
-    return changeset._links.diff.href + '?format=GIT';
+    if (changeset._links.diff) {
+      const link = changeset._links.diff as Link;
+      return link.href + "?format=GIT";
+    }
+    throw new Error("diff link is missing");
  }

  render() {
@@ -26,7 +30,7 @@ class ChangesetDiff extends React.Component<Props> {
    if (!this.isDiffSupported(changeset)) {
      return (
        <Notification type="danger">
-          {t('changeset.diffNotSupported')}
+          {t("changeset.diffNotSupported")}
        </Notification>
      );
    } else {
@@ -36,4 +40,4 @@ class ChangesetDiff extends React.Component<Props> {
  }
 }

-export default translate('repos')(ChangesetDiff);
+export default translate("repos")(ChangesetDiff);
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetId.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetId.tsx
@@ -1,7 +1,7 @@
-import { Link } from 'react-router-dom';
-import React from 'react';
-import { Changeset, Repository } from '@scm-manager/ui-types';
-import { createChangesetLink } from './changesets';
+import { Link } from "react-router-dom";
+import React from "react";
+import { Changeset, Repository } from "@scm-manager/ui-types";
+import { createChangesetLink } from "./changesets";

 type Props = {
  repository: Repository;
@@ -11,7 +11,7 @@ type Props = {

 export default class ChangesetId extends React.Component<Props> {
  static defaultProps = {
-    link: true,
+    link: true
  };

  shortId = (changeset: Changeset) => {
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetList.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetList.tsx
@@ -1,7 +1,7 @@
-import ChangesetRow from './ChangesetRow';
-import React from 'react';
+import ChangesetRow from "./ChangesetRow";
+import React from "react";

-import { Changeset, Repository } from '@scm-manager/ui-types';
+import { Changeset, Repository } from "@scm-manager/ui-types";

 type Props = {
  repository: Repository;
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetRow.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import { Interpolate, translate } from 'react-i18next';
-import classNames from 'classnames';
-import styled from 'styled-components';
-import { ExtensionPoint } from '@scm-manager/ui-extensions';
-import { Changeset, Repository } from '@scm-manager/ui-types';
-import DateFromNow from '../../DateFromNow';
-import { AvatarWrapper, AvatarImage } from '../../avatar';
-import { parseDescription } from './changesets';
-import ChangesetId from './ChangesetId';
-import ChangesetAuthor from './ChangesetAuthor';
-import ChangesetTags from './ChangesetTags';
-import ChangesetButtonGroup from './ChangesetButtonGroup';
+import React from "react";
+import { Interpolate, translate } from "react-i18next";
+import classNames from "classnames";
+import styled from "styled-components";
+import { ExtensionPoint } from "@scm-manager/ui-extensions";
+import { Changeset, Repository } from "@scm-manager/ui-types";
+import DateFromNow from "../../DateFromNow";
+import { AvatarWrapper, AvatarImage } from "../../avatar";
+import { parseDescription } from "./changesets";
+import ChangesetId from "./ChangesetId";
+import ChangesetAuthor from "./ChangesetAuthor";
+import ChangesetTags from "./ChangesetTags";
+import ChangesetButtonGroup from "./ChangesetButtonGroup";

 type Props = {
  repository: Repository;
@@ -90,7 +90,7 @@ class ChangesetRow extends React.Component<Props> {
                        name="changeset.description"
                        props={{
                          changeset,
-                          value: description.title,
+                          value: description.title
                        }}
                        renderAll={false}
                      >
@@ -122,7 +122,7 @@ class ChangesetRow extends React.Component<Props> {
              </VCenteredColumn>
            </div>
          </div>
-          <VCenteredChildColumn className={classNames('column', 'is-flex')}>
+          <VCenteredChildColumn className={classNames("column", "is-flex")}>
            <ChangesetButtonGroup
              repository={repository}
              changeset={changeset}
@@ -131,7 +131,7 @@ class ChangesetRow extends React.Component<Props> {
              name="changeset.right"
              props={{
                repository,
-                changeset,
+                changeset
              }}
              renderAll={true}
            />
@@ -142,4 +142,4 @@ class ChangesetRow extends React.Component<Props> {
  }
 }

-export default translate('repos')(ChangesetRow);
+export default translate("repos")(ChangesetRow);
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetTag.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTag.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Tag } from '@scm-manager/ui-types';
-import ChangesetTagBase from './ChangesetTagBase';
+import React from "react";
+import { Tag } from "@scm-manager/ui-types";
+import ChangesetTagBase from "./ChangesetTagBase";

 type Props = {
  tag: Tag;
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetTagBase.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTagBase.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import Tag from '../../Tag';
+import React from "react";
+import Tag from "../../Tag";

 type Props = {
  icon: string;
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetTags.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTags.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Changeset } from '@scm-manager/ui-types';
-import ChangesetTag from './ChangesetTag';
-import ChangesetTagsCollapsed from './ChangesetTagsCollapsed';
+import React from "react";
+import { Changeset } from "@scm-manager/ui-types";
+import ChangesetTag from "./ChangesetTag";
+import ChangesetTagsCollapsed from "./ChangesetTagsCollapsed";

 type Props = {
  changeset: Changeset;
--- a/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx
+++ b/scm-ui/ui-components/src/repos/changesets/ChangesetTagsCollapsed.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { translate } from 'react-i18next';
-import { Tag } from '@scm-manager/ui-types';
-import Tooltip from '../../Tooltip';
-import ChangesetTagBase from './ChangesetTagBase';
+import React from "react";
+import { translate } from "react-i18next";
+import { Tag } from "@scm-manager/ui-types";
+import Tooltip from "../../Tooltip";
+import ChangesetTagBase from "./ChangesetTagBase";

 type Props = {
  tags: Tag[];
@@ -14,16 +14,16 @@ type Props = {
 class ChangesetTagsCollapsed extends React.Component<Props> {
  render() {
    const { tags, t } = this.props;
-    const message = tags.map(tag => tag.name).join(', ');
+    const message = tags.map(tag => tag.name).join(", ");
    return (
      <Tooltip location="top" message={message}>
        <ChangesetTagBase
          icon="tags"
-          label={tags.length + ' ' + t('changeset.tags')}
+          label={tags.length + " " + t("changeset.tags")}
        />
      </Tooltip>
    );
  }
 }

-export default translate('repos')(ChangesetTagsCollapsed);
+export default translate("repos")(ChangesetTagsCollapsed);
--- a/scm-ui/ui-components/src/repos/changesets/changesets.test.ts
+++ b/scm-ui/ui-components/src/repos/changesets/changesets.test.ts
@@ -1,20 +1,20 @@
-import { parseDescription } from './changesets';
+import { parseDescription } from "./changesets";

-describe('parseDescription tests', () => {
-  it('should return a description with title and message', () => {
-    const desc = parseDescription('Hello\nTrillian');
-    expect(desc.title).toBe('Hello');
-    expect(desc.message).toBe('Trillian');
+describe("parseDescription tests", () => {
+  it("should return a description with title and message", () => {
+    const desc = parseDescription("Hello\nTrillian");
+    expect(desc.title).toBe("Hello");
+    expect(desc.message).toBe("Trillian");
  });

-  it('should return a description with title and without message', () => {
-    const desc = parseDescription('Hello Trillian');
-    expect(desc.title).toBe('Hello Trillian');
+  it("should return a description with title and without message", () => {
+    const desc = parseDescription("Hello Trillian");
+    expect(desc.title).toBe("Hello Trillian");
  });

-  it('should return an empty description for undefined', () => {
+  it("should return an empty description for undefined", () => {
    const desc = parseDescription();
-    expect(desc.title).toBe('');
-    expect(desc.message).toBe('');
+    expect(desc.title).toBe("");
+    expect(desc.message).toBe("");
  });
 });
--- a/scm-ui/ui-components/src/repos/changesets/changesets.ts
+++ b/scm-ui/ui-components/src/repos/changesets/changesets.ts
@@ -1,4 +1,4 @@
-import { Changeset, Repository } from '@scm-manager/ui-types';
+import { Changeset, Repository } from "@scm-manager/ui-types";

 export type Description = {
  title: string;
@@ -7,24 +7,24 @@ export type Description = {

 export function createChangesetLink(
  repository: Repository,
-  changeset: Changeset,
+  changeset: Changeset
 ) {
  return `/repo/${repository.namespace}/${repository.name}/changeset/${changeset.id}`;
 }

 export function createSourcesLink(
  repository: Repository,
-  changeset: Changeset,
+  changeset: Changeset
 ) {
  return `/repo/${repository.namespace}/${repository.name}/sources/${changeset.id}`;
 }

 export function parseDescription(description?: string): Description {
-  const desc = description ? description : '';
-  const lineBreak = desc.indexOf('\n');
+  const desc = description ? description : "";
+  const lineBreak = desc.indexOf("\n");

  let title;
-  let message = '';
+  let message = "";

  if (lineBreak > 0) {
    title = desc.substring(0, lineBreak);
@@ -35,6 +35,6 @@ export function parseDescription(description?: string): Description {

  return {
    title,
-    message,
+    message
  };
 }
--- a/scm-ui/ui-components/src/repos/changesets/index.ts
+++ b/scm-ui/ui-components/src/repos/changesets/index.ts
@@ -1,12 +1,12 @@
-import * as changesets from './changesets';
+import * as changesets from "./changesets";
 export { changesets };

-export { default as ChangesetAuthor } from './ChangesetAuthor';
-export { default as ChangesetButtonGroup } from './ChangesetButtonGroup';
-export { default as ChangesetDiff } from './ChangesetDiff';
-export { default as ChangesetId } from './ChangesetId';
-export { default as ChangesetList } from './ChangesetList';
-export { default as ChangesetRow } from './ChangesetRow';
-export { default as ChangesetTag } from './ChangesetTag';
-export { default as ChangesetTags } from './ChangesetTags';
-export { default as ChangesetTagsCollapsed } from './ChangesetTagsCollapsed';
+export { default as ChangesetAuthor } from "./ChangesetAuthor";
+export { default as ChangesetButtonGroup } from "./ChangesetButtonGroup";
+export { default as ChangesetDiff } from "./ChangesetDiff";
+export { default as ChangesetId } from "./ChangesetId";
+export { default as ChangesetList } from "./ChangesetList";
+export { default as ChangesetRow } from "./ChangesetRow";
+export { default as ChangesetTag } from "./ChangesetTag";
+export { default as ChangesetTags } from "./ChangesetTags";
+export { default as ChangesetTagsCollapsed } from "./ChangesetTagsCollapsed";
--- a/scm-ui/ui-components/src/repos/diffs.test.ts
+++ b/scm-ui/ui-components/src/repos/diffs.test.ts
@@ -1,15 +1,15 @@
-import { File, FileChangeType, Hunk } from './DiffTypes';
+import { File, FileChangeType, Hunk } from "./DiffTypes";
 import {
  getPath,
  createHunkIdentifier,
-  createHunkIdentifierFromContext,
-} from './diffs';
+  createHunkIdentifierFromContext
+} from "./diffs";

-describe('tests for diff util functions', () => {
+describe("tests for diff util functions", () => {
  const file = (
    type: FileChangeType,
    oldPath: string,
-    newPath: string,
+    newPath: string
  ): File => {
    return {
      hunks: [],
@@ -17,59 +17,59 @@ describe('tests for diff util functions', () => {
      oldPath,
      newPath,
      newEndingNewLine: true,
-      oldEndingNewLine: true,
+      oldEndingNewLine: true
    };
  };

  const add = (path: string) => {
-    return file('add', '/dev/null', path);
+    return file("add", "/dev/null", path);
  };

  const rm = (path: string) => {
-    return file('delete', path, '/dev/null');
+    return file("delete", path, "/dev/null");
  };

  const modify = (path: string) => {
-    return file('modify', path, path);
+    return file("modify", path, path);
  };

  const createHunk = (content: string): Hunk => {
    return {
      content,
-      changes: [],
+      changes: []
    };
  };

-  describe('getPath tests', () => {
-    it('should pick the new path, for type add', () => {
-      const file = add('/etc/passwd');
+  describe("getPath tests", () => {
+    it("should pick the new path, for type add", () => {
+      const file = add("/etc/passwd");
      const path = getPath(file);
-      expect(path).toBe('/etc/passwd');
+      expect(path).toBe("/etc/passwd");
    });

-    it('should pick the old path, for type delete', () => {
-      const file = rm('/etc/passwd');
+    it("should pick the old path, for type delete", () => {
+      const file = rm("/etc/passwd");
      const path = getPath(file);
-      expect(path).toBe('/etc/passwd');
+      expect(path).toBe("/etc/passwd");
    });
  });

-  describe('createHunkIdentifier tests', () => {
-    it('should create identifier', () => {
-      const file = modify('/etc/passwd');
-      const hunk = createHunk('@@ -1,18 +1,15 @@');
+  describe("createHunkIdentifier tests", () => {
+    it("should create identifier", () => {
+      const file = modify("/etc/passwd");
+      const hunk = createHunk("@@ -1,18 +1,15 @@");
      const identifier = createHunkIdentifier(file, hunk);
-      expect(identifier).toBe('modify_/etc/passwd_@@ -1,18 +1,15 @@');
+      expect(identifier).toBe("modify_/etc/passwd_@@ -1,18 +1,15 @@");
    });
  });

-  describe('createHunkIdentifierFromContext tests', () => {
-    it('should create identifier', () => {
+  describe("createHunkIdentifierFromContext tests", () => {
+    it("should create identifier", () => {
      const identifier = createHunkIdentifierFromContext({
-        file: rm('/etc/passwd'),
-        hunk: createHunk('@@ -1,42 +1,39 @@'),
+        file: rm("/etc/passwd"),
+        hunk: createHunk("@@ -1,42 +1,39 @@")
      });
-      expect(identifier).toBe('delete_/etc/passwd_@@ -1,42 +1,39 @@');
+      expect(identifier).toBe("delete_/etc/passwd_@@ -1,42 +1,39 @@");
    });
  });
 });
--- a/scm-ui/ui-components/src/repos/diffs.ts
+++ b/scm-ui/ui-components/src/repos/diffs.ts
@@ -1,7 +1,7 @@
-import { BaseContext, File, Hunk } from './DiffTypes';
+import { BaseContext, File, Hunk } from "./DiffTypes";

 export function getPath(file: File) {
-  if (file.type === 'delete') {
+  if (file.type === "delete") {
    return file.oldPath;
  }
  return file.newPath;