Show upload .TMX terms (#3459)

pontoon/teams/static/css/translation_memory.css

@@ -1,9 +1,58 @@
 .translation-memory {
-  .upload-button {
+  .upload-wrapper {
     float: right;
 
-    .fa {
-      padding-right: 2px;
+    .button.upload {
+      .fa {
+        padding-right: 2px;
+      }
+    }
+
+    .button.cancel {
+      display: none;
+      background-color: transparent;
+      margin-left: 0;
+
+      .fa {
+        margin-right: 0;
+      }
+    }
+
+    .button.cancel:hover {
+      .fa {
+        color: var(--white-1);
+      }
+    }
+
+    .button.confirm {
+      display: none;
+    }
+  }
+
+  .upload-terms {
+    display: none;
+    color: var(--light-grey-7);
+    font-style: italic;
+    line-height: 1.5em;
+    padding-top: 10px;
+    text-align: right;
+  }
+
+  .controls.uploading {
+    .button.upload {
+      display: none;
+    }
+
+    .button.cancel {
+      display: inline-block;
+    }
+
+    .button.confirm {
+      display: inline-block;
+    }
+
+    .upload-terms {
+      display: block;
     }
   }
 

pontoon/teams/static/js/translation_memory.js

@@ -169,10 +169,24 @@ $(function () {
     },
   );
 
+  const uploadWrapper = '.translation-memory .upload-wrapper';
+
   // Upload TM entries
-  $('body').on('click', '.translation-memory .upload-button', function () {
+  $('body').on('click', `${uploadWrapper} .upload`, function () {
+    const controls = $(this).parents('.controls');
+    controls.addClass('uploading');
+  });
+  // Cancel action
+  $('body').on('click', `${uploadWrapper} .cancel`, function () {
+    const controls = $(this).parents('.controls');
+    controls.removeClass('uploading');
+  });
+  $('body').on('click', `${uploadWrapper} .confirm`, function () {
+    const controls = $(this).parents('.controls');
     const fileInput = $('<input type="file" accept=".tmx">');
     fileInput.on('change', function () {
+      controls.removeClass('uploading');
+
       const file = this.files[0];
       if (!file) {
         return;

pontoon/teams/templates/teams/includes/translation_memory.html

@@ -6,10 +6,28 @@
                 placeholder="Search translation memory">
         </div>
 
-        <button class="upload-button button">
-            <span class="fa fa-upload"></span>
-            Upload .TMX
-        </button>
+        <div class="upload-wrapper">
+            <button class="cancel button">
+                <span class="fa fa-times"></span>
+            </button>
+
+            <button class="confirm button">
+                <span class="fa fa-upload"></span>
+                Continue
+            </button>
+
+            <button class="upload button">
+                <span class="fa fa-upload"></span>
+                Upload .TMX
+            </button>
+        </div>
+
+        <p class="upload-terms">
+            By uploading content, you confirm that you have the right to share it, either as the owner or under a
+            license that permits redistribution.<br>
+            Please ensure that the content complies with applicable copyright laws and does not infringe on
+            third-party rights.
+        </p>
     </menu>
 
     <table class="translation-memory-list">