feat: show formatted dates instead of epoch on results (#10268)

superset-frontend/spec/javascripts/utils/common_spec.jsx

@@ -17,6 +17,7 @@
  * under the License.
  */
 import {
+  applyFormattingToTabularData,
   optionFromValue,
   prepareCopyToClipboardTabularData,
   NULL_STRING,
@@ -57,4 +58,28 @@ describe('utils/common', () => {
       );
     });
   });
+  describe('applyFormattingToTabularData', () => {
+    it('does not mutate empty array', () => {
+      const data = [];
+      expect(applyFormattingToTabularData(data)).toEqual(data);
+    });
+    it('does not mutate array without temporal column', () => {
+      const data = [
+        { column1: 'lorem', column2: 'ipsum' },
+        { column1: 'dolor', column2: 'sit', column3: 'amet' },
+      ];
+      expect(applyFormattingToTabularData(data)).toEqual(data);
+    });
+    it('changes formatting of temporal column', () => {
+      const originalData = [
+        { __timestamp: 1594285437771, column1: 'lorem' },
+        { __timestamp: 1594285441675, column1: 'ipsum' },
+      ];
+      const expectedData = [
+        { __timestamp: '2020-07-09 09:03:57', column1: 'lorem' },
+        { __timestamp: '2020-07-09 09:04:01', column1: 'ipsum' },
+      ];
+      expect(applyFormattingToTabularData(originalData)).toEqual(expectedData);
+    });
+  });
 });

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -37,7 +37,6 @@ import {
 } from 'react-bootstrap';
 import { Table } from 'reactable-arc';
 import { t } from '@superset-ui/translation';
-import { SupersetClient } from '@superset-ui/connection';
 
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import CopyToClipboard from './../../components/CopyToClipboard';
@@ -47,7 +46,10 @@ import Loading from '../../components/Loading';
 import ModalTrigger from './../../components/ModalTrigger';
 import Button from '../../components/Button';
 import RowCountLabel from './RowCountLabel';
-import { prepareCopyToClipboardTabularData } from '../../utils/common';
+import {
+  applyFormattingToTabularData,
+  prepareCopyToClipboardTabularData,
+} from '../../utils/common';
 import PropertiesModal from './PropertiesModal';
 import { sliceUpdated } from '../actions/exploreActions';
 
@@ -197,7 +199,7 @@ export class DisplayQueryButton extends React.PureComponent {
         <Table
           className="table table-condensed"
           sortable
-          data={data}
+          data={applyFormattingToTabularData(data)}
           hideFilterInput
           filterBy={this.state.filterText}
           filterable={data.length ? Object.keys(data[0]) : null}

superset-frontend/src/utils/common.js

@@ -17,6 +17,7 @@
  * under the License.
  */
 import { SupersetClient } from '@superset-ui/connection';
+import { getTimeFormatter, TimeFormats } from '@superset-ui/time-format';
 import getClientErrorObject from './getClientErrorObject';
 
 // ATTENTION: If you change any constants, make sure to also change constants.py
@@ -27,6 +28,8 @@ export const NULL_STRING = '<NULL>';
 export const SHORT_DATE = 'MMM D, YYYY';
 export const SHORT_TIME = 'h:m a';
 
+const DATETIME_FORMATTER = getTimeFormatter(TimeFormats.DATABASE_DATETIME);
+
 export function getParamFromQuery(query, param) {
   const vars = query.split('&');
   for (let i = 0; i < vars.length; i += 1) {
@@ -118,3 +121,14 @@ export function prepareCopyToClipboardTabularData(data) {
   }
   return result;
 }
+
+export function applyFormattingToTabularData(data) {
+  if (!data || data.length === 0 || !('__timestamp' in data[0])) {
+    return data;
+  }
+  return data.map(row => ({
+    ...row,
+    // eslint-disable-next-line no-underscore-dangle
+    __timestamp: DATETIME_FORMATTER(new Date(row.__timestamp)),
+  }));
+}