improve RepositoryEntry story

scm-ui/ui-components/src/__resources__/Hg-Repository.ts

@@ -1,67 +0,0 @@
-/*
- * MIT License
- *
- * Copyright (c) 2020-present Cloudogu GmbH and Contributors
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-export default {
-  contact: "",
-  creationDate: "2020-03-23T08:26:01.164Z",
-  description: "",
-  healthCheckFailures: [],
-  lastModified: "2020-03-23T08:26:01.876Z",
-  namespace: "scmadmin",
-  name: "Mercurial",
-  type: "hg",
-  _links: {
-    self: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial" },
-    delete: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial" },
-    update: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial" },
-    permissions: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/permissions/" },
-    protocol: [
-      { href: "ssh://scmadmin@localhost:4567/repo/scmadmin/mercurial", name: "ssh" },
-      { href: "http://localhost:8081/scm/repo/scmadmin/mercurial", name: "http" }
-    ],
-    tags: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/tags/" },
-    branches: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/branches/" },
-    incomingChangesets: {
-      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/incoming/{source}/{target}/changesets",
-      templated: true
-    },
-    incomingDiff: {
-      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/incoming/{source}/{target}/diff",
-      templated: true
-    },
-    incomingDiffParsed: {
-      href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/incoming/{source}/{target}/diff/parsed",
-      templated: true
-    },
-    changesets: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/changesets/" },
-    sources: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/mercurial/sources/" },
-    authorMappingConfig: {
-      href: "http://localhost:8081/scm/api/v2/authormapping/configuration/scmadmin/mercurial"
-    },
-    unfavorize: { href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/mercurial" },
-    favorites: [
-      { href: "http://localhost:8081/scm/api/v2/unfavorize/scmadmin/mercurial", name: "unfavorize" },
-      { href: "http://localhost:8081/scm/api/v2/favorize/scmadmin/mercurial", name: "favorize" }
-    ]
-  }
-};

scm-ui/ui-components/src/__resources__/repository.ts

@@ -22,13 +22,13 @@
  * SOFTWARE.
  */
 export default {
-  contact: "",
+  contact: "heart-of-gold@hitchhiher.com",
   creationDate: "2020-03-23T08:26:01.164Z",
-  description: "",
+  description: "The starship Heart of Gold was the first spacecraft to make use of the Infinite Improbability Drive",
   healthCheckFailures: [],
   lastModified: "2020-03-23T08:26:01.876Z",
-  namespace: "scmadmin",
-  name: "Git",
+  namespace: "hitchhiher",
+  name: "heartOfGold",
   type: "git",
   _links: {
     self: { href: "http://localhost:8081/scm/api/v2/repositories/scmadmin/Git" },

scm-ui/ui-components/src/repos/RepositoryEntry.stories.tsx

@@ -21,52 +21,73 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { storiesOf } from "@storybook/react";
-import React from "react";
+import {storiesOf} from "@storybook/react";
+import React, {FC, ReactNode} from "react";
 import styled from "styled-components";
-import GitRepository from "../__resources__/Git-Repository";
-import HgRepository from "../__resources__/Hg-Repository";
+import repository from "../__resources__/repository";
 // @ts-ignore ignore unknown png
 import Git from "../__resources__/git-logo.png";
-// @ts-ignore ignore unknown png
-import Hg from "../__resources__/hg-logo.png";
 import RepositoryEntry from "./RepositoryEntry";
-import { Binder, BinderContext } from "@scm-manager/ui-extensions";
-import { Repository } from "@scm-manager/ui-types";
+import {Binder, BinderContext} from "@scm-manager/ui-extensions";
+import {Repository} from "@scm-manager/ui-types";
+import Image from "../Image";
+import classNames from "classnames";
+import Icon from "../Icon";
 
-const Container = styled.div`
-  padding: 2rem 6rem;
+const Spacing = styled.div`
+  margin: 2rem;
 `;
 
+const Container: FC = ({children}) => (
+  <Spacing className="box box-link-shadow">{children}</Spacing>
+);
+
 const bindAvatar = (binder: Binder, avatar: string) => {
   binder.bind("repos.repository-avatar", () => {
-    return avatar;
+    return <Image src={avatar} alt="Logo"/>;
   });
 };
 
-const bindBeforeTitle = (binder: Binder, beforeTitle: string) => {
+const bindBeforeTitle = (binder: Binder, extension: ReactNode) => {
   binder.bind("repository.card.beforeTitle", () => {
-    return beforeTitle;
+    return extension;
+  });
+};
+
+const bindQuickLink = (binder: Binder, extension: ReactNode) => {
+  binder.bind("repository.card.quickLink", () => {
+    return extension;
   });
 };
 
 const withBinder = (binder: Binder, repository: Repository) => {
   return (
     <BinderContext.Provider value={binder}>
-      <RepositoryEntry repository={repository} />
+      <RepositoryEntry repository={repository}/>
     </BinderContext.Provider>
   );
 };
 
+const QuickLink = <a className="level-item"><Icon className="fa-lg" name="fas fa-code-branch fa-rotate-180 fa-fw"
+                                                  color="inherit"/></a>;
+
 storiesOf("RepositoryEntry", module)
   .addDecorator(storyFn => <Container>{storyFn()}</Container>)
-  .add("Git-Repo", () => {
-    const binder = new Binder("git-story");
-    bindAvatar(binder, "Git");
-    return withBinder(binder, GitRepository);
+  .add("Default", () => {
+    return <RepositoryEntry repository={repository}/>;
   })
-  .add("Hg-Repo", () => {
-    const binder = new Binder("hg-story");
-    bindBeforeTitle(binder, "Hg");
-    return withBinder(binder, HgRepository);
+  .add("Avatar EP", () => {
+    const binder = new Binder("avatar");
+    bindAvatar(binder, Git);
+    return withBinder(binder, repository);
+  })
+  .add("Before Title EP", () => {
+    const binder = new Binder("title");
+    bindBeforeTitle(binder, <i className="fas fa-star"/>);
+    return withBinder(binder, repository);
+  })
+  .add("Quick Link EP", () => {
+    const binder = new Binder("title");
+    bindQuickLink(binder, QuickLink);
+    return withBinder(binder, repository);
   });