Merge pull request #2659 from devtron-labs/feat/info-bar-replacement

feat: Info bar replacement

Author: shivani170

.eslintignore

@@ -384,7 +384,6 @@ src/components/v2/values/chartValuesDiff/ProjectUpdateModal.tsx
 src/components/v2/values/common/chartValues.api.ts
 src/components/workflowEditor/CDSuccessModal.tsx
 src/components/workflowEditor/CreateWorkflow.tsx
-src/components/workflowEditor/DeprecatedPipelineWarning.tsx
 src/components/workflowEditor/DeprecatedWarningModal.tsx
 src/components/workflowEditor/EmptyWorkflow.tsx
 src/components/workflowEditor/NoGitOpsConfiguredWarning.tsx

package.json

@@ -4,7 +4,7 @@
     "private": true,
     "homepage": "/dashboard",
     "dependencies": {
-        "@devtron-labs/devtron-fe-common-lib": "1.11.0-pre-8",
+        "@devtron-labs/devtron-fe-common-lib": "1.11.0-pre-9",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rjsf/core": "^5.13.3",
         "@rjsf/utils": "^5.13.3",

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/GUIView/GUIView.component.tsx

@@ -24,7 +24,6 @@ import {
     GenericEmptyState,
     GUIViewError,
     HIDE_SUBMIT_BUTTON_UI_SCHEMA,
-    InfoColourBar,
     joinObjects,
     OverrideMergeStrategyType,
     RJSFForm,
@@ -33,14 +32,13 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as ICArrow } from '@Icons/ic-arrow-forward.svg'
-import { ReactComponent as Help } from '@Icons/ic-help.svg'
 import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import EmptyFolderImage from '@Images/empty-folder.webp'
 import { importComponentFromFELibrary } from '@Components/common'
 
 import { DEPLOYMENT_TEMPLATE_LABELS_KEYS, GUI_VIEW_TEXTS } from '../constants'
 import { GUIViewProps, GUIViewState } from './types'
-import { getRenderActionButton } from './utils'
+import { GUIInfoBlock } from './utils'
 
 const makeObjectFromJsonPathArray = importComponentFromFELibrary('makeObjectFromJsonPathArray', null, 'function')
 const ConfigurableGUIViewPanel = importComponentFromFELibrary('ConfigurableGUIViewPanel', null, 'function')
@@ -234,15 +232,7 @@ const GUIView = ({
                 )}
             </div>
 
-            {!state.error && (
-                <InfoColourBar
-                    message="To modify additional configurations"
-                    classname="dc__content-start ev-2 bw-1 dc__no-border-radius dc__no-bottom-border dc__no-left-border dc__no-right-border bcv-1 bcv-1 w-100 lh-20"
-                    Icon={Help}
-                    iconClass="fcv-5 icon-dim-20 dc__no-shrink"
-                    renderActionButton={getRenderActionButton({ handleChangeToYAMLMode })}
-                />
-            )}
+            {!state.error && <GUIInfoBlock handleChangeToYAMLMode={handleChangeToYAMLMode} />}
         </>
     )
 }

src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/DeploymentTemplate/GUIView/utils.tsx

@@ -14,17 +14,40 @@
  * limitations under the License.
  */
 
+import { InfoBlock } from '@devtron-labs/devtron-fe-common-lib'
+
 import { GUIViewProps } from './types'
 
-export const getRenderActionButton =
+const renderGUIText =
     ({ handleChangeToYAMLMode }: Pick<GUIViewProps, 'handleChangeToYAMLMode'>) =>
     () => (
-        <button
-            type="button"
-            className="dc__unset-button-styles"
-            onClick={handleChangeToYAMLMode}
-            data-testid="base-deployment-template-switchtoadvanced-button"
-        >
-            <span className="cb-5 cursor fw-6">Switch to Advanced</span>
-        </button>
+        <div className="flex left dc__gap-6">
+            <span> To modify additional configurations</span>
+            <button
+                type="button"
+                className="dc__unset-button-styles"
+                onClick={handleChangeToYAMLMode}
+                data-testid="base-deployment-template-switchtoadvanced-button"
+            >
+                <span className="cb-5 cursor fw-6">Switch to Advanced</span>
+            </button>
+        </div>
     )
+
+export const GUIInfoBlock = ({ handleChangeToYAMLMode }: Pick<GUIViewProps, 'handleChangeToYAMLMode'>) => (
+    <InfoBlock
+        variant="help"
+        description={renderGUIText({ handleChangeToYAMLMode })()}
+        borderConfig={{
+            left: false,
+            right: false,
+            top: false,
+        }}
+        borderRadiusConfig={{
+            left: false,
+            right: false,
+            top: false,
+            bottom: false,
+        }}
+    />
+)

src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvironmentOverrideRouter.tsx

@@ -22,7 +22,7 @@ import {
     DeleteConfirmationModal,
     EnvResourceType,
     getEnvironmentListMinPublic,
-    InfoColourBar,
+    InfoBlock,
     PopupMenu,
     Progressing,
     SelectPicker,
@@ -35,7 +35,6 @@ import { ReactComponent as ICStamp } from '@Icons/ic-stamp.svg'
 
 import { ReactComponent as Add } from '../../../../../../assets/icons/ic-add.svg'
 import { ReactComponent as DeleteIcon } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as Help } from '../../../../../../assets/icons/ic-help.svg'
 import { ReactComponent as More } from '../../../../../../assets/icons/ic-more-option.svg'
 import warn from '../../../../../../assets/icons/ic-warning.svg'
 import { createClusterEnvGroup, usePrevious } from '../../../../../../components/common'
@@ -336,15 +335,7 @@ const EnvironmentOverrideRouter = ({
             )
         }
         if (!isJobView) {
-            return (
-                <InfoColourBar
-                    classname="question-bar no-env-overrides"
-                    message={<EnvOverridesHelpNote />}
-                    Icon={Help}
-                    iconClass="fcv-5"
-                    iconSize={16}
-                />
-            )
+            return <InfoBlock variant="help" description={<EnvOverridesHelpNote />} />
         }
         return null
     }

src/Pages/GlobalConfigurations/Authorization/APITokens/EditAPIToken.tsx

@@ -20,10 +20,12 @@ import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
 import moment from 'moment'
 
 import {
+    ButtonStyleType,
+    ButtonVariantType,
     ButtonWithLoader,
     ClipboardButton,
     CustomInput,
-    InfoColourBar,
+    InfoBlock,
     noop,
     Progressing,
     showError,
@@ -34,7 +36,6 @@ import {
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Delete } from '../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as InfoIcon } from '../../../../assets/icons/info-filled.svg'
 import { importComponentFromFELibrary } from '../../../../components/common'
 import { MomentDateFormat } from '../../../../config'
 import { API_COMPONENTS } from '../../../../config/constantMessaging'
@@ -90,21 +91,9 @@ const EditAPIToken = ({
     const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
     const [invalidDescription, setInvalidDescription] = useState(false)
 
-    const renderActionButton = () => (
-        <span className="cr-5 cursor flexbox top fw-6" onClick={() => setShowRegeneratedModal(true)}>
-            Regenerate token
-        </span>
-    )
-
-    const renderRegenerateInfoBar = () => (
-        <InfoColourBar
-            message="To set a new expiration date, you can regenerate this token. Any scripts or applications using this token will need to be updated."
-            classname="info_bar"
-            Icon={InfoIcon}
-            iconClass="icon-dim-20"
-            renderActionButton={renderActionButton}
-        />
-    )
+    const onClickShowRegenerateModal = () => {
+        setShowRegeneratedModal(true)
+    }
 
     const redirectToTokenList = () => {
         history.push(`${match.path.split('edit')[0]}list`)
@@ -181,24 +170,38 @@ const EditAPIToken = ({
     const getExpirationText = () => {
         if (isTokenExpired(editData.expireAtInMs)) {
             return (
-                <span className="cr-5">
+                <span className="cr-5 fw-6">
                     This token expired on&nbsp;
                     {moment(editData.expireAtInMs).format(MomentDateFormat)}.
                 </span>
             )
         }
         if (editData.expireAtInMs === 0) {
-            return <span>This token has no expiration date.</span>
+            return <span className="fw-6">This token has no expiration date.</span>
         }
 
         return (
-            <span>
+            <span className="fw-6">
                 This token expires on&nbsp;
                 {moment(editData.expireAtInMs).format(MomentDateFormat)}.
             </span>
         )
     }
 
+    const renderRegenerateInfoBar = () => (
+        <InfoBlock
+            heading={getExpirationText()}
+            description="Regenerate this token to set a new expiration date. Any scripts or applications using this token will need to be updated."
+            buttonProps={{
+                dataTestId: 'regenerate-token-button',
+                text: 'Regenerate token',
+                onClick: onClickShowRegenerateModal,
+                variant: ButtonVariantType.text,
+                style: ButtonStyleType.negative,
+            }}
+        />
+    )
+
     if (isLoading || !editData) {
         return <Progressing pageLoader />
     }
@@ -259,17 +262,6 @@ const EditAPIToken = ({
                             </div>
                         </div>
                     </label>
-                    <label className="form__row">
-                        <span className="form__label">Expiration</span>
-                        <div className="dc__align-left">
-                            {getExpirationText()}
-                            &nbsp;
-                            <span className="fw-4">To set a new expiration date you must</span>&nbsp;
-                            <span className="cb-5 cursor" onClick={() => setShowRegeneratedModal(true)}>
-                                regenerate the token.
-                            </span>
-                        </div>
-                    </label>
                     <div className="dc__border-top" />
                     <PermissionConfigurationForm showUserPermissionGroupSelector isAddMode={false} />
                 </div>

src/Pages/GlobalConfigurations/Authorization/APITokens/ExpirationDate.tsx

@@ -17,9 +17,8 @@
 /* eslint-disable react/prop-types */
 import moment from 'moment'
 
-import { InfoColourBar, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoBlock, SelectPicker } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
 import { SingleDatePickerComponent } from '../../../../components/common'
 import { MomentDateFormat } from '../../../../config'
 import { getDateInMilliseconds, getOptions } from './apiToken.utils'
@@ -61,11 +60,9 @@ const ExpirationDate = ({ selectedExpirationDate, onChangeSelectFormData, handle
         </div>
         {selectedExpirationDate.label === 'No expiration' && (
             <div className="mt-16">
-                <InfoColourBar
-                    classname="warn"
-                    Icon={Warn}
-                    message="Devtron strongly recommends that you set an expiration date for your token to help keep your information secure."
-                    iconClass="warning-icon"
+                <InfoBlock
+                    variant="warning"
+                    description="Devtron strongly recommends that you set an expiration date for your token to help keep your information secure."
                 />
             </div>
         )}

src/Pages/GlobalConfigurations/Authorization/APITokens/RegenerateModal.tsx

@@ -16,7 +16,7 @@
 
 import { useState } from 'react'
 
-import { InfoColourBar, Progressing, showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
+import { InfoBlock, Progressing, showError, VisibleModal } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg'
 import { ReactComponent as Warn } from '../../../../assets/icons/ic-warning.svg'
@@ -122,11 +122,9 @@ const RegeneratedModal = ({
             <div className="modal__body w-600 flex column pt-0 pr-0 pl-0 pb-16">
                 {renderModalHeader()}
                 <div className="p-20 w-100">
-                    <InfoColourBar
-                        message="Submitting this form will generate a new token. Be aware that any scripts or applications using the current token will need to be updated."
-                        classname="warn"
-                        Icon={Warn}
-                        iconClass="warning-icon"
+                    <InfoBlock
+                        variant="warning"
+                        description="Submitting this form will generate a new token. Be aware that any scripts or applications using the current token will need to be updated."
                     />
                     <div className="mt-20 mb-20">
                         <ExpirationDate

src/Pages/GlobalConfigurations/Authorization/SSOLoginServices/SSOLogin.component.tsx

@@ -39,7 +39,7 @@ import {
     DEFAULT_SECRET_PLACEHOLDER,
     ErrorScreenManager,
     FeatureTitleWithInfo,
-    InfoColourBar,
+    InfoBlock,
     isCodeMirrorEnabled,
     MODES,
     noop,
@@ -51,7 +51,6 @@ import {
     YAMLStringify,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as Help } from '@Icons/ic-help.svg'
 import { ReactComponent as InfoIcon } from '@Icons/ic-info-warn.svg'
 import Check from '@Icons/ic-selected-corner.png'
 import { ReactComponent as UsersIcon } from '@Icons/ic-users.svg'
@@ -809,14 +808,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                         />
                     ))}
                 </div>
-                <div className="flex-grow-1 w-100">
-                    <InfoColourBar
-                        message={renderInfoText()}
-                        classname="question-bar w-100 dc__mw-600"
-                        iconClass="icon-dim-20 fcv-5"
-                        Icon={Help}
-                    />
-                </div>
+                <InfoBlock variant="help" description={renderInfoText()} />
                 <div className="flex-grow-1 w-100">
                     <CustomInput
                         value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}

src/Pages/GlobalConfigurations/Authorization/Shared/components/K8sObjectPermissions/K8sListItemCard.tsx

@@ -26,7 +26,7 @@ import {
     ComponentSizeType,
     EntityTypes,
     GVKType,
-    InfoColourBar,
+    InfoBlock,
     OptionType,
     ResourceListPayloadType,
     SelectPicker,
@@ -44,7 +44,6 @@ import {
 
 import { ReactComponent as Clone } from '../../../../../../assets/icons/ic-copy.svg'
 import { ReactComponent as Delete } from '../../../../../../assets/icons/ic-delete-interactive.svg'
-import { ReactComponent as InfoIcon } from '../../../../../../assets/icons/info-filled.svg'
 import {
     convertToOptionsList,
     importComponentFromFELibrary,
@@ -497,12 +496,7 @@ const K8sListItemCard = ({
                         size={ComponentSizeType.large}
                     />
                     {K8S_PERMISSION_INFO_MESSAGE[k8sPermission?.kind?.label] && (
-                        <InfoColourBar
-                            message={K8S_PERMISSION_INFO_MESSAGE[k8sPermission.kind.label]}
-                            classname="info_bar mb-12"
-                            Icon={InfoIcon}
-                            iconClass="icon-dim-20"
-                        />
+                        <InfoBlock description={K8S_PERMISSION_INFO_MESSAGE[k8sPermission.kind.label]} />
                     )}
                     <div className="w-300">
                         <SelectPicker