From 7e65a17e7c2c9d866626284cfb7d75fbf9568d88 Mon Sep 17 00:00:00 2001
From: Danny Koppenhagen <Danny.Koppenhagen@deutschebahn.com>
Date: Tue, 11 Jan 2022 19:45:16 +0100
Subject: [PATCH] feat: provide edito button to jump directly to the item in a
 repo

closes #115
---
 public/config.json                               |  6 +++++-
 src/components/EditButton/EditButton.tsx         | 16 ++++++++++++++++
 src/components/EditButton/editButton.scss        |  2 ++
 src/components/PageItem/PageItem.tsx             |  5 ++++-
 src/components/PageItem/item-page.scss           |  6 ++++++
 src/components/PageItemMobile/PageItemMobile.tsx |  4 +++-
 src/config.ts                                    |  4 ++++
 7 files changed, 40 insertions(+), 3 deletions(-)
 create mode 100644 src/components/EditButton/EditButton.tsx
 create mode 100644 src/components/EditButton/editButton.scss

diff --git a/public/config.json b/public/config.json
index fd87d07..9260e06 100644
--- a/public/config.json
+++ b/public/config.json
@@ -65,5 +65,9 @@
       }
     ]
   },
-  "dateFormat": "MMMM YYYY"
+  "dateFormat": "MMMM YYYY",
+  "editLink": {
+    "radarLink": "https://github.com/AOEpeople/techradar/edit/main/radar",
+    "title": "Edit"
+  }
 }
diff --git a/src/components/EditButton/EditButton.tsx b/src/components/EditButton/EditButton.tsx
new file mode 100644
index 0000000..a5eb1cb
--- /dev/null
+++ b/src/components/EditButton/EditButton.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Item } from "../../model";
+import "./editButton.scss";
+
+type EditButtonProps = {
+  baseUrl: string;
+  item: Item & { release? : string }
+  title?: string;
+};
+
+export default function EditButton({baseUrl, item, title}: React.PropsWithChildren<EditButtonProps>) {
+  const href = `${baseUrl}/${item.release}/${item.name}.md`;
+  return (
+    <a className="icon-link" href={href} target="_blank" rel="noopener noreferrer">{title || 'Edit'}</a>
+  );
+}
diff --git a/src/components/EditButton/editButton.scss b/src/components/EditButton/editButton.scss
new file mode 100644
index 0000000..04a3663
--- /dev/null
+++ b/src/components/EditButton/editButton.scss
@@ -0,0 +1,2 @@
+.edit-button {
+}
diff --git a/src/components/PageItem/PageItem.tsx b/src/components/PageItem/PageItem.tsx
index 3b273b5..37bc38c 100644
--- a/src/components/PageItem/PageItem.tsx
+++ b/src/components/PageItem/PageItem.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Badge from "../Badge/Badge";
+import EditButton from "../EditButton/EditButton";
 import ItemList from "../ItemList/ItemList";
 import Link from "../Link/Link";
 import FooterEnd from "../FooterEnd/FooterEnd";
@@ -47,6 +48,7 @@ const PageItem: React.FC<Props> = ({ pageName, items, config, leaving, onLeave }
   });
 
   const item = getItem(pageName, items);
+  const editButton = config.editLink ? <EditButton baseUrl={config.editLink.radarLink} item={item} title={config.editLink.title}/> : ''
 
   return (
     <>
@@ -99,10 +101,11 @@ const PageItem: React.FC<Props> = ({ pageName, items, config, leaving, onLeave }
           >
             <div className="item-page__header">
               <div className="split">
-                <div className="split__left">
+                <div className="split__left hero-headline__wrapper">
                   <h1 className="hero-headline hero-headline--inverse">
                     {item.title}
                   </h1>
+                  {editButton}
                 </div>
                 <div className="split__right">
                   <Badge big type={item.ring}>
diff --git a/src/components/PageItem/item-page.scss b/src/components/PageItem/item-page.scss
index fd5eef2..91dc763 100644
--- a/src/components/PageItem/item-page.scss
+++ b/src/components/PageItem/item-page.scss
@@ -50,6 +50,12 @@
   }
 }
 
+.hero-headline__wrapper {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
 .mobile-item-page {
   background: #fff;
   margin: 0 -15px;
diff --git a/src/components/PageItemMobile/PageItemMobile.tsx b/src/components/PageItemMobile/PageItemMobile.tsx
index 1e4a055..4cc5ae8 100644
--- a/src/components/PageItemMobile/PageItemMobile.tsx
+++ b/src/components/PageItemMobile/PageItemMobile.tsx
@@ -1,5 +1,5 @@
-import React from "react";
 import Badge from "../Badge/Badge";
+import EditButton from "../EditButton/EditButton";
 import ItemList from "../ItemList/ItemList";
 import Link from "../Link/Link";
 import Fadeable from "../Fadeable/Fadeable";
@@ -40,6 +40,7 @@ export default function PageItemMobile({
 
   const item = getItem(pageName, items);
   const itemsInRing = getItemsInRing(pageName, items);
+  const editButton = config.editLink ? <EditButton baseUrl={config.editLink.radarLink} item={item} title={config.editLink.title}/> : ''
   return (
     <Fadeable leaving={leaving} onLeave={onLeave}>
       <SetTitle title={item.title} />
@@ -53,6 +54,7 @@ export default function PageItemMobile({
                   <h1 className="hero-headline hero-headline--inverse">
                     {item.title}
                   </h1>
+                  {editButton}
                 </div>
                 <div className="split__right">
                   <Badge big type={item.ring}>
diff --git a/src/config.ts b/src/config.ts
index 85c8450..ed43b02 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -13,6 +13,10 @@ export interface ConfigData {
   };
   homepageContent: HomepageOption;
   dateFormat?: string;
+  editLink?: {
+    radarLink: string,
+    title?: string
+  }
 }
 
 export const radarName =