giphy: Set rating according to realm_giphy_rating.

We set rating of GIFs retrieved from GIPHY according to
realm_giphy_rating setting. Also, we allow user to set
a rating in organization settings.

frontend_tests/node_tests/dispatch.js

@@ -65,6 +65,7 @@ const unread_ops = mock_esm("../../static/js/unread_ops");
 const user_events = mock_esm("../../static/js/user_events");
 const user_groups = mock_esm("../../static/js/user_groups");
 mock_esm("../../static/js/compose");
+mock_esm("../../static/js/giphy");
 
 const electron_bridge = set_global("electron_bridge", {});
 

static/js/admin.js

@@ -63,6 +63,7 @@ export function build_page() {
         custom_profile_field_types: page_params.custom_profile_field_types,
         realm_name: page_params.realm_name,
         realm_available_video_chat_providers: page_params.realm_available_video_chat_providers,
+        giphy_rating_options: page_params.giphy_rating_options,
         realm_description: page_params.realm_description,
         realm_inline_image_preview: page_params.realm_inline_image_preview,
         server_inline_image_preview: page_params.server_inline_image_preview,

static/js/giphy.js

@@ -6,6 +6,7 @@ import _ from "lodash";
 import render_giphy_picker from "../templates/giphy_picker.hbs";
 import render_giphy_picker_mobile from "../templates/giphy_picker_mobile.hbs";
 
+import * as blueslip from "./blueslip";
 import * as compose_ui from "./compose_ui";
 import {media_breakpoints_num} from "./css_variables";
 import {page_params} from "./page_params";
@@ -29,18 +30,46 @@ export function focus_current_edit_message() {
     $(`#edit_form_${CSS.escape(edit_message_id)} .message_edit_content`).trigger("focus");
 }
 
+export function is_giphy_enabled() {
+    if (page_params.giphy_api_key === "") {
+        return false;
+    }
+    return page_params.realm_giphy_rating !== page_params.giphy_rating_options.disabled.id;
+}
+
 // Approximate width and height of
 // giphy popover as computed by chrome
 // + 25px;
 const APPROX_HEIGHT = 350;
 const APPROX_WIDTH = 300;
 
+export function update_giphy_rating() {
+    if (page_params.realm_giphy_rating === page_params.giphy_rating_options.disabled.id) {
+        $("#compose_box_giphy_grid").hide();
+    } else {
+        $("#compose_box_giphy_grid").show();
+    }
+}
+
+function get_rating() {
+    const options = page_params.giphy_rating_options;
+    for (const rating in page_params.giphy_rating_options) {
+        if (options[rating].id === page_params.realm_giphy_rating) {
+            return rating;
+        }
+    }
+
+    // The below should never run unless a server bug allowed a
+    // `giphy_rating` value not present in `giphy_rating_options`.
+    blueslip.error("Invalid giphy_rating value: " + page_params.realm_giphy_rating);
+    return "g";
+}
+
 function fetchGifs(offset) {
     const config = {
         offset,
         limit: 25,
-        // Default rating to 'g' until we can make this configurable.
-        rating: "g",
+        rating: get_rating(),
         // We don't pass random_id here, for privacy reasons.
     };
     if (search_term === "") {

static/js/message_edit.js

@@ -11,6 +11,7 @@ import * as compose_actions from "./compose_actions";
 import * as composebox_typeahead from "./composebox_typeahead";
 import * as condense from "./condense";
 import * as echo from "./echo";
+import * as giphy from "./giphy";
 import {$t, $t_html} from "./i18n";
 import * as loading from "./loading";
 import * as markdown from "./markdown";
@@ -355,7 +356,7 @@ function edit_message(row, raw_content) {
             stream_name: message.stream,
             notify_new_thread: notify_new_thread_default,
             notify_old_thread: notify_old_thread_default,
-            giphy_enabled: page_params.giphy_api_key !== "",
+            giphy_api_available: giphy.is_giphy_enabled(),
             hide_drafts_link: true,
         }),
     );

static/js/server_events_dispatch.js

@@ -12,6 +12,7 @@ import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
 import * as composebox_typeahead from "./composebox_typeahead";
 import * as emoji_picker from "./emoji_picker";
+import * as giphy from "./giphy";
 import * as hotspots from "./hotspots";
 import * as markdown from "./markdown";
 import * as message_edit from "./message_edit";
@@ -210,6 +211,7 @@ export function dispatch_normal_event(event) {
                 signup_notifications_stream_id: noop,
                 emails_restricted_to_domains: noop,
                 video_chat_provider: compose.update_video_chat_button_display,
+                giphy_rating: giphy.update_giphy_rating,
                 waiting_period_threshold: noop,
                 wildcard_mention_policy: noop,
             };

static/js/settings_org.js

@@ -269,6 +269,11 @@ function set_video_chat_provider_dropdown() {
     $("#id_realm_video_chat_provider").val(chat_provider_id);
 }
 
+function set_giphy_rating_dropdown() {
+    const rating_id = page_params.realm_giphy_rating;
+    $("#id_realm_giphy_rating").val(rating_id);
+}
+
 function set_msg_edit_limit_dropdown() {
     const value = get_property_value("realm_msg_edit_limit_setting");
     $("#id_realm_msg_edit_limit_setting").val(value);
@@ -687,6 +692,7 @@ export function build_page() {
 
     set_realm_waiting_period_dropdown();
     set_video_chat_provider_dropdown();
+    set_giphy_rating_dropdown();
     set_msg_edit_limit_dropdown();
     set_msg_delete_limit_dropdown();
     set_message_retention_setting_dropdown();

static/styles/compose.css

@@ -423,6 +423,10 @@ a.compose_control_button {
     }
 }
 
+a.message-control-button.hide {
+    display: none;
+}
+
 .drag {
     display: none;
     height: 18px;

static/styles/settings.css

@@ -1552,6 +1552,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     top: calc(50% - 120px);
 }
 
+#id_realm_giphy_rating,
 #desktop_icon_count_display,
 #id_realm_waiting_period_setting,
 #id_realm_create_stream_policy,

static/templates/compose_control_buttons.hbs

@@ -7,11 +7,9 @@
 <a role="button" class="undo_markdown_preview compose_control_button fa fa-edit" aria-label="{{t 'Write' }}" tabindex=0 style="display:none;" title="{{t 'Write' }}"></a>
 <a role="button" class="compose_control_button fa fa-video-camera video_link" aria-label="{{t 'Add video call' }}" tabindex=0 title="{{t 'Add video call' }}"></a>
 <a role="button" class="compose_control_button fa fa-smile-o emoji_map" aria-label="{{t 'Add emoji' }}" tabindex=0 title="{{t 'Add emoji' }}"></a>
-{{#if giphy_enabled }}
-<a role="button" class="compose_control_button" aria-label="{{t 'Add GIF' }}" id="compose_box_giphy_grid" title="{{t 'Add GIF' }}">
+<a role="button" class="compose_control_button {{#unless giphy_api_available }} hide {{/unless}}" aria-label="{{t 'Add GIF' }}" id="compose_box_giphy_grid" title="{{t 'Add GIF' }}">
     <img class="compose_giphy_logo" tabindex=0 src="/static/images/GIPHY_logo.png" />
 </a>
-{{/if}}
 {{#unless hide_drafts_link}}
 <a class="message-control-link drafts-link" href="#drafts" title="{{t 'Drafts' }} (d)">{{t 'Drafts' }}</a>
 {{/unless}}

static/templates/settings/organization_settings_admin.hbs

@@ -194,6 +194,17 @@
                         {{/each}}
                     </select>
                 </div>
+                <div class="input-group">
+                    <label for="realm_giphy_rating" class="dropdown-title">
+                        {{t 'GIPHY integration' }}
+                    </label>
+                    <select name="realm_giphy_rating" class ="setting-widget prop-element" id="id_realm_giphy_rating" data-setting-widget-type="number">
+                        {{#each giphy_rating_options}}
+                        <option value='{{this.id}}'>{{this.name}}</option>
+                        {{/each}}
+                    </select>
+                </div>
+
 
                 {{> dropdown_list_widget
                   widget_name="realm_default_code_block_language"

templates/zerver/help/animated-gifs-from-giphy.md

@@ -19,6 +19,24 @@ You can [preview the
 message](/help/preview-your-message-before-sending) before sending to
 see what the message will look like.
 
+## Restrict maximum rating of GIFs retrieved from GIPHY
+
+{!admin-only.md!}
+
+By default, the GIPHY integration is configured to only retrieve GIFs
+that GIPHY categorizes as rated G (General audience). You can change
+this configure or disable GIPHY integration entirely:
+
+{start_tabs}
+
+{settings_tab|organization-settings}
+
+1. Under **Other settings**, select a rating from **Maximum rating of GIFs**.
+
+{!save-changes.md!}
+
+{end_tabs}
+
 ## Troubleshooting
 
 * If you don't see the GIPHY icon, this is likely because you are

zerver/models.py

@@ -463,23 +463,23 @@ class Realm(models.Model):
         },
         # Source: https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/README.md#shared-options
         "y": {
-            "name": "Y - Very young audience",
+            "name": "Allow GIFs rated Y (Very young audience)",
             "id": 1,
         },
         "g": {
-            "name": "G - General audience",
+            "name": "Allow GIFs rated G (General audience)",
             "id": 2,
         },
         "pg": {
-            "name": "PG - Parental guidance",
+            "name": "Allow GIFs rated PG (Parental guidance)",
             "id": 3,
         },
         "pg-13": {
-            "name": "PG13 - Parental guidance (under 13)",
+            "name": "Allow GIFs rated PG13 (Parental guidance - under 13)",
             "id": 4,
         },
         "r": {
-            "name": "R - Restricted",
+            "name": "Allow GIFs rated R (Restricted)",
             "id": 5,
         },
     }