stream_settings: Refactor code for stream message retention setting.

This commit refactors the code for stream message retentions setting
to match it with the other time limit settings -

- Rename the "Retain for N days after posting" option to "Custom".
We also update the option value from "retain_for_period" to
"custom_period".

- Change the label of custom input to "Retention period (days)"
as it is more descriptive and clear than just labelling it as "N".

- The custom input is also moved to be below the dropdown and
also has left margin as with the other time limit realm settings.

static/js/stream_create.js

@@ -226,7 +226,7 @@ function create_stream() {
     let message_retention_selection = $(
         "#stream_creation_form select[name=stream_message_retention_setting]",
     ).val();
-    if (message_retention_selection === "retain_for_period") {
+    if (message_retention_selection === "custom_period") {
         message_retention_selection = Number.parseInt(
             $("#stream_creation_form input[name=stream-message-retention-days]").val(),
             10,
@@ -323,7 +323,7 @@ export function show_new_stream_modal() {
 
     // Add listener to .show stream-message-retention-days-input that we've hidden above
     $("#stream_creation_form .stream_message_retention_setting").on("change", (e) => {
-        if (e.target.value === "retain_for_period") {
+        if (e.target.value === "custom_period") {
             $("#stream_creation_form .stream-message-retention-days-input").show();
         } else {
             $("#stream_creation_form .stream-message-retention-days-input").hide();

static/js/stream_edit.js

@@ -97,7 +97,7 @@ export function get_display_text_for_realm_message_retention_setting() {
 }
 
 function change_stream_message_retention_days_block_display_property(value) {
-    if (value === "retain_for_period") {
+    if (value === "custom_period") {
         $("#stream_privacy_modal .stream-message-retention-days-input").show();
     } else {
         $("#stream_privacy_modal .stream-message-retention-days-input").hide();
@@ -105,7 +105,7 @@ function change_stream_message_retention_days_block_display_property(value) {
 }
 
 function set_stream_message_retention_setting_dropdown(stream) {
-    let value = "retain_for_period";
+    let value = "custom_period";
     if (stream.message_retention_days === null) {
         value = "realm_default";
     } else if (stream.message_retention_days === settings_config.retain_message_forever) {
@@ -434,7 +434,7 @@ function change_stream_privacy(e) {
     let message_retention_days = $(
         "#stream_privacy_modal select[name=stream_message_retention_setting]",
     ).val();
-    if (message_retention_days === "retain_for_period") {
+    if (message_retention_days === "custom_period") {
         message_retention_days = Number.parseInt(
             $("#stream_privacy_modal input[name=stream-message-retention-days]").val(),
             10,

static/templates/stream_settings/stream_types.hbs

@@ -50,12 +50,12 @@
           {{#if disable_message_retention_setting}}disabled{{/if}}>
             <option value="realm_default">{{#tr}}Use organization level settings {org_level_message_retention_setting}{{/tr}}</option>
             <option value="unlimited">{{t 'Retain forever' }}</option>
-            <option value="retain_for_period">{{t 'Retain for N days after posting' }}</option>
+            <option value="custom_period">{{t 'Custom' }}</option>
         </select>
 
-        <div class="dependent-inline-block stream-message-retention-days-input">
+        <div class="dependent-settings-block stream-message-retention-days-input">
             <label class="inline-block">
-                {{t 'N' }}:
+                {{t 'Retention period (days)' }}:
             </label>
             <input type="text" autocomplete="off"
               name="stream-message-retention-days"