Make template `DateTime` show proper tooltip (#28677) (#28683)

Backport #28677

diff --git a/modules/timeutil/datetime.go b/modules/timeutil/datetime.go
index 83170b374b54c670702ddd2760095f3a936be527..62b94f7cf481cd8f358f03d1dd5e84a9e230637a 100644 (file)
--- a/modules/timeutil/datetime.go
+++ b/modules/timeutil/datetime.go
@@ -7,11 +7,12 @@ import (
        "fmt"
        "html"
        "html/template"
+       "strings"
        "time"
 )
 
 // DateTime renders an absolute time HTML element by datetime.
-func DateTime(format string, datetime any) template.HTML {
+func DateTime(format string, datetime any, extraAttrs ...string) template.HTML {
        if p, ok := datetime.(*time.Time); ok {
                datetime = *p
        }
@@ -48,13 +49,20 @@ func DateTime(format string, datetime any) template.HTML {
                panic(fmt.Sprintf("Unsupported time type %T", datetime))
        }
 
+       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 format="datetime" year="numeric" month="short" day="numeric" weekday="" datetime="%s">%s</relative-time>`, datetimeEscaped, textEscaped))
+               attrs = append(attrs, `month="short"`, `day="numeric"`)
        case "long":
-               return template.HTML(fmt.Sprintf(`<relative-time format="datetime" year="numeric" month="long" day="numeric" weekday="" datetime="%s">%s</relative-time>`, datetimeEscaped, textEscaped))
+               attrs = append(attrs, `month="long"`, `day="numeric"`)
        case "full":
-               return template.HTML(fmt.Sprintf(`<relative-time format="datetime" weekday="" year="numeric" month="short" day="numeric" hour="numeric" minute="numeric" second="numeric" datetime="%s">%s</relative-time>`, 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))
 }

diff --git a/modules/timeutil/datetime_test.go b/modules/timeutil/datetime_test.go
index f44b7aaae3c1bfec63c5f0407318f684c963d85b..26494b84754f9582c0db65206c0109d8e990b0ed 100644 (file)
--- a/modules/timeutil/datetime_test.go
+++ b/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)
 }

diff --git a/templates/user/settings/security/webauthn.tmpl b/templates/user/settings/security/webauthn.tmpl
index 28d8511fb46c6b21fb753784bb47790ce83ae143..e0876f41623997c7b047b68b6b1b29e9cea89756 100644 (file)
--- a/templates/user/settings/security/webauthn.tmpl
+++ b/templates/user/settings/security/webauthn.tmpl
@@ -10,7 +10,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}}">