IntenseWebs/mattermost
3
0 Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-11-03 12:48:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Use Compass button loading spinner and migrate settings Cancel buttons

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Matthew BirtchandCursor committed 2026-10-07 18:50:26 +02:00
1 parent 4574ccc63c
commit d7cdcd26e3
24 files changed
+1080 -736
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
+27 -31
View File
@@ -11,9 +11,7 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
<span
class="_button__label_doayp_24"
>
<span>
Save
</span>
Save
</span>
</button>
</div>
@@ -30,9 +28,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
<span
class="_button__label_doayp_24"
>
<span>
Save
</span>
Save
</span>
</button>
</div>
@@ -49,9 +45,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
<span
class="_button__label_doayp_24"
>
<span>
Go
</span>
Go
</span>
</button>
</div>
@@ -67,19 +61,20 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
type="submit"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Saving
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Saving
</span>
</button>
</div>
@@ -95,19 +90,20 @@ exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
type="submit"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Saving Config...
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Saving Config...
</span>
</button>
</div>
webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
+111 -74
View File
@@ -30,27 +30,34 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -88,27 +95,34 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -169,27 +183,34 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
</label>
</div>
</div>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -227,27 +248,34 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
CustomText
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -285,13 +313,22 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
<div
role="alert"
/>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
<div
class="setting-list-item__buttons"
>
Cancel
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+245 -108
View File
@@ -39,7 +39,9 @@ exports[`components/SettingItemMin should match snapshot with active Save button
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -50,27 +52,42 @@ exports[`components/SettingItemMin should match snapshot with active Save button
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
tabindex="0"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -107,7 +124,9 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -118,27 +137,42 @@ exports[`components/SettingItemMin should match snapshot with removeSrc state ac
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
tabindex="0"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -185,7 +219,9 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -197,39 +233,55 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
disabled=""
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Uploading..."
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Uploading...
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -283,7 +335,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -294,28 +348,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -362,7 +431,9 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -373,28 +444,43 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -448,7 +534,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -459,28 +547,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -551,7 +654,9 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -562,28 +667,43 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -654,7 +774,9 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
class="setting-list-item"
>
<hr />
<span>
<div
class="setting-list-item__buttons"
>
<input
accept=".jpeg,.jpg,.png,.bmp"
aria-hidden="true"
@@ -665,28 +787,43 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
/>
<button
aria-label="Select"
class="btn btn-primary btn-file"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47 btn-file"
data-testid="inputSettingPictureButton"
type="button"
>
Select
<span
class="_button__label_doayp_24"
>
Select
</span>
</button>
<button
aria-label="Save"
class="btn btn-primary"
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSettingPicture"
disabled=""
tabindex="-1"
type="button"
>
Save
<span
class="_button__label_doayp_24"
>
Save
</span>
</button>
</span>
<button
aria-label="Cancel"
class="btn btn-tertiary ml-2"
data-testid="cancelSettingPicture"
>
Cancel
</button>
<button
aria-label="Cancel"
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelSettingPicture"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
+12 -11
View File
@@ -43,19 +43,20 @@ exports[`components/SpinnerButton should match snapshot with spinning 1`] = `
type="button"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Test
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Test
</span>
</button>
</div>
webapp/channels/src/components/admin_console/global_attributes/attribute_details/graph/draft_forms.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export const AddTopLevelForm = ({
<Button
type='button'
emphasis={isEmptyCanvas ? 'primary' : 'secondary'}
size={isEmptyCanvas ? 'sm' : 'md'}
size={isEmptyCanvas ? 'small' : 'medium'}
onClick={onCommit}
disabled={!canAdd}
data-testid={`${testIdPrefix}__addButton`}
webapp/channels/src/components/admin_console/license_settings/__snapshots__/license_settings.test.tsx.snap
+85 -74
View File
@@ -945,22 +945,24 @@ exports[`components/admin_console/license_settings/LicenseSettings load screen w
<p>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
disabled=""
type="button"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Upgrading 42%
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Upgrading 42%
</span>
</button>
</p>
@@ -1235,7 +1237,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -1638,15 +1640,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -1917,7 +1920,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -2320,15 +2323,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -2585,7 +2589,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -3004,15 +3008,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -3269,7 +3274,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -3672,15 +3677,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -3937,7 +3943,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -4341,15 +4347,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -4606,7 +4613,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -5015,15 +5022,16 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -5270,7 +5278,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
April 06, 2021
1:10 PM
3:10 PM
</span>
</div>
<div
@@ -5602,15 +5610,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -8415,7 +8424,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -8818,15 +8827,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
@@ -9083,7 +9093,7 @@ exports[`components/admin_console/license_settings/LicenseSettings should match
>
February 04, 2018
3:24 AM
4:24 AM
</span>
</div>
<div
@@ -9486,15 +9496,16 @@ See ENTERPRISE-EDITION-LICENSE.txt in your root install directory for details. S
<div
class="purchase_buttons"
>
<div
class="purchase-card"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
type="button"
>
<button
class="btn btn-primary contact-us"
<span
class="_button__label_doayp_24"
>
Contact Sales
</button>
</div>
</span>
</button>
</div>
</div>
</div>
webapp/channels/src/components/admin_console/license_settings/modals/upload_license_modal.tsx
+8 -5
View File
@@ -248,17 +248,20 @@ const UploadLicenseModal = (props: Props): JSX.Element | null => {
emphasis='primary'
onClick={handleConfirmUpload}
disabled={isLoading}
loading={Boolean(isLoading)}
id='confirm-button'
>
<LoadingWrapper
loading={Boolean(isLoading)}
text={defineMessage({id: 'admin.license.modal.applying', defaultMessage: 'Applying'})}
>
{isLoading ? (
<FormattedMessage
id='admin.license.modal.applying'
defaultMessage='Applying'
/>
) : (
<FormattedMessage
id='admin.license.modal.apply'
defaultMessage='Apply License'
/>
</LoadingWrapper>
)}
</Button>
</div>
</>
webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
+15 -18
View File
@@ -8,7 +8,6 @@ import {buttonClassNames} from '@mattermost/shared/components/button';
import SetupSystemSvg from 'components/common/svg_images_components/setup_system_svg';
import ExternalLink from 'components/external_link';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
import {LicenseLinks} from 'utils/constants';
import {format} from 'utils/markdown';
@@ -83,22 +82,20 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
type='button'
onClick={onHandleUpgrade}
emphasis='primary'
loading={upgradingPercentage > 0}
>
<LoadingWrapper
loading={upgradingPercentage > 0}
text={
<FormattedMessage
id='admin.license.enterprise.upgrading'
defaultMessage='Upgrading {percentage}%'
values={{percentage: upgradingPercentage}}
/>
}
>
{upgradingPercentage > 0 ? (
<FormattedMessage
id='admin.license.enterprise.upgrading'
defaultMessage='Upgrading {percentage}%'
values={{percentage: upgradingPercentage}}
/>
) : (
<FormattedMessage
id='admin.license.enterprise.upgrade'
defaultMessage='Upgrade to Enterprise Edition'
/>
</LoadingWrapper>
)}
</Button>
</p>
<p className='upgrade-legal-terms'>
@@ -151,19 +148,19 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
type='button'
onClick={handleRestart}
emphasis='primary'
loading={restarting}
>
<LoadingWrapper
loading={restarting}
text={intl.formatMessage({
{restarting ? (
intl.formatMessage({
id: 'admin.licenseSettings.teamEdition.teamEditionRightPanel.restarting',
defaultMessage: 'Restarting',
})}
>
})
) : (
<FormattedMessage
id='admin.licenseSettings.teamEdition.teamEditionRightPanel.restart'
defaultMessage='Restart Server'
/>
</LoadingWrapper>
)}
</Button>
</p>
{restartError && (
webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
+7 -7
View File
@@ -13,7 +13,6 @@ import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';
import AlertBanner from 'components/alert_banner';
import withOpenStartTrialFormModal from 'components/common/hocs/cloud/with_open_start_trial_form_modal';
import ExternalLink from 'components/external_link';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
import {AboutLinks, LicenseLinks, Preferences, Unique} from 'utils/constants';
import {format} from 'utils/markdown';
@@ -305,10 +304,10 @@ const TrialBanner = ({
type='button'
onClick={onHandleUpgrade}
emphasis='primary'
loading={upgradingPercentage > 0}
>
<LoadingWrapper
loading={upgradingPercentage > 0}
text={upgradingPercentage === 100 && restarting ? (
{upgradingPercentage > 0 ? (
upgradingPercentage === 100 && restarting ? (
<FormattedMessage
id='admin.license.enterprise.restarting'
defaultMessage='Restarting'
@@ -318,13 +317,14 @@ const TrialBanner = ({
id='admin.license.enterprise.upgrading'
defaultMessage='Upgrading {percentage}%'
values={{percentage: upgradingPercentage}}
/>)}
>
/>
)
) : (
<FormattedMessage
id='admin.license.trialUpgradeAndRequest.submit'
defaultMessage='Upgrade Server And Start trial'
/>
</LoadingWrapper>
)}
</Button>
);
webapp/channels/src/components/admin_console/request_button/request_button.tsx
+10 -15
View File
@@ -10,7 +10,6 @@ import {Button, type ButtonEmphasis} from '@mattermost/compass-ui/components/but
import SuccessIcon from 'components/widgets/icons/fa_success_icon';
import WarningIcon from 'components/widgets/icons/fa_warning_icon';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
/**
* A button which, when clicked, performs an action and displays
@@ -249,21 +248,17 @@ export default class RequestButton extends React.PureComponent<Props, State> {
emphasis={this.props.buttonEmphasis || 'tertiary'}
onClick={this.handleRequest}
disabled={this.props.disabled}
loading={this.state.busy}
>
<LoadingWrapper
loading={this.state.busy}
text={
this.props.loadingText ||
(
<FormattedMessage
id={'admin.requestButton.loading'}
defaultMessage={'Loading...'}
/>
)
}
>
{this.props.buttonText}
</LoadingWrapper>
{this.state.busy ? (
this.props.loadingText ||
(
<FormattedMessage
id={'admin.requestButton.loading'}
defaultMessage={'Loading...'}
/>
)
) : this.props.buttonText}
</Button>
{this.props.alternativeActionElement}
{message}
webapp/channels/src/components/integrations/edit_incoming_webhook/__snapshots__/edit_incoming_webhook.test.tsx.snap
+24 -22
View File
@@ -189,19 +189,20 @@ exports[`components/integrations/EditIncomingWebhook should have called submitHo
type="submit"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Updating...
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Updating...
</span>
</button>
</div>
@@ -400,19 +401,20 @@ exports[`components/integrations/EditIncomingWebhook should have called submitHo
type="submit"
>
<span
class="_button__label_doayp_24"
aria-hidden="true"
class="_button__icon-slot_doayp_27"
>
<span
class="LoadingSpinner with-text"
data-testid="loadingSpinner"
id="loadingSpinner"
>
<span
class="fa fa-spinner fa-fw fa-pulse spinner"
title="Loading Icon"
/>
Updating...
</span>
aria-label="Loading"
class="_spinner_3elm7_10"
role="status"
style="width: 16px; height: 16px; --spinner-stroke-width: 2px;"
/>
</span>
<span
class="_button__label_doayp_24"
>
Updating...
</span>
</button>
</div>
webapp/channels/src/components/save_button.tsx
+2 -8
View File
@@ -7,8 +7,6 @@ import {FormattedMessage} from 'react-intl';
import {Button} from '@mattermost/compass-ui/components/button';
import type {ButtonEmphasis, ButtonSize as CompassButtonSize} from '@mattermost/compass-ui/components/button';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
type SharedSize = 'xs' | 'sm' | 'md' | 'lg';
type SharedVariant = '' | 'destructive' | 'inverted';
@@ -72,14 +70,10 @@ const SaveButton: React.FC<Props> = ({
destructive={variant === 'destructive'}
appearance={variant === 'inverted' ? 'inverted' : undefined}
className={extraClasses}
loading={saving}
{...props}
>
<LoadingWrapper
loading={saving}
text={savingMessage}
>
<span>{defaultMessage}</span>
</LoadingWrapper>
{saving ? savingMessage : defaultMessage}
</Button>
);
};
webapp/channels/src/components/setting_item_max.tsx
+14 -10
View File
@@ -6,7 +6,8 @@ import React, {useCallback, useEffect, useRef} from 'react';
import type {JSX, ReactNode} from 'react';
import {FormattedMessage} from 'react-intl';
import {Button, type ButtonVariant} from '@mattermost/shared/components/button';
import {Button} from '@mattermost/compass-ui/components/button';
import type {ButtonVariant} from '@mattermost/shared/components/button';
import SaveButton from 'components/save_button';
@@ -98,6 +99,7 @@ const SettingItemMax = ({
target.parentElement &&
target.parentElement.className !== 'react-select__input' &&
!target.classList.contains('btn-tertiary') &&
target.id !== 'cancelSetting' &&
settingList.current &&
settingList.current.contains(target)) {
handleSubmit(e);
@@ -257,15 +259,17 @@ const SettingItemMax = ({
>
{serverError}
</div>
{submit}
<Button
id='cancelSetting'
data-testid='cancelButton'
emphasis='tertiary'
onClick={handleUpdateSection}
>
{cancelButtonText}
</Button>
<div className='setting-list-item__buttons'>
{submit}
<Button
id='cancelSetting'
data-testid='cancelButton'
emphasis='tertiary'
onClick={handleUpdateSection}
>
{cancelButtonText}
</Button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/setting_picture.tsx
+26 -23
View File
@@ -3,13 +3,12 @@
import React, {Component, createRef} from 'react';
import type {ChangeEvent, CSSProperties, MouseEvent, ReactNode, RefObject} from 'react';
import {defineMessage, FormattedMessage} from 'react-intl';
import {FormattedMessage} from 'react-intl';
import {Button} from '@mattermost/shared/components/button';
import {Button} from '@mattermost/compass-ui/components/button';
import {WithTooltip} from '@mattermost/shared/components/tooltip';
import FormError from 'components/form_error';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
import {Constants} from 'utils/constants';
import * as FileUtils from 'utils/file_utils';
@@ -269,7 +268,7 @@ export default class SettingPicture extends Component<Props, State> {
let buttonRender;
if (this.props.onSubmit) {
buttonRender = (
<span>
<>
<input
data-testid='uploadPicture'
ref={this.selectInput}
@@ -301,19 +300,22 @@ export default class SettingPicture extends Component<Props, State> {
ref={this.confirmButton}
emphasis='primary'
onClick={this.handleSave}
loading={this.props.loadingPicture}
aria-label={this.props.loadingPicture ? localizeMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'}) : localizeMessage({id: 'setting_picture.save', defaultMessage: 'Save'})}
>
<LoadingWrapper
loading={this.props.loadingPicture}
text={defineMessage({id: 'setting_picture.uploading', defaultMessage: 'Uploading...'})}
>
{this.props.loadingPicture ? (
<FormattedMessage
id='setting_picture.uploading'
defaultMessage='Uploading...'
/>
) : (
<FormattedMessage
id='setting_picture.save'
defaultMessage='Save'
/>
</LoadingWrapper>
)}
</Button>
</span>
</>
);
}
return (
@@ -344,19 +346,20 @@ export default class SettingPicture extends Component<Props, State> {
errors={[this.props.clientError, this.props.serverError]}
type={'modal'}
/>
{buttonRender}
<Button
data-testid='cancelSettingPicture'
emphasis='tertiary'
className='ml-2'
onClick={this.handleCancel}
aria-label={localizeMessage({id: 'setting_picture.cancel', defaultMessage: 'Cancel'})}
>
<FormattedMessage
id='setting_picture.cancel'
defaultMessage='Cancel'
/>
</Button>
<div className='setting-list-item__buttons'>
{buttonRender}
<Button
data-testid='cancelSettingPicture'
emphasis='tertiary'
onClick={this.handleCancel}
aria-label={localizeMessage({id: 'setting_picture.cancel', defaultMessage: 'Cancel'})}
>
<FormattedMessage
id='setting_picture.cancel'
defaultMessage='Cancel'
/>
</Button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/spinner_button.tsx
+11 -8
View File
@@ -3,13 +3,12 @@
import React from 'react';
import type {ButtonHTMLAttributes, ReactNode} from 'react';
import {FormattedMessage} from 'react-intl';
import type {MessageDescriptor} from 'react-intl';
import {Button} from '@mattermost/compass-ui/components/button';
import type {ButtonEmphasis, ButtonSize as CompassButtonSize} from '@mattermost/compass-ui/components/button';
import LoadingWrapper from 'components/widgets/loading/loading_wrapper';
type SharedSize = 'xs' | 'sm' | 'md' | 'lg';
const SHARED_TO_COMPASS_SIZE: Record<SharedSize, CompassButtonSize> = {
@@ -38,6 +37,14 @@ function mapSize(size?: SharedSize | CompassButtonSize): CompassButtonSize | und
return size as CompassButtonSize;
}
function isMessageDescriptor(text: ReactNode | MessageDescriptor): text is MessageDescriptor {
return typeof text === 'object' && text !== null && 'id' in text && 'defaultMessage' in text;
}
function renderSpinningText(text: ReactNode | MessageDescriptor): ReactNode {
return isMessageDescriptor(text) ? <FormattedMessage {...text}/> : text;
}
const SpinnerButton = ({
spinning = false,
spinningText,
@@ -49,15 +56,11 @@ const SpinnerButton = ({
return (
<Button
disabled={disabled || spinning}
loading={spinning}
size={mapSize(size)}
{...otherProps}
>
<LoadingWrapper
loading={spinning}
text={spinningText}
>
{children}
</LoadingWrapper>
{spinning ? renderSpinningText(spinningText) : children}
</Button>
);
};
webapp/channels/src/components/user_settings/advanced/join_leave_section/__snapshots__/join_leave_section.test.tsx.snap
+24 -17
View File
@@ -112,27 +112,34 @@ exports[`components/user_settings/advanced/JoinLeaveSection should match snapsho
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
+144 -102
View File
@@ -454,27 +454,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1020,27 +1027,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -1360,27 +1374,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -2152,27 +2173,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -3742,27 +3770,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -4431,27 +4466,34 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/display/render_emoticons_as_emoji/__snapshots__/render_emoticons_as_emoji.test.tsx.snap
+24 -17
View File
@@ -71,27 +71,34 @@ exports[`components/user_settings/display/render_emoticons_as_emoji/render_emoti
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/notifications/desktop_and_mobile_notification_setting/__snapshots__/index.test.tsx.snap
+48 -34
View File
@@ -166,27 +166,34 @@ exports[`DesktopNotificationSettings should match snapshot, on max setting 1`] =
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -389,27 +396,34 @@ exports[`DesktopNotificationSettings should not show desktop thread notification
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
+135 -91
View File
@@ -68,27 +68,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -314,27 +321,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -376,13 +390,22 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
<div
role="alert"
/>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
<div
class="setting-list-item__buttons"
>
Cancel
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -481,27 +504,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
</label>
</div>
</div>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -593,27 +623,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -689,27 +726,34 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+48 -34
View File
@@ -47,27 +47,34 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -141,27 +148,34 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
<div
role="alert"
/>
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
<div
class="setting-list-item__buttons"
>
<span
class="_button__label_doayp_24"
<button
class="_button_doayp_2 _button--emphasis-primary_doayp_61 _button--size-medium_doayp_47"
data-testid="saveSetting"
id="saveSetting"
type="submit"
>
<span>
<span
class="_button__label_doayp_24"
>
Save
</span>
</span>
</button>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
>
Cancel
</button>
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
+8 -8
View File
@@ -83,9 +83,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="passwordDesc"
>
Last updated
Feb 13, 2009
Feb 14, 2009
at
11:31 PM
12:31 AM
</div>
</div>
<div
@@ -254,9 +254,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="passwordDesc"
>
Last updated
Feb 13, 2009
Feb 14, 2009
at
11:31 PM
12:31 AM
</div>
</div>
<div
@@ -425,9 +425,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="passwordDesc"
>
Last updated
Feb 13, 2009
Feb 14, 2009
at
11:31 PM
12:31 AM
</div>
</div>
<div
@@ -596,9 +596,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
id="passwordDesc"
>
Last updated
Feb 13, 2009
Feb 14, 2009
at
11:31 PM
12:31 AM
</div>
</div>
<div
webapp/channels/src/components/user_settings/security/mfa_section/__snapshots__/mfa_section.test.tsx.snap
+45 -18
View File
@@ -125,13 +125,22 @@ exports[`MfaSection rendering when section is expanded and MFA is active and enf
<div
role="alert"
/>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
<div
class="setting-list-item__buttons"
>
Cancel
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -184,13 +193,22 @@ exports[`MfaSection rendering when section is expanded and MFA is active but not
<div
role="alert"
/>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
<div
class="setting-list-item__buttons"
>
Cancel
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
@@ -243,13 +261,22 @@ exports[`MfaSection rendering when section is expanded and MFA is not active 1`]
<div
role="alert"
/>
<button
class="btn btn-tertiary"
data-testid="cancelButton"
id="cancelSetting"
<div
class="setting-list-item__buttons"
>
Cancel
</button>
<button
class="_button_doayp_2 _button--emphasis-tertiary_doayp_91 _button--size-medium_doayp_47"
data-testid="cancelButton"
id="cancelSetting"
type="button"
>
<span
class="_button__label_doayp_24"
>
Cancel
</span>
</button>
</div>
</div>
</div>
</div>
webapp/channels/src/sass/components/_save-button.scss
+6
View File
@@ -3,3 +3,9 @@
margin-right: 10px;
}
}
.setting-list-item__buttons {
display: flex;
align-items: center;
gap: var(--spacing-s, 8px);
}