From 551ac7b794f05100e68a0bcd5cb0422c8c6d5f6e Mon Sep 17 00:00:00 2001
From: John Cowen <johncowen@users.noreply.github.com>
Date: Thu, 11 Feb 2021 09:49:39 +0000
Subject: [PATCH] ui: [BUGFIX] Replace all replaceAll with split.join for older
 browsers without replaceAll (#9715)

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

* Use a div instead of fieldset for flex-box reasons
---
 .changelog/9715.txt                                          | 3 +++
 .../consul-ui/app/components/form-group/element/index.js     | 5 ++++-
 .../consul-ui/app/components/freetext-filter/index.hbs       | 4 ++--
 .../consul-ui/app/components/freetext-filter/layout.scss     | 1 +
 ui/packages/consul-ui/app/utils/intl/missing-message.js      | 3 ++-
 5 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changelog/9715.txt

diff --git a/.changelog/9715.txt b/.changelog/9715.txt
new file mode 100644
index 000000000..d0fd55a0a
--- /dev/null
+++ b/.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
+```
diff --git a/ui/packages/consul-ui/app/components/form-group/element/index.js b/ui/packages/consul-ui/app/components/form-group/element/index.js
index 0d319fc89..c76c2d7ad 100644
--- a/ui/packages/consul-ui/app/components/form-group/element/index.js
+++ b/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;
diff --git a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs b/ui/packages/consul-ui/app/components/freetext-filter/index.hbs
index 8c70ff8b8..9fe1ae114 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs
+++ b/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>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/ui/packages/consul-ui/app/components/freetext-filter/layout.scss b/ui/packages/consul-ui/app/components/freetext-filter/layout.scss
index 57fc5b72a..03e1e7d2f 100644
--- a/ui/packages/consul-ui/app/components/freetext-filter/layout.scss
+++ b/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 {
diff --git a/ui/packages/consul-ui/app/utils/intl/missing-message.js b/ui/packages/consul-ui/app/utils/intl/missing-message.js
index f156fb93c..7e9c3c945 100644
--- a/ui/packages/consul-ui/app/utils/intl/missing-message.js
+++ b/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)}`;
 }