Improvement on Section Notice (#28859)

* Improvement on Section Notice

* Address feedback

webapp/channels/src/components/section_notice/index.test.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 import {renderWithContext} from 'tests/react_testing_utils';
 
-import SectionNotice from './section_notice';
+import SectionNotice from '.';
 
 type Props = ComponentProps<typeof SectionNotice>;
 

webapp/channels/src/components/section_notice/index.tsx

@@ -7,25 +7,25 @@ import {useIntl} from 'react-intl';
 
 import Markdown from 'components/markdown';
 
+import SectionNoticeButton from './section_notice_button';
+import type {SectionNoticeButtonProp} from './types';
+
 import './section_notice.scss';
 
-type Button = {
-    onClick: () => void;
-    text: string;
-}
 type Props = {
     title: string | React.ReactElement;
     text?: string;
-    primaryButton?: Button;
+    primaryButton?: SectionNoticeButtonProp;
-    secondaryButton?: Button;
+    secondaryButton?: SectionNoticeButtonProp;
-    linkButton?: Button;
+    linkButton?: SectionNoticeButtonProp;
-    type?: 'info' | 'success' | 'danger' | 'welcome' | 'warning';
+    type?: 'info' | 'success' | 'danger' | 'welcome' | 'warning' | 'hint';
     isDismissable?: boolean;
     onDismissClick?: () => void;
 };
 
 const iconByType = {
     info: 'icon-information-outline',
+    hint: 'icon-lightbulb-outline',
     success: 'icon-check',
     danger: 'icon-alert-outline',
     warning: 'icon-alert-outline',
@@ -45,7 +45,7 @@ const SectionNotice = ({
     const intl = useIntl();
     const icon = iconByType[type];
     const showDismiss = Boolean(isDismissable && onDismissClick);
-    const buttonClass = 'btn btn-sm sectionNoticeButton';
+    const hasButtons = Boolean(primaryButton || secondaryButton || linkButton);
     return (
         <div className={classNames('sectionNoticeContainer', type)}>
             <div className={'sectionNoticeContent'}>
@@ -53,32 +53,26 @@ const SectionNotice = ({
                 <div className='sectionNoticeBody'>
                     <h4 className={classNames('sectionNoticeTitle', {welcome: type === 'welcome', noText: !text})}>{title}</h4>
                     {text && <Markdown message={text}/>}
-                    {(primaryButton || secondaryButton || linkButton) && (
+                    {hasButtons && (
                         <div className='sectionNoticeActions'>
-                            {primaryButton && (
+                            {primaryButton &&
-                                <button
+                                <SectionNoticeButton
-                                    onClick={primaryButton.onClick}
+                                    button={primaryButton}
-                                    className={classNames(buttonClass, 'btn-primary')}
+                                    buttonClass='btn-primary'
-                                >
+                                />
-                                    {primaryButton.text}
+                            }
-                                </button>
+                            {secondaryButton &&
-                            )}
+                                <SectionNoticeButton
-                            {secondaryButton && (
+                                    button={secondaryButton}
-                                <button
+                                    buttonClass='btn-tertiary'
-                                    onClick={secondaryButton.onClick}
+                                />
-                                    className={classNames(buttonClass, 'btn-secondary')}
+                            }
-                                >
+                            {linkButton &&
-                                    {secondaryButton.text}
+                                <SectionNoticeButton
-                                </button>
+                                    button={linkButton}
-                            )}
+                                    buttonClass='btn-link'
-                            {linkButton && (
+                                />
-                                <button
+                            }
-                                    onClick={linkButton.onClick}
-                                    className={classNames(buttonClass, 'btn-link')}
-                                >
-                                    {linkButton.text}
-                                </button>
-                            )}
                         </div>
                     )}
                 </div>

webapp/channels/src/components/section_notice/section_notice.scss

@@ -8,7 +8,7 @@
         margin: 0;
     }
 
-    &.info {
+    &.info, &.hint {
         border-color: rgba(var(--sidebar-text-active-border-rgb), 0.16);
         background: rgba(var(--sidebar-text-active-border-rgb), 0.08);
 
@@ -76,7 +76,7 @@
 .sectionNoticeIcon {
     font-size: 20px;
 
-    &.info {
+    &.info, &.hint {
         color: var(--sidebar-text-active-border);
     }
 

webapp/channels/src/components/section_notice/section_notice_button.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import classNames from 'classnames';
+import React from 'react';
+
+import type {SectionNoticeButtonProp} from './types';
+
+type Props = {
+    button: SectionNoticeButtonProp;
+    buttonClass: 'btn-primary' | 'btn-tertiary' | 'btn-link';
+}
+
+const SectionNoticeButton = ({
+    button,
+    buttonClass,
+}: Props) => {
+    const leading = button.leadingIcon ? (<i className={classNames('icon', button.leadingIcon)}/>) : null;
+    const trailing = button.trailingIcon ? (<i className={classNames('icon', button.trailingIcon)}/>) : null;
+    return (
+        <button
+            onClick={button.onClick}
+            className={classNames('btn btn-sm sectionNoticeButton', buttonClass)}
+        >
+            {button.loading && (<i className='icon fa fa-pulse fa-spinner'/>)}
+            {leading}
+            {button.text}
+            {trailing}
+        </button>
+    );
+};
+
+export default SectionNoticeButton;

webapp/channels/src/components/section_notice/types.ts

@@ -0,0 +1,10 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export type SectionNoticeButtonProp = {
+    onClick: () => void;
+    text: string;
+    trailingIcon?: string;
+    leadingIcon?: string;
+    loading?: boolean;
+}