From 303b6edb994f1617fbc421ca6e8b51618d7d2b39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Fri, 7 Aug 2020 10:08:23 +0200
Subject: [PATCH] feat: added time-ago to toggle-list

---
 frontend/package.json                                     | 4 +++-
 frontend/src/component/common/common.scss                 | 5 +++++
 .../src/component/feature/feature-list-item-component.jsx | 8 ++++++--
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index cdbf4c62d5..11b4fddc30 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,7 +38,9 @@
     "prepublish": "npm run build"
   },
   "main": "./index.js",
-  "dependencies": {},
+  "dependencies": {
+    "react-timeago": "^4.4.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
diff --git a/frontend/src/component/common/common.scss b/frontend/src/component/common/common.scss
index 0cc41bb254..487a3a0a14 100644
--- a/frontend/src/component/common/common.scss
+++ b/frontend/src/component/common/common.scss
@@ -81,3 +81,8 @@
     text-transform: none;
     font-weight: normal;
 }
+
+.toggleName {
+    color: #37474f !important;
+    font-weight: 500;
+}
\ No newline at end of file
diff --git a/frontend/src/component/feature/feature-list-item-component.jsx b/frontend/src/component/feature/feature-list-item-component.jsx
index 1197c3469e..28cfe751a1 100644
--- a/frontend/src/component/feature/feature-list-item-component.jsx
+++ b/frontend/src/component/feature/feature-list-item-component.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Switch, Chip, ListItem, ListItemAction, Icon } from 'react-mdl';
+import TimeAgo from 'react-timeago';
 import Progress from './progress';
 import { UPDATE_FEATURE } from '../../permissions';
 import { calc, styles as commonStyles } from '../common';
@@ -18,7 +19,7 @@ const Feature = ({
     revive,
     hasPermission,
 }) => {
-    const { name, description, enabled, type, stale } = feature;
+    const { name, description, enabled, type, stale, createdAt } = feature;
     const { showLastHour = false } = settings;
     const isStale = showLastHour ? metricsLastHour.isFallback : metricsLastMinute.isFallback;
     const percent =
@@ -47,7 +48,10 @@ const Feature = ({
             </span>
             <span className={['mdl-list__item-primary-content', styles.listItemLink].join(' ')}>
                 <Link to={featureUrl} className={[commonStyles.listLink, commonStyles.truncate].join(' ')}>
-                    {name}
+                    <span className={commonStyles.toggleName}>{name}&nbsp;</span>
+                    <small className="mdl-color-text--blue-grey-300">
+                        <TimeAgo date={createdAt} />
+                    </small>
                     <span className={['mdl-list__item-sub-title', commonStyles.truncate].join(' ')}>{description}</span>
                 </Link>
             </span>