refactor(deps)!: remove moment dep and usage (#535)

* refactor(deps): remove `moment` dep and usage

`moment` has been [deprecated since Sep 2020](https://momentjs.com/docs/#/-project-status/) and recommends using native `Intl` or newer libraries that make use of native `Intl`, such as `luxon` and `dayjs`
- `moment` is also a very large dependency and hence is ripe for pruning and replacement as well

- remove `formatTimestamp` function from `v2/utils` as it is unused
  - it is unused [internally](https://github.com/search?q=repo%3Aargoproj%2Fargo-ui+formattimestamp&type=code) (it is only exported here), unused by [CD](https://github.com/search?q=repo%3Aargoproj%2Fargo-cd%20formattimestamp&type=code), unused by [Workflows](https://github.com/search?q=repo%3Aargoproj%2Fargo-workflows+formattimestamp&type=code)
    - it's also and unused by Rollouts, which has [two](https://github.com/argoproj/argo-rollouts/blob/c688dd89a7f883c8c004b4024b390104b5be5770/ui/src/app/shared/utils/utils.tsx#L17) [internal](https://github.com/argoproj/argo-rollouts/blob/c688dd89a7f883c8c004b4024b390104b5be5770/ui/src/app/components/rollout/revision.tsx#L21) copies of this function

- change `Ticker` component to use plain `Date` instead of `moment`
  - downstream projects should get a type error on this which should make the switch straightforward

- change `Duration` component to use existing `formatDuration` function which doesn't use `moment`
  - this will look different than the previous version, but the formatting between the two should really be consistent in any case
  - other option was to just remove this component entirely, since this repo is not actively maintained
    - leaving the component in instead of deleting it gives a more gradual off-ramp
  - CD uses this component in [two](https://github.com/argoproj/argo-cd/blob/9ecc5aec2a4dba485eb8b5b0ab75fff8927b3418/ui/src/app/applications/components/application-deployment-history/application-deployment-history.tsx#L1) [places](https://github.com/argoproj/argo-cd/blob/9ecc5aec2a4dba485eb8b5b0ab75fff8927b3418/ui/src/app/applications/components/application-operation-state/application-operation-state.tsx#L1) and Rollouts uses this in [one place](https://github.com/argoproj/argo-rollouts/blob/c688dd89a7f883c8c004b4024b390104b5be5770/ui/src/app/components/pods/pods.tsx#L3)
    - Workflows does not use this, it has [its own `DurationPanel` component](https://github.com/argoproj/argo-workflows/blob/1dbc856e51967feb58066a4087a8679b08b87be3/ui/src/app/shared/components/duration-panel.tsx#L7) and its own [internal copy](https://github.com/argoproj/argo-workflows/blob/1dbc856e51967feb58066a4087a8679b08b87be3/ui/src/app/shared/duration.ts#L11) of the `formatDuration` function as well
    - none of these use the `allowNewLines` prop, so it is safe to remove

Signed-off-by: Anton Gilgur <[email protected]>

* fix(ui): duration component should div not mult

ms -> s

Signed-off-by: Anton Gilgur <[email protected]>

* fix incorrect parameter naming

- apparently `durationMs` was incorrectly named as it actually took seconds, not milliseconds
- for backward compat, leave `durationMs`, but also introduce `durationS`
  - and add JSDoc to indicate this to users of the component

Signed-off-by: Anton Gilgur <[email protected]>

* use 2 significant figures

Signed-off-by: Anton Gilgur <[email protected]>

---------

Signed-off-by: Anton Gilgur <[email protected]>

package.json

@@ -24,7 +24,6 @@
         "core-js": "^3.32.1",
         "foundation-sites": "^6.4.3",
         "history": "^4.10.1",
-        "moment": "^2.29.4",
         "prop-types": "^15.8.1",
         "react-autocomplete": "1.8.1",
         "react-form": "^2.16.0",

src/components/duration.tsx

@@ -1,20 +1,13 @@
-import * as moment from 'moment';
 import * as React from 'react';
 
-export const Duration = (props: {durationMs: number, allowNewLines?: boolean}) => {
-    const momentTimeStart = moment.utc(0);
-    const momentTime = moment.utc(props.durationMs * 1000);
-    const duration = moment.duration(momentTime.diff(momentTimeStart));
-    let formattedTime = '';
+import { formatDuration } from '../../v2';
 
-    if (momentTime.diff(momentTimeStart, 'hours') === 0) {
-        formattedTime = ('0' + duration.minutes()).slice(-2) + ':' + ('0' + duration.seconds()).slice(-2) + ' min';
-    } else {
-        if (momentTime.diff(momentTimeStart, 'days') > 0) {
-            formattedTime += momentTime.diff(momentTimeStart, 'days') + ' days' + (props.allowNewLines ? '<br>' : ' ');
-        }
-
-        formattedTime += ('0' + duration.hours()).slice(-2) + ':' + ('0' + duration.minutes()).slice(-2) + ' hours';
-    }
-    return <span dangerouslySetInnerHTML={{__html: formattedTime}}/>;
-};
+/**
+ * Output a string duration from a number of seconds
+ *
+ * @param {number} props.durationS - The number of seconds.
+ * @param {number} props.durationMs - The number of seconds. DEPRECATED: The "Ms" suffix is incorrect, use props.durationS instead.
+ */
+export function Duration(props: {durationMs: number, durationS: number}) {
+    return <span>{formatDuration(props.durationMs || props.durationS, 2)}</span>;
+}

src/components/ticker.tsx

@@ -1,14 +1,13 @@
-import moment from 'moment';
 import * as React from 'react';
 import {interval, Subscription} from 'rxjs';
 
-export class Ticker extends React.Component<{intervalMs?: number, disabled?: boolean, children?: ((time: moment.Moment) => React.ReactNode)}, {time: moment.Moment}> {
+export class Ticker extends React.Component<{intervalMs?: number, disabled?: boolean, children?: ((time: Date) => React.ReactNode)}, {time: Date}> {
 
     private subscription: Subscription | null = null;
 
-    constructor(props: {intervalMs?: number, children?: ((time: moment.Moment) => React.ReactNode)}) {
+    constructor(props: {intervalMs?: number, children?: ((time: Date) => React.ReactNode)}) {
         super(props);
-        this.state = { time: moment() };
+        this.state = { time: new Date() };
         this.ensureSubscribed();
     }
 
@@ -28,7 +27,7 @@ export class Ticker extends React.Component<{intervalMs?: number, disabled?: boo
         if (this.props.disabled) {
             this.ensureUnsubscribed();
         } else if (!this.subscription) {
-            this.subscription = interval(this.props.intervalMs || 1000).subscribe(() => this.setState({ time: moment() }));
+            this.subscription = interval(this.props.intervalMs || 1000).subscribe(() => this.setState({ time: new Date() }));
         }
     }
 

v2/utils/utils.tsx

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import * as React from 'react';
 
 export interface Error {
@@ -30,15 +29,6 @@ export function useData<T>(getData: () => Promise<T>, init?: T, callback?: (data
     return [data as T, loading, {state: error, retry: () => retry(!retrying)} as Error];
 }
 
-export function formatTimestamp(ts: string): string {
-    const inputFormat = 'YYYY-MM-DD HH:mm:ss Z z';
-    const m = moment(ts, inputFormat);
-    if (!ts || !m.isValid()) {
-        return 'Never';
-    }
-    return m.format('MMM D YYYY [at] hh:mm:ss');
-}
-
 export const appendSuffixToClasses = (classNames: string, suffix: string): string => {
     const clString = classNames;
     const cl = (clString || '').split(' ') || [];

yarn.lock

@@ -9988,11 +9988,6 @@ [email protected], mkdirp@^1.0.3, mkdirp@^1.0.4:
   dependencies:
     minimist "^1.2.5"
 
-moment@^2.29.4:
-  version "2.29.4"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
-  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
-
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"