Update UI text and docs - Google Chat

- Update UI text
- Rename from Hangouts to Google Chat
- Add help text
- Change placeholder
- Update docs
- Add changelog
- Update translation

app/models/project_services/hangouts_chat_service.rb

@@ -3,12 +3,14 @@
 require 'hangouts_chat'
 
 class HangoutsChatService < ChatNotificationService
+  include ActionView::Helpers::UrlHelper
+
   def title
-    'Hangouts Chat'
+    'Google Chat'
   end
 
   def description
-    'Receive event notifications in Google Hangouts Chat'
+    'Send notifications from GitLab to a room in Google Chat.'
   end
 
   def self.to_param
@@ -16,13 +18,8 @@ class HangoutsChatService < ChatNotificationService
   end
 
   def help
-    'This service sends notifications about projects events to Google Hangouts Chat room.<br />
-    To set up this service:
-    <ol>
-      <li><a href="https://developers.google.com/hangouts/chat/how-tos/webhooks">Set up an incoming webhook for your room</a>. All notifications will come to this room.</li>
-      <li>Paste the <strong>Webhook URL</strong> into the field below.</li>
-      <li>Select events below to enable notifications.</li>
-    </ol>'
+    docs_link = link_to _('How do I set up a Google Chat webhook?'), Rails.application.routes.url_helpers.help_page_url('user/project/integrations/hangouts_chat'), target: '_blank', rel: 'noopener noreferrer'
+    s_('Before enabling this integration, create a webhook for the room in Google Chat where you want to receive notifications from this project. %{docs_link}').html_safe % { docs_link: docs_link.html_safe }
   end
 
   def event_field(event)
@@ -42,7 +39,7 @@ class HangoutsChatService < ChatNotificationService
 
   def default_fields
     [
-      { type: 'text', name: 'webhook', placeholder: "e.g. #{webhook_placeholder}" },
+      { type: 'text', name: 'webhook', placeholder: "#{webhook_placeholder}" },
       { type: 'checkbox', name: 'notify_only_broken_pipelines' },
       { type: 'select', name: 'branches_to_be_notified', choices: branch_choices }
     ]

changelogs/unreleased/tw-okr-google-chat.yml

+---
+title: Review UI text and docs - Google Chat
+merge_request: 59518
+author:
+type: other

doc/user/project/integrations/hangouts_chat.md

@@ -4,32 +4,50 @@ group: Ecosystem
 info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#assignments
 ---
 
-# Hangouts Chat service **(FREE)**
+# Google Chat integration **(FREE)**
 
 > [Introduced](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/43756) in GitLab 11.2.
 
-The Hangouts Chat service sends notifications from GitLab to the room for which the webhook was created.
+Integrate your project to send notifications from GitLab to a
+room of your choice in [Google Chat](https://chat.google.com/) (former Google
+Hangouts).
 
-## On Hangouts Chat
+## How it works
 
-1. Open the chat room in which you want to see the notifications.
-1. From the chat room menu, select **Configure Webhooks**.
-1. Click on **ADD WEBHOOK** and fill in the name of the bot to post the messages. Optionally define an avatar.
-1. Click **SAVE** and copy the **Webhook URL** of your webhook.
+To enable this integration, first you need to create a webhook for the room in
+Google Chat where you want to receive the nofications from your project.
 
-See also [the Hangouts Chat documentation for configuring incoming webhooks](https://developers.google.com/hangouts/chat/how-tos/webhooks)
+After that, enable the integration in GitLab and choose the events you want to
+be notified about in your Google Chat room.
 
-## On GitLab
+For every selected event in your project, GitLab acts like a bot sending
+notifications to Google Chat:
 
-When you have the **Webhook URL** for your Hangouts Chat room webhook, you can set up the GitLab service.
+![Google Chat integration illustration](img/google_chat_integration_v13_11.png)
 
-1. Navigate to the [Integrations page](overview.md#accessing-integrations) in your project's settings, i.e. **Project > Settings > Integrations**.
-1. Select the **Hangouts Chat** integration to configure it.
-1. Ensure that the **Active** toggle is enabled.
-1. Check the checkboxes corresponding to the GitLab events you want to receive.
-1. Paste the **Webhook URL** that you copied from the Hangouts Chat configuration step.
-1. Configure the remaining options and click `Save changes`.
+## In Google Chat
 
-Your Hangouts Chat room now starts receiving GitLab event notifications as configured.
+Select a room and create a webhook:
 
-![Hangouts Chat configuration](img/hangouts_chat_configuration.png)
+1. Enter the room where you want to receive notifications from GitLab.
+1. Open the room dropdown menu on the top-left and select **Manage webhooks**.
+1. Enter the name for your webhook, for example "GitLab integration".
+1. (Optional) Add an avatar for your bot.
+1. Select **Save**.
+1. Copy the webhook URL.
+
+For further details, see [the Google Chat documentation for configuring webhooks](https://developers.google.com/hangouts/chat/how-tos/webhooks).
+
+## In GitLab
+
+Enable the Google Chat integration in GitLab:
+
+1. In your project, go to **Settings > Integrations** and select **Google Chat**.
+1. Scroll down to the end of the page where you find a **Webhook** field.
+1. Enter the webhook URL you copied from Google Chat.
+1. Select the events you want to be notified about in your Google Chat room.
+1. (Optional) Select **Test settings** to verify the connection.
+1. Select **Save changes**.
+
+To test the integration, make a change based on the events you selected and
+see the notification in your Google Chat room.

doc/user/project/integrations/overview.md

@@ -41,7 +41,7 @@ Click on the service links to see further configuration instructions and details
 | [External wiki](../wiki/index.md#link-an-external-wiki)   | Link an external wiki.                                          | **{dotted-circle}** No |
 | Flowdock                                                  | Use Flowdock with GitLab.                                                                    | **{dotted-circle}** No |
 | [GitHub](github.md)                                       | Obtain statuses for commits and pull requests.                                               | **{dotted-circle}** No |
-| [Hangouts Chat](hangouts_chat.md)                         | Receive events notifications.                                                                | **{dotted-circle}** No |
+| [Google Chat](hangouts_chat.md)                           | Send notifications from your GitLab project to a room in Google Chat.| **{dotted-circle}** No |
 | [Irker (IRC gateway)](irker.md)                           | Send IRC messages.                                                                           | **{dotted-circle}** No |
 | [Jenkins](../../../integration/jenkins.md)                | Run CI/CD pipelines with Jenkins.                                                            | **{check-circle}** Yes |
 | JetBrains TeamCity CI                                     | Run CI/CD pipelines with TeamCity.                                                           | **{check-circle}** Yes |

locale/gitlab.pot

@@ -4926,6 +4926,9 @@ msgstr ""
 msgid "Be careful. Renaming a project's repository can have unintended side effects."
 msgstr ""
 
+msgid "Before enabling this integration, create a webhook for the room in Google Chat where you want to receive notifications from this project. %{docs_link}"
+msgstr ""
+
 msgid "Before inserting code, be sure to read the comment that separated each code group."
 msgstr ""
 
@@ -15995,6 +15998,9 @@ msgstr ""
 msgid "How do I mirror repositories?"
 msgstr ""
 
+msgid "How do I set up a Google Chat webhook?"
+msgstr ""
+
 msgid "How do I set up this service?"
 msgstr ""