Make template DateTime show proper tooltip (#28677)

There was a question about "how to improve the datetime display for
SSH/PGP/WebAuthn"
#28262 (comment)

The root problem is that `DateTime` misses the "data-tooltip-content"
attribute, which should be used to make the tooltip popup smoothly.

Now the UI is consistent and the end users could see the detailed
hour/minute/second easily by hovering the element.


![image](https://github.com/go-gitea/gitea/assets/2114189/2211336f-d59d-4f64-a83b-099f8ef6d29b)


![image](https://github.com/go-gitea/gitea/assets/2114189/f02a9c86-476d-48d6-aece-85a800235fbd)

modules/timeutil/datetime.go

@@ -12,7 +12,7 @@ import (
 )
 
 // DateTime renders an absolute time HTML element by datetime.
-func DateTime(format string, datetime any, attrs ...string) template.HTML {
+func DateTime(format string, datetime any, extraAttrs ...string) template.HTML {
  if p, ok := datetime.(*time.Time); ok {
  datetime = *p
  }
@@ -49,15 +49,20 @@ func DateTime(format string, datetime any, attrs ...string) template.HTML {
  panic(fmt.Sprintf("Unsupported time type %T", datetime))
  }
 
- extraAttrs := strings.Join(attrs, " ")
+ attrs := make([]string, 0, 10+len(extraAttrs))
+ attrs = append(attrs, extraAttrs...)
+ attrs = append(attrs, `data-tooltip-content`, `data-tooltip-interactive="true"`)
+ attrs = append(attrs, `format="datetime"`, `weekday=""`, `year="numeric"`)
 
  switch format {
  case "short":
- return template.HTML(fmt.Sprintf(`<relative-time %s format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="%s">%s</relative-time>`, extraAttrs, datetimeEscaped, textEscaped))
+ attrs = append(attrs, `month="short"`, `day="numeric"`)
  case "long":
- return template.HTML(fmt.Sprintf(`<relative-time %s format="datetime" year="numeric" month="long" day="numeric" weekday="" datetime="%s">%s</relative-time>`, extraAttrs, datetimeEscaped, textEscaped))
+ attrs = append(attrs, `month="long"`, `day="numeric"`)
  case "full":
- return template.HTML(fmt.Sprintf(`<relative-time %s format="datetime" weekday="" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" datetime="%s">%s</relative-time>`, extraAttrs, datetimeEscaped, textEscaped))
+ attrs = append(attrs, `month="short"`, `day="numeric"`, `hour="numeric"`, `minute="numeric"`, `second="numeric"`)
+ default:
+ panic(fmt.Sprintf("Unsupported format %s", format))
  }
- panic(fmt.Sprintf("Unsupported format %s", format))
+ return template.HTML(fmt.Sprintf(`<relative-time %s datetime="%s">%s</relative-time>`, strings.Join(attrs, " "), datetimeEscaped, textEscaped))
 }

modules/timeutil/datetime_test.go

@@ -8,16 +8,14 @@ import (
  "time"
 
  "code.gitea.io/gitea/modules/setting"
+ "code.gitea.io/gitea/modules/test"
 
  "github.com/stretchr/testify/assert"
 )
 
 func TestDateTime(t *testing.T) {
- oldTz := setting.DefaultUILocation
- setting.DefaultUILocation, _ = time.LoadLocation("America/New_York")
- defer func() {
- setting.DefaultUILocation = oldTz
- }()
+ testTz, _ := time.LoadLocation("America/New_York")
+ defer test.MockVariableValue(&setting.DefaultUILocation, testTz)()
 
  refTimeStr := "2018-01-01T00:00:00Z"
  refTime, _ := time.Parse(time.RFC3339, refTimeStr)
@@ -29,17 +27,17 @@ func TestDateTime(t *testing.T) {
  assert.EqualValues(t, "-", DateTime("short", TimeStamp(0)))
 
  actual := DateTime("short", "invalid")
- assert.EqualValues(t, `<relative-time  format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="invalid">invalid</relative-time>`, actual)
+ assert.EqualValues(t, `<relative-time data-tooltip-content data-tooltip-interactive="true" format="datetime" weekday="" year="numeric" month="short" day="numeric" datetime="invalid">invalid</relative-time>`, actual)
 
  actual = DateTime("short", refTimeStr)
- assert.EqualValues(t, `<relative-time  format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</relative-time>`, actual)
+ assert.EqualValues(t, `<relative-time data-tooltip-content data-tooltip-interactive="true" format="datetime" weekday="" year="numeric" month="short" day="numeric" datetime="2018-01-01T00:00:00Z">2018-01-01T00:00:00Z</relative-time>`, actual)
 
  actual = DateTime("short", refTime)
- assert.EqualValues(t, `<relative-time  format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="2018-01-01T00:00:00Z">2018-01-01</relative-time>`, actual)
+ assert.EqualValues(t, `<relative-time data-tooltip-content data-tooltip-interactive="true" format="datetime" weekday="" year="numeric" month="short" day="numeric" datetime="2018-01-01T00:00:00Z">2018-01-01</relative-time>`, actual)
 
  actual = DateTime("short", refTimeStamp)
- assert.EqualValues(t, `<relative-time  format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="2017-12-31T19:00:00-05:00">2017-12-31</relative-time>`, actual)
+ assert.EqualValues(t, `<relative-time data-tooltip-content data-tooltip-interactive="true" format="datetime" weekday="" year="numeric" month="short" day="numeric" datetime="2017-12-31T19:00:00-05:00">2017-12-31</relative-time>`, actual)
 
  actual = DateTime("full", refTimeStamp)
- assert.EqualValues(t, `<relative-time format="datetime" weekday="" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" datetime="2017-12-31T19:00:00-05:00">2017-12-31 19:00:00 -05:00</relative-time>`, actual)
+ assert.EqualValues(t, `<relative-time data-tooltip-content data-tooltip-interactive="true" format="datetime" weekday="" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" datetime="2017-12-31T19:00:00-05:00">2017-12-31 19:00:00 -05:00</relative-time>`, actual)
 }

templates/user/settings/security/webauthn.tmpl

@@ -11,7 +11,9 @@
  </div>
  <div class="flex-item-main">
  <div class="flex-item-title">{{.Name}}</div>
- <span class="flex-item-body time">{{TimeSinceUnix .CreatedUnix ctx.Locale}}</span>
+ <div class="flex-item-body">
+ <i>{{ctx.Locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}}</i>
+ </div>
  </div>
  <div class="flex-item-trailing">
  <button class="ui red tiny button delete-button" data-modal-id="delete-registration" data-url="{{$.Link}}/webauthn/delete" data-id="{{.ID}}">