\ No newline at end of file
+ {{#unless this.isRefreshing}}
+ {{@message}}
+ {{/unless}}
+
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/alert-inline.js b/ui/lib/core/addon/components/alert-inline.js
index 6fac080fba47..8a25a6fc286b 100644
--- a/ui/lib/core/addon/components/alert-inline.js
+++ b/ui/lib/core/addon/components/alert-inline.js
@@ -7,62 +7,62 @@ import Component from '@glimmer/component';
import { action } from '@ember/object';
import { later } from '@ember/runloop';
import { tracked } from '@glimmer/tracking';
-import { messageTypes } from 'core/helpers/message-types';
+import { assert } from '@ember/debug';
/**
* @module AlertInline
- * `AlertInline` components are used to inform users of important messages.
+ * * Use Hds::Alert @type="compact" for displaying alert messages.
+ * This component renders a compact Hds::Alert that displays a loading icon if the
+ * @message arg changes and then re-renders the updated @message text.
+ * (Example: submitting a form and displaying the number of errors because on re-submit the number may change)
*
* @example
- * ```js
- *
+ * ```
+ *
* ```
*
- * @param {string} type=null - The alert type passed to the message-types helper.
- * @param {string} [message=null] - The message to display within the alert.
- * @param {boolean} [paddingTop=false] - Whether or not to add padding above component.
- * @param {boolean} [isMarginless=false] - Whether or not to remove margin bottom below component.
- * @param {boolean} [sizeSmall=false] - Whether or not to display a small font with padding below of alert message.
- * @param {boolean} [mimicRefresh=false] - If true will display a loading icon when attributes change (e.g. when a form submits and the alert message changes).
+ * @deprecated {string} type - color getter maps type to the Hds::Alert @color
+ * @param {string} color - Styles alert color and icon, can be one of: critical, warning, success, highlight, neutral
+ * @param {string} message - The message to display within the alert.
*/
export default class AlertInlineComponent extends Component {
@tracked isRefreshing = false;
- get mimicRefresh() {
- return this.args.mimicRefresh || false;
- }
-
- get paddingTop() {
- return this.args.paddingTop ? ' padding-top' : '';
- }
-
- get isMarginless() {
- return this.args.isMarginless ? ' is-marginless' : '';
- }
-
- get sizeSmall() {
- return this.args.sizeSmall ? ' size-small' : '';
- }
-
- get textClass() {
- if (this.args.type === 'danger') {
- return this.alertType.glyphClass;
+ constructor() {
+ super(...arguments);
+ assert('@type arg is deprecated, pass @color="critical" instead', this.args.type !== 'critical');
+ if (this.args.color) {
+ const possibleColors = ['critical', 'warning', 'success', 'highlight', 'neutral'];
+ assert(
+ `${this.args.color} is not a valid color. @color must be one of: ${possibleColors.join(', ')}`,
+ possibleColors.includes(this.args.color)
+ );
}
- return null;
}
- get alertType() {
- return messageTypes([this.args.type]);
+ get color() {
+ if (this.args.color) return this.args.color;
+ // @type arg is deprecated, this is for backward compatibility of old implementation
+ switch (this.args.type) {
+ case 'danger':
+ return 'critical';
+ case 'success':
+ return 'success';
+ case 'warning':
+ return 'warning';
+ case 'info':
+ return 'highlight';
+ default:
+ return 'neutral';
+ }
}
@action
refresh() {
- if (this.mimicRefresh) {
- this.isRefreshing = true;
- later(() => {
- this.isRefreshing = false;
- }, 200);
- }
+ this.isRefreshing = true;
+ later(() => {
+ this.isRefreshing = false;
+ }, 200);
}
}
diff --git a/ui/lib/core/addon/components/kv-object-editor.hbs b/ui/lib/core/addon/components/kv-object-editor.hbs
index 74cb0d63e9b7..eac26ede34cc 100644
--- a/ui/lib/core/addon/components/kv-object-editor.hbs
+++ b/ui/lib/core/addon/components/kv-object-editor.hbs
@@ -13,7 +13,7 @@
/>
{{#if @validationError}}
-
+
{{/if}}
{{#if this.kvData}}
diff --git a/ui/lib/core/addon/components/string-list.hbs b/ui/lib/core/addon/components/string-list.hbs
index 3c654eecd252..b838f29efdf9 100644
--- a/ui/lib/core/addon/components/string-list.hbs
+++ b/ui/lib/core/addon/components/string-list.hbs
@@ -53,15 +53,15 @@
{{/if}}
{{#if (includes index this.indicesWithComma)}}
-
+
{{/if}}
{{/each}}
{{#if this.indicesWithComma}}
-
+
+
+ Input contains a comma. Please separate values into individual rows.
+
+
{{/if}}
\ No newline at end of file
diff --git a/ui/lib/core/addon/components/text-file.hbs b/ui/lib/core/addon/components/text-file.hbs
index e3fd0ec46864..6572357e82da 100644
--- a/ui/lib/core/addon/components/text-file.hbs
+++ b/ui/lib/core/addon/components/text-file.hbs
@@ -57,7 +57,7 @@
{{/if}}
diff --git a/ui/lib/core/addon/templates/components/edit-form.hbs b/ui/lib/core/addon/templates/components/edit-form.hbs
index 02f0b12a0e73..2ca2fb583b89 100644
--- a/ui/lib/core/addon/templates/components/edit-form.hbs
+++ b/ui/lib/core/addon/templates/components/edit-form.hbs
@@ -30,7 +30,7 @@
>
<:error>
{{#if this.invalidFormAlert}}
-
+
{{/if}}
diff --git a/ui/lib/kubernetes/addon/components/page/configure.hbs b/ui/lib/kubernetes/addon/components/page/configure.hbs
index b623c2a2a975..45795fa15cb8 100644
--- a/ui/lib/kubernetes/addon/components/page/configure.hbs
+++ b/ui/lib/kubernetes/addon/components/page/configure.hbs
@@ -78,7 +78,8 @@
-
{{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs b/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
index e84330f80c32..137e0cafb14a 100644
--- a/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
+++ b/ui/lib/pki/addon/components/page/pki-issuer-rotate-root.hbs
@@ -173,9 +173,8 @@
{{/if}}
\ No newline at end of file
diff --git a/ui/lib/pki/addon/components/pki-role-generate.hbs b/ui/lib/pki/addon/components/pki-role-generate.hbs
index e1bebc7e31d8..a5db88ff6557 100644
--- a/ui/lib/pki/addon/components/pki-role-generate.hbs
+++ b/ui/lib/pki/addon/components/pki-role-generate.hbs
@@ -44,7 +44,7 @@
{{#if this.invalidFormAlert}}