@scm-manager/ui-components 2.20.1-20210616-114029 → 2.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "2.20.1-20210616-114029",
+  "version": "2.20.1",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -25,7 +25,7 @@
     "@scm-manager/jest-preset": "^2.12.7",
     "@scm-manager/prettier-config": "^2.10.1",
     "@scm-manager/tsconfig": "^2.11.2",
-    "@scm-manager/ui-tests": "^2.20.1-20210616-114029",
+    "@scm-manager/ui-tests": "^2.20.1",
     "@storybook/addon-actions": "^6.1.17",
     "@storybook/addon-storyshots": "^6.1.17",
     "@storybook/react": "^6.1.17",
@@ -59,9 +59,9 @@
     "worker-plugin": "^3.2.0"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "^2.20.1-20210616-114029",
-    "@scm-manager/ui-extensions": "^2.20.1-20210616-114029",
-    "@scm-manager/ui-types": "^2.20.1-20210616-114029",
+    "@scm-manager/ui-api": "^2.20.1",
+    "@scm-manager/ui-extensions": "^2.20.1",
+    "@scm-manager/ui-types": "^2.20.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.4.1",
     "deepmerge": "^4.2.2",

package/src/Breadcrumb.tsx

@@ -26,12 +26,12 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useLocation, Link } from "react-router-dom";
 import classNames from "classnames";
 import styled from "styled-components";
-import { urls } from "@scm-manager/ui-api";
+import { binder, ExtensionPoint } from "@scm-manager/ui-extensions";
 import { Branch, Repository, File } from "@scm-manager/ui-types";
-import { binder, ExtensionPoint, extensionPoints } from "@scm-manager/ui-extensions";
 import Icon from "./Icon";
 import Tooltip from "./Tooltip";
 import copyToClipboard from "./CopyToClipboard";
+import { urls } from "@scm-manager/ui-api";
 
 type Props = {
   repository: Repository;
@@ -65,6 +65,8 @@ const BreadcrumbNav = styled.nav`
   flex: 1;
   display: flex;
   align-items: center;
+  margin: 1rem 1rem !important;
+
   width: 100%;
 
   /* move slash to end */
@@ -125,7 +127,7 @@ const Breadcrumb: FC<Props> = ({
   baseUrl,
   sources,
   permalink,
-  preButtons,
+  preButtons
 }) => {
   const location = useLocation();
   const history = useHistory();
@@ -136,10 +138,7 @@ const Breadcrumb: FC<Props> = ({
     if (path) {
       const paths = path.split("/");
       return paths.map((pathFragment, index) => {
-        let currPath = paths.slice(0, index + 1).join("/");
-        if (!currPath.endsWith("/")) {
-          currPath = currPath + "/";
-        }
+        const currPath = paths.slice(0, index + 1).join("/");
         if (paths.length - 1 === index) {
           return (
             <li className="is-active" key={index}>
@@ -173,45 +172,15 @@ const Breadcrumb: FC<Props> = ({
     ).finally(() => setCopying(false));
   };
 
-  const renderBreadcrumbNav = () => {
-    let prefixButtons = null;
-    if (preButtons) {
-      prefixButtons = <PrefixButton>{preButtons}</PrefixButton>;
-    }
-
-    let homeUrl = baseUrl + "/";
-    if (revision) {
-      homeUrl += encodeURIComponent(revision) + "/";
-    } else {
-      homeUrl = `/repo/${repository.namespace}/${repository.name}/code/sources/`;
-    }
+  let homeUrl = baseUrl + "/";
+  if (revision) {
+    homeUrl += encodeURIComponent(revision) + "/";
+  }
 
-    return (
-      <BreadcrumbNav
-        className={classNames("breadcrumb", "sources-breadcrumb", "mx-2", "my-4")}
-        aria-label="breadcrumbs"
-      >
-        {prefixButtons}
-        <ul>
-          <li>
-            <Link to={homeUrl}>
-              <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
-            </Link>
-          </li>
-          {pathSection()}
-        </ul>
-        <PermaLinkWrapper className="ml-1">
-          {copying ? (
-            <Icon name="spinner fa-spin" />
-          ) : (
-            <Tooltip message={t("breadcrumb.copyPermalink")}>
-              <Icon name="link" color="inherit" onClick={() => copySource()} />
-            </Tooltip>
-          )}
-        </PermaLinkWrapper>
-      </BreadcrumbNav>
-    );
-  };
+  let prefixButtons = null;
+  if (preButtons) {
+    prefixButtons = <PrefixButton>{preButtons}</PrefixButton>;
+  }
 
   const extProps = {
     baseUrl,
@@ -219,33 +188,40 @@ const Breadcrumb: FC<Props> = ({
     branch: branch ? branch : defaultBranch,
     path,
     sources,
-    repository,
-  };
-
-  const renderExtensionPoints = () => {
-    if (
-      binder.hasExtension<extensionPoints.ReposSourcesEmptyActionbar>("repos.sources.empty.actionbar") &&
-      sources?._embedded?.children?.length === 0
-    ) {
-      return (
-        <ExtensionPoint
-          name="repos.sources.empty.actionbar"
-          props={{ repository, sources }}
-          renderAll={true}
-        />
-      );
-    }
-    if (binder.hasExtension<extensionPoints.ReposSourcesActionbar>("repos.sources.actionbar")) {
-      return <ExtensionPoint name="repos.sources.actionbar" props={extProps} renderAll={true} />;
-    }
-    return null;
+    repository
   };
 
   return (
     <>
-      <div className="is-flex is-align-items-center is-justify-content-flex-end">
-        {renderBreadcrumbNav()}
-        {<ActionBar className="my-2">{renderExtensionPoints()}</ActionBar>}
+      <div className="is-flex is-align-items-center">
+        <BreadcrumbNav
+          className={classNames("breadcrumb", "sources-breadcrumb", "ml-1", "mb-0")}
+          aria-label="breadcrumbs"
+        >
+          {prefixButtons}
+          <ul>
+            <li>
+              <Link to={homeUrl}>
+                <HomeIcon title={t("breadcrumb.home")} name="home" color="inherit" />
+              </Link>
+            </li>
+            {pathSection()}
+          </ul>
+          <PermaLinkWrapper className="ml-1">
+            {copying ? (
+              <Icon name="spinner fa-spin" />
+            ) : (
+              <Tooltip message={t("breadcrumb.copyPermalink")}>
+                <Icon name="link" color="inherit" onClick={() => copySource()} />
+              </Tooltip>
+            )}
+          </PermaLinkWrapper>
+        </BreadcrumbNav>
+        {binder.hasExtension("repos.sources.actionbar") && (
+          <ActionBar>
+            <ExtensionPoint name="repos.sources.actionbar" props={extProps} renderAll={true} />
+          </ActionBar>
+        )}
       </div>
       <hr className="is-marginless" />
     </>

package/src/Logo.stories.tsx

@@ -32,14 +32,8 @@ const Wrapper = styled.div`
   height: 100%;
 `;
 
-storiesOf("Logo", module)
-  .add("Default", () => (
-    <Wrapper>
-      <Logo />
-    </Wrapper>
-  ))
-  .add("WithoutText", () => (
-    <Wrapper>
-      <Logo withText={false} />
-    </Wrapper>
-  ));
+storiesOf("Logo", module).add("Default", () => (
+  <Wrapper>
+    <Logo />
+  </Wrapper>
+));

package/src/Logo.tsx

@@ -21,22 +21,15 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React, { FC } from "react";
-import { useTranslation } from "react-i18next";
+import React from "react";
+import { WithTranslation, withTranslation } from "react-i18next";
 import Image from "./Image";
 
-type Props = {
-  withText?: boolean;
-  className?: string;
-};
-
-const Logo: FC<Props> = ({ withText = true, className }) => {
-  const [t] = useTranslation("commons");
-
-  if (withText) {
-    return <Image src="/images/logo.png" alt={t("logo.alt")} className={className} />;
+class Logo extends React.Component<WithTranslation> {
+  render() {
+    const { t } = this.props;
+    return <Image src="/images/logo.png" alt={t("logo.alt")} />;
   }
-  return <Image src="/images/scmLogo.svg" alt={t("logo.alt")} className={className} />;
-};
+}
 
-export default Logo;
+export default withTranslation("commons")(Logo);