Add a tooltip for slack notification

1.Fixes #18507 2.Remind the users of Slack's rate limits Signed-off-by: AllForNothing <sshijun@vmware.com>
goharbor · Jun 5, 2023 · e2ec37d · e2ec37d
1 parent 9d28d1f
commit e2ec37d
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 24 deletions.
diff --git a/src/portal/src/app/base/project/webhook/add-webhook-form/add-webhook-form.component.html b/src/portal/src/app/base/project/webhook/add-webhook-form/add-webhook-form.component.html
@@ -83,24 +83,40 @@
                 </div>
             </div>
             <!-- notify type -->
-            <clr-select-container>
-                <label class="required">{{
+            <div class="clr-form-control">
+                <label class="required clr-control-label">{{
                     'WEBHOOK.NOTIFY_TYPE' | translate
                 }}</label>
-                <select
-                    class="width-238"
-                    clrSelect
-                    name="notifyType"
-                    id="notify_type"
-                    [(ngModel)]="webhook.targets[0].type"
-                    [disabled]="checking">
-                    <option
-                        *ngFor="let type of metadata?.notify_type"
-                        value="{{ type }}">
-                        {{ type }}
-                    </option>
-                </select>
-            </clr-select-container>
+                <div class="clr-control-container">
+                    <div class="clr-select-wrapper">
+                        <select
+                            class="width-238 clr-select"
+                            name="notifyType"
+                            id="notify_type"
+                            [(ngModel)]="webhook.targets[0].type"
+                            [disabled]="checking">
+                            <option
+                                *ngFor="let type of metadata?.notify_type"
+                                value="{{ type }}">
+                                {{ type }}
+                            </option>
+                        </select>
+                    </div>
+                    <clr-tooltip [hidden]="webhook.targets[0].type !== 'slack'">
+                        <clr-icon
+                            clrTooltipTrigger
+                            shape="info-circle"
+                            size="24"></clr-icon>
+                        <clr-tooltip-content
+                            clrPosition="top-right"
+                            clrSize="lg"
+                            *clrIfOpen>
+                            {{ 'WEBHOOK.SLACK_RATE_LIMIT' | translate }}
+                        </clr-tooltip-content>
+                    </clr-tooltip>
+                </div>
+            </div>
+
             <!-- payload format -->
             <clr-select-container *ngIf="webhook.targets[0].type === 'http'">
                 <label>{{ 'WEBHOOK.PAYLOAD_FORMAT' | translate }}</label>

diff --git a/src/portal/src/i18n/lang/de-de-lang.json b/src/portal/src/i18n/lang/de-de-lang.json
@@ -431,7 +431,8 @@
         "EVENT_TYPE_REQUIRED": "Mindestens ein Event Typ ist erforderlich",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
     },
     "GROUP": {
         "GROUP": "Gruppe",

diff --git a/src/portal/src/i18n/lang/en-us-lang.json b/src/portal/src/i18n/lang/en-us-lang.json
@@ -431,7 +431,9 @@
         "EVENT_TYPE_REQUIRED": "Require at least one event type",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
+
     },
     "GROUP": {
         "GROUP": "Group",

diff --git a/src/portal/src/i18n/lang/es-es-lang.json b/src/portal/src/i18n/lang/es-es-lang.json
@@ -432,7 +432,8 @@
         "EVENT_TYPE_REQUIRED": "Require at least one event type",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
     },
     "GROUP": {
         "GROUP": "Group",

diff --git a/src/portal/src/i18n/lang/fr-fr-lang.json b/src/portal/src/i18n/lang/fr-fr-lang.json
@@ -421,7 +421,8 @@
         "EVENT_TYPE_REQUIRED": "Au moins un type d'évènement est nécessaire",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
     },
     "GROUP": {
         "Group": "Groupe",

diff --git a/src/portal/src/i18n/lang/pt-br-lang.json b/src/portal/src/i18n/lang/pt-br-lang.json
@@ -463,7 +463,8 @@
         "EVENT_TYPE_REQUIRED": "Pelo menos um tipo de evento é obrigatório",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
     },
     "AUDIT_LOG": {
         "USERNAME": "Nome do usuário",

diff --git a/src/portal/src/i18n/lang/tr-tr-lang.json b/src/portal/src/i18n/lang/tr-tr-lang.json
@@ -431,7 +431,8 @@
         "EVENT_TYPE_REQUIRED": "Require at least one event type",
         "PAYLOAD_FORMAT": "Payload Format",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "Payload Data"
+        "PAYLOAD_DATA": "Payload Data",
+        "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
     },
     "GROUP": {
         "GROUP": "Grup",

diff --git a/src/portal/src/i18n/lang/zh-cn-lang.json b/src/portal/src/i18n/lang/zh-cn-lang.json
@@ -430,7 +430,8 @@
         "EVENT_TYPE_REQUIRED": "请至少选择一种事件类型",
         "PAYLOAD_FORMAT": "载荷形式",
         "CLOUD_EVENT": "CloudEvents",
-        "PAYLOAD_DATA": "载荷数据"
+        "PAYLOAD_DATA": "载荷数据",
+        "SLACK_RATE_LIMIT": "请注意 Slack 的速率限制"
     },
     "GROUP": {
         "GROUP": "组",

diff --git a/src/portal/src/i18n/lang/zh-tw-lang.json b/src/portal/src/i18n/lang/zh-tw-lang.json
@@ -428,7 +428,8 @@
     "EVENT_TYPE_REQUIRED": "請至少選擇一種事件類型",
     "PAYLOAD_FORMAT": "Payload 格式",
     "CLOUD_EVENT": "CloudEvents",
-    "PAYLOAD_DATA": "Payload 資料"
+    "PAYLOAD_DATA": "Payload 資料",
+    "SLACK_RATE_LIMIT": "Please be ware of the rate limits for Slack"
   },
   "GROUP": {
     "GROUP": "群組",