fix: add created date for applications

frontend/CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 The latest version of this document is always available in
 [releases][releases-url].
 
+# 3.6.2
+- fix: show notification when app updates
+
 # 3.6.1
 - fix: minor css tweaks for mobile
 - fix: should support 409 responses as well

frontend/src/component/application/__tests__/__snapshots__/application-edit-component-test.js.snap

@@ -31,8 +31,22 @@ exports[`renders correctly with permissions 1`] = `
      
     test-app
   </react-mdl-CardTitle>
-  <react-mdl-CardText>
+  <react-mdl-CardText
-    app description
+    style={
+      Object {
+        "paddingTop": "0",
+      }
+    }
+  >
+    <p>
+      app description
+    </p>
+    <p>
+      Created: 
+      <strong>
+        Invalid Date
+      </strong>
+    </p>
   </react-mdl-CardText>
   <react-mdl-CardMenu>
     <a
@@ -243,8 +257,22 @@ exports[`renders correctly without permission 1`] = `
      
     test-app
   </react-mdl-CardTitle>
-  <react-mdl-CardText>
+  <react-mdl-CardText
-    app description
+    style={
+      Object {
+        "paddingTop": "0",
+      }
+    }
+  >
+    <p>
+      app description
+    </p>
+    <p>
+      Created: 
+      <strong>
+        Invalid Date
+      </strong>
+    </p>
   </react-mdl-CardText>
   <react-mdl-CardMenu>
     <a

frontend/src/component/application/application-edit-component.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import { Button, Card, CardActions, CardTitle, CardText, CardMenu, Icon, ProgressBar, Tabs, Tab } from 'react-mdl';
 import { IconLink, styles as commonStyles } from '../common';
-import { formatFullDateTimeWithLocale } from '../common/util';
+import { formatFullDateTimeWithLocale, formatDateWithLocale } from '../common/util';
 import { UPDATE_APPLICATION } from '../../permissions';
 import ApplicationView from './application-view';
 import ApplicationUpdate from './application-update';
@@ -30,6 +30,7 @@ class ClientApplications extends PureComponent {
         this.props.fetchApplication(this.props.appName).finally(() => this.setState({ loading: false }));
     }
     formatFullDateTime = v => formatFullDateTimeWithLocale(v, this.props.location.locale);
+    formatDate = v => formatDateWithLocale(v, this.props.location.locale);
 
     deleteApplication = async evt => {
         evt.preventDefault();
@@ -50,7 +51,7 @@ class ClientApplications extends PureComponent {
             return <p>Application ({this.props.appName}) not found</p>;
         }
         const { application, storeApplicationMetaData, hasPermission } = this.props;
-        const { appName, instances, strategies, seenToggles, url, description, icon = 'apps' } = application;
+        const { appName, instances, strategies, seenToggles, url, description, icon = 'apps', createdAt } = application;
 
         const content =
             this.state.activeTab === 0 ? (
@@ -71,7 +72,12 @@ class ClientApplications extends PureComponent {
                     <Icon name={icon || 'apps'} />
                     &nbsp;{appName}
                 </CardTitle>
-                {description && <CardText>{description}</CardText>}
+                <CardText style={{ paddingTop: '0' }}>
+                    <p>{description || ''}</p>
+                    <p>
+                        Created: <strong>{this.formatDate(createdAt)}</strong>
+                    </p>
+                </CardText>
                 {url && (
                     <CardMenu>
                         <IconLink url={url} icon="link" />

frontend/src/component/common/util.js

@@ -8,6 +8,13 @@ const dateTimeOptions = {
     minute: '2-digit',
     second: '2-digit',
 };
+
+const dateOptions = {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+};
+
 export const formatFullDateTimeWithLocale = (v, locale, tz) => {
     if (tz) {
         dateTimeOptions.timeZone = tz;
@@ -15,6 +22,13 @@ export const formatFullDateTimeWithLocale = (v, locale, tz) => {
     return new Date(v).toLocaleString(locale, dateTimeOptions);
 };
 
+export const formatDateWithLocale = (v, locale, tz) => {
+    if (tz) {
+        dateTimeOptions.timeZone = tz;
+    }
+    return new Date(v).toLocaleString(locale, dateOptions);
+};
+
 export const trim = value => {
     if (value && value.trim) {
         return value.trim();