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
hashicorp · Apr 21, 2021 · fe65a42 · fe65a42
1 parent d802625
commit fe65a42
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 4 deletions.
diff --git a/.changelog/9715.txt 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
@@ -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
@@ -1,4 +1,4 @@
-<fieldset
+<div
   class="freetext-filter"
   ...attributes
 >
@@ -16,4 +16,4 @@
     />
   </label>
   {{yield}}
-</fieldset>
+</div>
diff --git 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
@@ -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)}`;
 }