Merge pull request #13800 from dannon/no-mo-moment

Elminate client (direct) dependency on moment.js
This commit is contained in:
Marius van den Beek
2022-04-25 17:27:56 +02:00
committed by GitHub
12 changed files with 73 additions and 37 deletions
+1 -1
View File
@@ -111,7 +111,7 @@ jobs:
- run: cd client && yarn install --frozen-lockfile
- *save_yarn_cache
- run: cd client && yarn run eslint
- run: cd client && yarn run prettier-check
- run: cd client && yarn run format-check
workflows:
version: 2
get_code_and_test:
+2 -2
View File
@@ -178,7 +178,7 @@ client-production-maps: node-deps ## Rebuild client-side artifacts for a product
cd client && yarn run build-production-maps
client-format: node-deps ## Reformat client code
cd client && yarn run prettier
cd client && yarn run format
client-watch: node-deps ## A useful target for parallel development building. See also client-dev-server.
cd client && yarn run watch
@@ -196,7 +196,7 @@ client-eslint: node-deps # Run client linting
cd client && yarn run eslint
client-format-check: node-deps # Run client formatting check
cd client && yarn run prettier-check
cd client && yarn run format-check
client-lint: client-eslint client-format-check ## ES lint and check format of client
+5 -4
View File
@@ -41,6 +41,7 @@
"core-js": "^3.21.0",
"d3": "3",
"date-fns": "^2.28.0",
"date-fns-tz": "^1.3.3",
"decode-uri-component": "^0.2.0",
"dom-to-image": "^2.6.0",
"elkjs": "^0.7.1",
@@ -59,7 +60,6 @@
"localforage": "^1.10.0",
"markdown-it": "^12.3.2",
"markdown-it-regexp": "^0.4.0",
"moment": "2.29.2",
"object-hash": "^2.2.0",
"popper.js": "^1.16.1",
"pretty-bytes": "^5.6.0",
@@ -100,15 +100,16 @@
"build": "NODE_ENV=development gulp && webpack && yarn run save-build-hash",
"build-production": "NODE_ENV=production gulp && yarn run webpack-production && yarn run save-build-hash",
"build-production-maps": "NODE_ENV=production gulp && yarn run webpack-production-maps && yarn run save-build-hash",
"build-stats": "webpack --profile --json=webpack-stats.json",
"build-stats": "NODE_ENV=production webpack --profile --json=webpack-stats.json",
"view-stats": "webpack-bundle-analyzer webpack-stats.json ../static/dist/",
"webpack-watch": "webpack --watch",
"webpack-production": "NODE_ENV=production webpack",
"webpack-production-maps": "GXY_BUILD_SOURCEMAPS=1 NODE_ENV=production webpack",
"gulp": "gulp",
"save-build-hash": "(git rev-parse HEAD 2>/dev/null || echo '') >../static/client_build_hash.txt",
"prettier": "prettier --write 'src/style/scss/**/*.scss' 'src/**/{*.js,*.vue}' '!src/libs/**'",
"prettier-check": "prettier --check 'src/style/scss/**/*.scss' 'src/**/{*.js,*.vue}' '!src/libs/**'",
"format": "prettier --write 'src/style/scss/**/*.scss' 'src/**/{*.js,*.vue}' '!src/libs/**'",
"format-check": "prettier --check 'src/style/scss/**/*.scss' 'src/**/{*.js,*.vue}' '!src/libs/**'",
"prettier": "yarn run format",
"test": "yarn run qunit && yarn run jest",
"jest": "jest --config tests/jest/jest.config.js",
"jest-watch": "jest --config tests/jest/jest.config.js --watch",
@@ -5,7 +5,8 @@ import { getLocalVue } from "jest/helpers";
import DatasetInformation from "./DatasetInformation";
import datasetResponse from "./testData/datasetResponse";
import flushPromises from "flush-promises";
import moment from "moment";
import { parseISO } from "date-fns";
import { formatInTimeZone } from "date-fns-tz";
const HDA_ID = "FOO_HDA_ID";
@@ -65,8 +66,9 @@ describe("DatasetInformation/DatasetInformation", () => {
it("Date should be formatted", async () => {
const date = datasetInfoTable.find(".utc-time").text();
const formated_date = moment.utc(datasetResponse.create_time).format("dddd MMM Do h:mm:ss YYYY [UTC]");
expect(date).toBe(formated_date);
const parsedDate = parseISO(`${datasetResponse.create_time}Z`);
const formattedDate = `${formatInTimeZone(parsedDate, "Etc/Zulu", "eeee MMM do H:mm:ss yyyy")} UTC`;
expect(date).toBe(formattedDate);
});
it("Table should render data accordingly", async () => {
@@ -15,7 +15,8 @@
@click="$emit('update-rules', session.rule)"
v-b-tooltip.hover.right
:title="formatPreview(session.rule, index)"
>Saved rule from {{ formatDate(session.dateTime) }}
>Saved rule from
<UtcDate :date="session.dateTime" mode="elapsed" />
</a>
</div>
</div>
@@ -25,8 +26,8 @@
import Vue from "vue";
import _l from "utils/localization";
import BootstrapVue from "bootstrap-vue";
import moment from "moment";
import { RULES, MAPPING_TARGETS } from "mvc/rules/rule-definitions";
import UtcDate from "components/UtcDate";
Vue.use(BootstrapVue);
export default {
@@ -35,6 +36,9 @@ export default {
savedRulesMenu: _l("Recently used rules"),
};
},
components: {
UtcDate,
},
props: {
savedRules: {
type: Array,
@@ -54,9 +58,6 @@ export default {
},
},
methods: {
formatDate(dateTime) {
return moment.utc(dateTime).from(moment().utc());
},
formatPreview(savedRuleJson, index) {
let prettyString = "";
let delim = "";
+20
View File
@@ -0,0 +1,20 @@
import { shallowMount } from "@vue/test-utils";
import { getLocalVue } from "jest/helpers";
import UtcDate from "./UtcDate.vue";
describe("UTCDate component", () => {
const localVue = getLocalVue();
it("Loads a date in default mode, can format outputs as expected.", () => {
const wrapper = shallowMount(UtcDate, {
propsData: { date: "2015-10-21T16:29:00.000000" },
localVue,
});
// expect elapsed time to be 'years ago.
expect(wrapper.text()).toBe("2015-10-21T16:29:00.000Z");
expect(wrapper.vm.elapsedTime).toContain("years ago");
expect(wrapper.vm.fullISO).toBe("2015-10-21T16:29:00.000Z");
expect(wrapper.vm.parsedDate).toEqual(new Date("2015-10-21T16:29:00.000Z"));
expect(wrapper.vm.pretty).toBe("Wednesday Oct 21st 16:29:00 2015 UTC");
});
});
+12 -10
View File
@@ -1,8 +1,8 @@
<template>
<span v-if="mode == 'date'" class="utc-time" :title="elapsedTime">
{{ fullDate }}
{{ fullISO }}
</span>
<span v-else-if="mode === 'elapsed'" class="utc-time utc-time-elapsed" :title="fullDate">
<span v-else-if="mode === 'elapsed'" class="utc-time utc-time-elapsed" :title="fullISO">
{{ elapsedTime }}
</span>
<span v-else class="utc-time" :title="elapsedTime">
@@ -11,7 +11,8 @@
</template>
<script>
import moment from "moment";
import { formatDistanceToNow, parse, parseISO } from "date-fns";
import { formatInTimeZone } from "date-fns-tz";
export default {
props: {
@@ -30,20 +31,21 @@ export default {
},
computed: {
elapsedTime: function () {
return moment(moment.utc(this.formattedDate)).from(moment().utc());
return formatDistanceToNow(this.parsedDate, { addSuffix: true });
},
fullDate: function () {
return moment.utc(this.formattedDate).format();
fullISO: function () {
return this.parsedDate.toISOString();
},
formattedDate: function () {
parsedDate: function () {
if (this.customFormat !== undefined) {
return moment(this.date, this.customFormat).format();
return parse(this.date, this.customFormat, new Date());
} else {
return this.date;
// assume ISO format date, except in Galaxy this won't have TZinfo -- it will always be Zulu
return parseISO(`${this.date}Z`);
}
},
pretty: function () {
return moment.utc(this.formattedDate).format("dddd MMM Do h:mm:ss YYYY [UTC]");
return `${formatInTimeZone(this.parsedDate, "Etc/Zulu", "eeee MMM do H:mm:ss yyyy")} UTC`;
},
},
};
@@ -54,7 +54,7 @@
<script>
import Vue from "vue";
import BootstrapVue from "bootstrap-vue";
import moment from "moment";
import { format } from "date-fns";
import { Services } from "components/Workflow/services";
import Tags from "components/Common/Tags";
import LicenseSelector from "components/License/LicenseSelector";
@@ -136,7 +136,12 @@ export default {
const versions = [];
for (let i = 0; i < this.versions.length; i++) {
const current_wf = this.versions[i];
const update_time = moment.utc(current_wf.update_time).format("MMM Do YYYY");
let update_time;
if (current_wf.update_time) {
update_time = `${format(Date.parse(current_wf.update_time), "MMM do yyyy")}, `;
} else {
update_time = "";
}
const label = `${current_wf.version + 1}: ${update_time}, ${current_wf.steps} steps`;
versions.push({
version: i,
@@ -4,7 +4,7 @@ import axios from "axios";
import MockAdapter from "axios-mock-adapter";
import { getLocalVue } from "jest/helpers";
import mockInvocationData from "./test/json/invocation.json";
import moment from "moment";
import { parseISO, formatDistanceToNow } from "date-fns";
const localVue = getLocalVue();
@@ -84,8 +84,12 @@ describe("Invocations.vue with invocation", () => {
const columns = row.findAll("td");
expect(columns.at(1).text()).toBe("workflow name");
expect(columns.at(2).text()).toBe("history name");
expect(columns.at(3).text()).toBe(moment.utc(mockInvocationData.create_time).fromNow());
expect(columns.at(4).text()).toBe(moment.utc(mockInvocationData.update_time).fromNow());
expect(columns.at(3).text()).toBe(
formatDistanceToNow(parseISO(`${mockInvocationData.create_time}Z`), { addSuffix: true })
);
expect(columns.at(4).text()).toBe(
formatDistanceToNow(parseISO(`${mockInvocationData.update_time}Z`), { addSuffix: true })
);
expect(columns.at(5).text()).toBe("scheduled");
expect(columns.at(6).text()).toBe("");
});
@@ -6,7 +6,6 @@
*/
import axios from "axios";
import moment from "moment";
import { prependPath } from "utils/redirect";
import { History } from "./History";
@@ -57,11 +56,9 @@ export async function getHistoryList() {
* Load one history by id
* @param {String} id
*/
export async function getHistoryById(id, since) {
export async function getHistoryById(id) {
const path = `api/histories/${id}`;
const sinceParam = since !== undefined ? moment.utc(since).toISOString() : null;
const url = sinceParam ? `${path}?q=update_time-gt&qv=${sinceParam}` : path;
const response = await axios.get(prependPath(url), { params: stdHistoryParams });
const response = await axios.get(prependPath(path), { params: stdHistoryParams });
const props = doResponse(response);
return new History(props);
}
-1
View File
@@ -43,7 +43,6 @@ module.exports = (env = {}, argv = {}) => {
jqueryVendor$: `${libsBase}/jquery/jquery.js`,
storemodern$: "store/dist/store.modern.js",
"popper.js": path.resolve(__dirname, "node_modules/popper.js/"),
moment: path.resolve(__dirname, "node_modules/moment"),
underscore: path.resolve(__dirname, "node_modules/underscore"),
// client-side application config
config$: path.join(scriptsBase, "config", targetEnv) + ".js",
+6 -1
View File
@@ -3541,6 +3541,11 @@ data-urls@^2.0.0:
whatwg-mimetype "^2.3.0"
whatwg-url "^8.0.0"
date-fns-tz@^1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.3.tgz#7884a4b3ed6cd95bfd81831d608e5ef8be500c86"
integrity sha512-Gks46gwbSauBQnV3Oofluj1wTm8J0tM7sbSJ9P+cJq/ZnTCpMohTKmmO5Tn+jQ7dyn0+b8G7cY4O2DZ5P/LXcA==
date-fns@^2.28.0:
version "2.28.0"
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
@@ -6973,7 +6978,7 @@ moment@2.20.1:
resolved "https://registry.yarnpkg.com/moment/-/moment-2.20.1.tgz#d6eb1a46cbcc14a2b2f9434112c1ff8907f313fd"
integrity sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg==
moment@2.29.2, moment@2.x:
moment@2.x:
version "2.29.2"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.2.tgz#00910c60b20843bcba52d37d58c628b47b1f20e4"
integrity sha512-UgzG4rvxYpN15jgCmVJwac49h9ly9NurikMWGPdVxm8GZD6XjkKPxDTjQQ43gtGgnV3X0cAyWDdP2Wexoquifg==