ui: [BUGFIX] Replace all replaceAll with split.join for older browser…

…s without replaceAll (#9715)

* ui: replace all `replaceAll` with split.join

* Use a div instead of fieldset for flex-box reasons

.changelog/9715.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fixed a bug in older browsers relating to String.replaceAll and fieldset w/flexbox usage
+```

ui/packages/consul-ui/app/components/form-group/element/index.js

@@ -21,7 +21,10 @@ export default class Element extends Component {
     }
   }
   get prop() {
-    return `${this.args.name.toLowerCase().replaceAll('.', '-')}`;
+    return `${this.args.name
+      .toLowerCase()
+      .split('.')
+      .join('-')}`;
   }
   get state() {
     const error = this.touched && this.args.error;

ui/packages/consul-ui/app/components/freetext-filter/index.hbs

@@ -1,4 +1,4 @@
-<fieldset
+<div
   class="freetext-filter"
   ...attributes
 >
@@ -16,4 +16,4 @@
     />
   </label>
   {{yield}}
-</fieldset>
+</div>

ui/packages/consul-ui/app/components/freetext-filter/layout.scss

@@ -4,6 +4,7 @@
     display: flex;
     position: relative;
     height: var(--height);
+    width: 100%;
   }
   &_input,
   & > label {

ui/packages/consul-ui/app/utils/intl/missing-message.js

@@ -4,6 +4,7 @@ export default function missingMessage(key, locales) {
   const last = key
     .split('.')
     .pop()
-    .replaceAll('-', ' ');
+    .split('-')
+    .join(' ');
   return `${last.substr(0, 1).toUpperCase()}${last.substr(1)}`;
 }