Don't update template variables if tab is never visited

src/components/flow/actions/sendmsg/SendMsgForm.module.scss

@@ -1,42 +1,3 @@
-@import 'variables.module.scss';
-
-.checkbox {
-  margin-top: 20px;
-}
-
-.quick_reply_summary {
-  margin-top: -20px;
-  position: relative;
-}
-
-
-.existing_quick_replies {
-  padding: 5px;
-  border-radius: 5px;
-  border: 1px solid $light_gray;
-
-  .existing_quick_reply {
-    margin: 2px;
-    display: inline-block;
-  }
-}
-
-.add_quick_replies {
-  margin-top: 10px;
-}
-
-.template_text {
-  margin-top: 10px;
-  padding: 10px;
-  background: $light_gray_2;
-  border-radius: 5px;
-  margin-bottom: 10px;
-}
-
-.variable {
-  margin-bottom: 6px;
-}
-
-temba-completion {
-  --textarea-height: 120px;
-}
+.message {
+  --textarea-height: 8em;
+}

src/components/flow/actions/sendmsg/SendMsgForm.tsx

@@ -37,6 +37,7 @@ import i18n from 'config/i18n';
 import { Trans } from 'react-i18next';
 import { Attachment, renderAttachments } from './attachments';
 import { TembaComponent } from 'temba/TembaComponent';
+import styles from './SendMsgForm.module.scss';
 
 export interface SendMsgFormState extends FormState {
   message: StringEntry;
@@ -400,6 +401,7 @@ export default class SendMsgForm extends React.Component<ActionFormProps, SendMs
       >
         <TypeList __className="" initialType={typeConfig} onChange={this.props.onTypeChange} />
         <TextInputElement
+          __className={styles.message}
           name={i18n.t('forms.message', 'Message')}
           showLabel={false}
           counter=".sms-counter"

src/components/flow/actions/sendmsg/__snapshots__/SendMsgForm.test.ts.snap

@@ -165,6 +165,7 @@ exports[`SendMsgForm render should render 1`] = `
     onChange={[MockFunction]}
   />
   <TextInputElement
+    __className="message"
     autocomplete={true}
     counter=".sms-counter"
     entry={

src/components/flow/actions/sendmsg/helpers.ts

@@ -92,28 +92,38 @@
 
   let templating: MsgTemplating = null;
   if (state.template && state.template.value) {
-    const components = Object.keys(state.templateTranslation.components).map((key: string) => {
-      let uuid = createUUID();
-
-      // try looking up the uuid from the original action
-      if (settings.originalAction && settings.originalAction.type === Types.send_msg) {
-        const originalAction = settings.originalAction as SendMsg;
-        if (originalAction.templating) {
-          const originalComponent = originalAction.templating.components.find(
-            (component: any) => component.name === key
-          );
-          if (originalComponent) {
-            uuid = originalComponent.uuid;
+    const originalAction =
+      settings.originalAction.type === Types.send_msg ? (settings.originalAction as SendMsg) : null;
+
+    let components =
+      originalAction.templating && originalAction.templating.components
+        ? originalAction.templating.components
+        : [];
+
+    if (state.templateTranslation) {
+      components = Object.keys(state.templateTranslation.components).map((key: string) => {
+        let uuid = createUUID();
+
+        // try looking up the uuid from the original action
+        if (settings.originalAction && settings.originalAction.type === Types.send_msg) {
+          const originalAction = settings.originalAction as SendMsg;
+          if (originalAction.templating) {
+            const originalComponent = originalAction.templating.components.find(
+              (component: any) => component.name === key
+            );
+            if (originalComponent) {
+              uuid = originalComponent.uuid;
+            }
           }
         }
-      }
 
-      return {
-        uuid,
-        name: key,
-        params: state.paramsByTemplate[state.template.value.uuid][key]
-      };
-    });
+        return {
+          uuid,
+          name: key,
+          params: state.paramsByTemplate[state.template.value.uuid][key]
+        };
+      });
+    }
 
     templating = {
       template: {