Support configuration variables on Gitea Actions (#24724)

Co-Author: @silverwind @wxiaoguang 
Replace: #24404

See:
- [defining configuration variables for multiple
workflows](https://docs.github.com/en/actions/learn-github-actions/variables#defining-configuration-variables-for-multiple-workflows)
- [vars
context](https://docs.github.com/en/actions/learn-github-actions/contexts#vars-context)

Related to:
- [x] protocol: https://gitea.com/gitea/actions-proto-def/pulls/7
- [x] act_runner: https://gitea.com/gitea/act_runner/pulls/157
- [x] act: https://gitea.com/gitea/act/pulls/43

#### Screenshoot
Create Variable:

![image](https://user-images.githubusercontent.com/33891828/236758288-032b7f64-44e7-48ea-b07d-de8b8b0e3729.png)


![image](https://user-images.githubusercontent.com/33891828/236758174-5203f64c-1d0e-4737-a5b0-62061dee86f8.png)

Workflow:
```yaml
  test_vars:
    runs-on: ubuntu-latest
    steps:
      - name: Print Custom Variables
        run: echo "${{ vars.test_key }}"
      - name: Try to print a non-exist var
        run: echo "${{ vars.NON_EXIST_VAR }}"
```

Actions Log:

![image](https://user-images.githubusercontent.com/33891828/236759075-af0c5950-368d-4758-a8ac-47a96e43b6e2.png)

---
This PR just implement the org / user (depends on the owner of the
current repository) and repo level variables, The Environment level
variables have not been implemented.
Because
[Environment](https://docs.github.com/en/actions/deployment/targeting-different-environments/using-environments-for-deployment#about-environments)
is a module separate from `Actions`. Maybe it would be better to create
a new PR to do it.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

templates/org/settings/actions.tmpl

@@ -4,6 +4,8 @@
 		{{template "shared/actions/runner_list" .}}
 	{{else if eq .PageType "secrets"}}
 		{{template "shared/secrets/add_list" .}}
+	{{else if eq .PageType "variables"}}
+		{{template "shared/variables/variable_list" .}}
 	{{end}}
 	</div>
 {{template "org/settings/layout_footer" .}}

templates/org/settings/navbar.tmpl

@@ -23,7 +23,7 @@
 		</a>
 		{{end}}
 		{{if .EnableActions}}
-		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
+		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets .PageIsSharedSettingsVariables}}open{{end}}>
 			<summary>{{.locale.Tr "actions.actions"}}</summary>
 			<div class="menu">
 				<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{.OrgLink}}/settings/actions/runners">
@@ -32,6 +32,9 @@
 				<a class="{{if .PageIsSharedSettingsSecrets}}active {{end}}item" href="{{.OrgLink}}/settings/actions/secrets">
 					{{.locale.Tr "secrets.secrets"}}
 				</a>
+				<a class="{{if .PageIsSharedSettingsVariables}}active {{end}}item" href="{{.OrgLink}}/settings/actions/variables">
+					{{.locale.Tr "actions.variables"}}
+				</a>
 			</div>
 		</details>
 		{{end}}

templates/repo/settings/actions.tmpl

@@ -4,6 +4,8 @@
 			{{template "shared/actions/runner_list" .}}
 		{{else if eq .PageType "secrets"}}
 			{{template "shared/secrets/add_list" .}}
+		{{else if eq .PageType "variables"}}
+			{{template "shared/variables/variable_list" .}}
 		{{end}}
 	</div>
 {{template "repo/settings/layout_footer" .}}

templates/repo/settings/navbar.tmpl

@@ -34,7 +34,7 @@
 			</a>
 		{{end}}
 		{{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}}
-		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
+		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets .PageIsSharedSettingsVariables}}open{{end}}>
 			<summary>{{.locale.Tr "actions.actions"}}</summary>
 			<div class="menu">
 				<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{.RepoLink}}/settings/actions/runners">
@@ -43,6 +43,9 @@
 				<a class="{{if .PageIsSharedSettingsSecrets}}active {{end}}item" href="{{.RepoLink}}/settings/actions/secrets">
 					{{.locale.Tr "secrets.secrets"}}
 				</a>
+				<a class="{{if .PageIsSharedSettingsVariables}}active {{end}}item" href="{{.RepoLink}}/settings/actions/variables">
+					{{.locale.Tr "actions.variables"}}
+				</a>
 			</div>
 		</details>
 		{{end}}

templates/shared/secrets/add_list.tmpl

@@ -1,52 +1,40 @@
 <h4 class="ui top attached header">
 	{{.locale.Tr "secrets.management"}}
 	<div class="ui right">
-		<button class="ui primary tiny show-panel button" data-panel="#add-secret-panel">{{.locale.Tr "secrets.creation"}}</button>
+		<button class="ui primary tiny button show-modal"
+			data-modal="#add-secret-modal"
+			data-modal-form.action="{{.Link}}"
+			data-modal-header="{{.locale.Tr "secrets.creation"}}"
+		>
+			{{.locale.Tr "secrets.creation"}}
+		</button>
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasError}}gt-hidden {{end}}gt-mb-4" id="add-secret-panel">
-		<form class="ui form" action="{{.Link}}" method="post">
-			{{.CsrfTokenHtml}}
-			<div class="field">
-				{{.locale.Tr "secrets.description"}}
-			</div>
-			<div class="field{{if .Err_Title}} error{{end}}">
-				<label for="secret-title">{{.locale.Tr "secrets.name"}}</label>
-				<input id="secret-title" name="title" value="{{.title}}" autofocus required pattern="^[a-zA-Z_][a-zA-Z0-9_]*$" placeholder="{{.locale.Tr "secrets.creation.name_placeholder"}}">
-			</div>
-			<div class="field{{if .Err_Content}} error{{end}}">
-				<label for="secret-content">{{.locale.Tr "secrets.value"}}</label>
-				<textarea id="secret-content" name="content" required placeholder="{{.locale.Tr "secrets.creation.value_placeholder"}}">{{.content}}</textarea>
-			</div>
-			<button class="ui green button">
-				{{.locale.Tr "secrets.creation"}}
-			</button>
-			<button class="ui hide-panel button" data-panel="#add-secret-panel">
-				{{.locale.Tr "cancel"}}
-			</button>
-		</form>
-	</div>
 	{{if .Secrets}}
 	<div class="ui key list">
-		{{range .Secrets}}
-		<div class="item">
-			<div class="right floated content">
-				<button class="ui red tiny button delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
-					{{$.locale.Tr "settings.delete_key"}}
-				</button>
-			</div>
-			<div class="left floated content">
-				<i>{{svg "octicon-key" 32}}</i>
+		{{range $i, $v := .Secrets}}
+		<div class="item gt-df gt-ac gt-fw {{if gt $i 0}} gt-py-4{{end}}">
+			<div class="content gt-f1 gt-df gt-js">
+				<div class="content">
+					<i>{{svg "octicon-key" 32}}</i>
+				</div>
+				<div class="content gt-ml-3 gt-ellipsis">
+					<strong>{{$v.Name}}</strong>
+					<div class="print meta">******</div>
+				</div>
 			</div>
 			<div class="content">
-				<strong>{{.Name}}</strong>
-				<div class="print meta">******</div>
-				<div class="activity meta">
-					<i>
-						{{$.locale.Tr "settings.added_on" (DateTime "short" .CreatedUnix) | Safe}}
-					</i>
-				</div>
+				<span class="color-text-light-2 gt-mr-5">
+					{{$.locale.Tr "settings.added_on" (DateTime "short" $v.CreatedUnix) | Safe}}
+				</span>
+				<button class="ui btn interact-bg link-action gt-p-3"
+					data-url="{{$.Link}}/delete?id={{.ID}}"
+					data-modal-confirm="{{$.locale.Tr "secrets.deletion.description"}}"
+					data-tooltip-content="{{$.locale.Tr "secrets.deletion"}}"
+				>
+					{{svg "octicon-trash"}}
+				</button>
 			</div>
 		</div>
 		{{end}}
@@ -55,13 +43,37 @@
 		{{.locale.Tr "secrets.none"}}
 	{{end}}
 </div>
-<div class="ui g-modal-confirm delete modal">
+
+{{/* Add secret dialog */}}
+<div class="ui small modal" id="add-secret-modal">
 	<div class="header">
-		{{svg "octicon-trash"}}
-		{{.locale.Tr "secrets.deletion"}}
+		<span id="actions-modal-header"></span>
 	</div>
-	<div class="content">
-		<p>{{.locale.Tr "secrets.deletion.description"}}</p>
-	</div>
-	{{template "base/modal_actions_confirm" .}}
+	<form class="ui form form-fetch-action" method="post">
+		<div class="content">
+			{{.CsrfTokenHtml}}
+			<div class="field">
+				{{.locale.Tr "secrets.description"}}
+			</div>
+			<div class="field">
+				<label for="secret-name">{{.locale.Tr "name"}}</label>
+				<input autofocus required
+					id="secret-name"
+					name="name"
+					value="{{.name}}"
+					pattern="^[a-zA-Z_][a-zA-Z0-9_]*$"
+					placeholder="{{.locale.Tr "secrets.creation.name_placeholder"}}"
+				>
+			</div>
+			<div class="field">
+				<label for="secret-data">{{.locale.Tr "value"}}</label>
+				<textarea required
+					id="secret-data"
+					name="data"
+					placeholder="{{.locale.Tr "secrets.creation.value_placeholder"}}"
+				></textarea>
+			</div>
+		</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+	</form>
 </div>

templates/shared/variables/variable_list.tmpl

@@ -0,0 +1,85 @@
+<h4 class="ui top attached header">
+	{{.locale.Tr "actions.variables.management"}}
+	<div class="ui right">
+		<button class="ui primary tiny button show-modal"
+			data-modal="#edit-variable-modal"
+			data-modal-form.action="{{.Link}}/new"
+			data-modal-header="{{.locale.Tr "actions.variables.creation"}}"
+			data-modal-dialog-variable-name=""
+			data-modal-dialog-variable-data=""
+		>
+			{{.locale.Tr "actions.variables.creation"}}
+		</button>
+	</div>
+</h4>
+<div class="ui attached segment">
+	{{if .Variables}}
+	<div class="ui list">
+		{{range $i, $v := .Variables}}
+		<div class="item gt-df gt-ac gt-fw {{if gt $i 0}} gt-py-4{{end}}">
+			<div class="content gt-f1 gt-ellipsis">
+				<strong>{{$v.Name}}</strong>
+				<div class="print meta gt-ellipsis">{{$v.Data}}</div>
+			</div>
+			<div class="content">
+				<span class="color-text-light-2 gt-mr-5">
+					{{$.locale.Tr "settings.added_on" (DateTime "short" $v.CreatedUnix) | Safe}}
+				</span>
+				<button class="btn interact-bg gt-p-3 show-modal"
+					data-tooltip-content="{{$.locale.Tr "variables.edit"}}"
+					data-modal="#edit-variable-modal"
+					data-modal-form.action="{{$.Link}}/{{$v.ID}}/edit"
+					data-modal-header="{{$.locale.Tr "actions.variables.edit"}}"
+					data-modal-dialog-variable-name="{{$v.Name}}"
+					data-modal-dialog-variable-data="{{$v.Data}}"
+				>
+					{{svg "octicon-pencil"}}
+				</button>
+				<button class="btn interact-bg gt-p-3 link-action"
+					data-tooltip-content="{{$.locale.Tr "actions.variables.deletion"}}"
+					data-url="{{$.Link}}/{{$v.ID}}/delete"
+					data-modal-confirm="{{$.locale.Tr "actions.variables.deletion.description"}}"
+				>
+					{{svg "octicon-trash"}}
+				</button>
+			</div>
+		</div>
+		{{end}}
+	</div>
+	{{else}}
+		{{.locale.Tr "actions.variables.none"}}
+	{{end}}
+</div>
+
+{{/** Edit variable dialog */}}
+<div class="ui small modal" id="edit-variable-modal">
+	<div class="header"></div>
+	<form class="ui form form-fetch-action" method="post">
+		<div class="content">
+			{{.CsrfTokenHtml}}
+			<div class="field">
+				{{.locale.Tr "actions.variables.description"}}
+			</div>
+			<div class="field">
+				<label for="dialog-variable-name">{{.locale.Tr "name"}}</label>
+				<input autofocus required
+					name="name"
+					id="dialog-variable-name"
+					value="{{.name}}"
+					pattern="^[a-zA-Z_][a-zA-Z0-9_]*$"
+					placeholder="{{.locale.Tr "secrets.creation.name_placeholder"}}"
+				>
+			</div>
+			<div class="field">
+				<label for="dialog-variable-data">{{.locale.Tr "value"}}</label>
+				<textarea required
+					name="data"
+					id="dialog-variable-data"
+					placeholder="{{.locale.Tr "secrets.creation.value_placeholder"}}"
+				></textarea>
+			</div>
+		</div>
+		{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
+	</form>
+</div>
+

templates/user/settings/actions.tmpl

@@ -4,6 +4,8 @@
 		{{template "shared/secrets/add_list" .}}
 	{{else if eq .PageType "runners"}}
 		{{template "shared/actions/runner_list" .}}
+	{{else if eq .PageType "variables"}}
+		{{template "shared/variables/variable_list" .}}
 	{{end}}
 	</div>
 

templates/user/settings/navbar.tmpl

@@ -20,7 +20,7 @@
 			{{.locale.Tr "settings.ssh_gpg_keys"}}
 		</a>
 		{{if .EnableActions}}
-		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
+		<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets .PageIsSharedSettingsVariables}}open{{end}}>
 			<summary>{{.locale.Tr "actions.actions"}}</summary>
 			<div class="menu">
 				<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{AppSubUrl}}/user/settings/actions/runners">
@@ -29,6 +29,9 @@
 				<a class="{{if .PageIsSharedSettingsSecrets}}active {{end}}item" href="{{AppSubUrl}}/user/settings/actions/secrets">
 					{{.locale.Tr "secrets.secrets"}}
 				</a>
+				<a class="{{if .PageIsSharedSettingsVariables}}active {{end}}item" href="{{AppSubUrl}}/user/settings/actions/variables">
+					{{.locale.Tr "actions.variables"}}
+				</a>
 			</div>
 		</details>
 		{{end}}