Remove timezone from package date format (#4313)

* Use UTC date for manifest
* Use intl to format package dates

pkg/pkg/pkg.go

@@ -8,8 +8,16 @@ import (
 	"github.com/stashapp/stash/pkg/sliceutil"
 )
 
-const timeFormat = "2006-01-02 15:04:05 -0700"
+const (
+	// TimeFormat is the format used for marshalling/unmarshalling time.Time.
+	// Times are stored in UTC.
+	TimeFormat = "2006-01-02 15:04:05"
 
+	// timeFormatLegacy is the old format that may exist in some manifests.
+	timeFormatLegacy = "2006-01-02 15:04:05 -0700"
+)
+
+// Time is a wrapper around time.Time that allows for custom YAML marshalling/unmarshalling using TimeFormat.
 type Time struct {
 	time.Time
 }
@@ -19,16 +27,25 @@ func (t *Time) UnmarshalYAML(unmarshal func(interface{}) error) error {
 	if err := unmarshal(&s); err != nil {
 		return err
 	}
-	parsed, err := time.Parse(timeFormat, s)
+
+	// times are stored in UTC
+	parsed, err := time.Parse(TimeFormat, s)
 	if err != nil {
-		return err
+		// try to parse using the legacy format
+		var legacyErr error
+		parsed, legacyErr = time.Parse(timeFormatLegacy, s)
+
+		if legacyErr != nil {
+			// if we can't parse using the legacy format, return the original error
+			return err
+		}
 	}
 	t.Time = parsed
 	return nil
 }
 
 func (t Time) MarshalYAML() (interface{}, error) {
-	return t.Format(timeFormat), nil
+	return t.Format(TimeFormat), nil
 }
 
 type PackageMetadata map[string]interface{}

ui/v2.5/src/components/Shared/PackageManager/PackageManager.tsx

@@ -1,6 +1,6 @@
 import { Button, Form, Table } from "react-bootstrap";
 import React, { useState, useMemo, useEffect } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { FormattedMessage, IntlShape, useIntl } from "react-intl";
 import * as GQL from "src/core/generated-graphql";
 import { Icon } from "../Icon";
 import {
@@ -17,10 +17,19 @@ import { LoadingIndicator } from "../LoadingIndicator";
 import { ApolloError } from "@apollo/client";
 import { ClearableInput } from "../ClearableInput";
 
-function formatDate(date: string | undefined | null) {
+function formatDate(intl: IntlShape, date: string | undefined | null) {
   if (!date) return;
 
-  return new Date(date).toISOString();
+  const d = new Date(date);
+
+  return `${intl.formatDate(d, {
+    timeZone: "utc",
+  })} ${intl.formatTime(d, {
+    timeZone: "utc",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  })}`;
 }
 
 interface IPackage {
@@ -48,6 +57,8 @@ const InstalledPackageRow: React.FC<{
   togglePackage: () => void;
   updatesLoaded: boolean;
 }> = ({ loading, pkg, selected, togglePackage, updatesLoaded }) => {
+  const intl = useIntl();
+
   function rowClassname() {
     if (pkg.upgrade?.version) {
       return "package-update-available";
@@ -69,12 +80,14 @@ const InstalledPackageRow: React.FC<{
       </td>
       <td>
         <span className="package-version">{pkg.version}</span>
-        <span className="package-date">{formatDate(pkg.date)}</span>
+        <span className="package-date">{formatDate(intl, pkg.date)}</span>
       </td>
       {updatesLoaded ? (
         <td>
           <span className="package-version">{pkg.upgrade?.version}</span>
-          <span className="package-date">{formatDate(pkg.upgrade?.date)}</span>
+          <span className="package-date">
+            {formatDate(intl, pkg.upgrade?.date)}
+          </span>
         </td>
       ) : undefined}
     </tr>
@@ -523,6 +536,8 @@ const AvailablePackageRow: React.FC<{
   togglePackage,
   renderDescription = () => undefined,
 }) => {
+  const intl = useIntl();
+
   function renderRequiredBy() {
     if (!requiredBy.length) return;
 
@@ -551,7 +566,7 @@ const AvailablePackageRow: React.FC<{
       </td>
       <td>
         <span className="package-version">{pkg.version}</span>
-        <span className="package-date">{formatDate(pkg.date)}</span>
+        <span className="package-date">{formatDate(intl, pkg.date)}</span>
       </td>
       <td>
         {renderRequiredBy()}