feat: show initial loading inside app container and animate navbar

.eslintignore

@@ -238,7 +238,6 @@ src/components/common/hooks/__tests__/FileReader.test.tsx
 src/components/common/icons/Icons.tsx
 src/components/common/lineChart/lineChart.tsx
 src/components/common/navigation/Navigation.tsx
-src/components/common/navigation/NavigationRoutes.tsx
 src/components/dockerRegistry/Docker.tsx
 src/components/dockerRegistry/ManageRegistry.tsx
 src/components/dockerRegistry/service.tsx

index.html

@@ -38,6 +38,8 @@
                     display: flex;
                     justify-content: center;
                     align-items: center;
+                    /* cannot use --bg-primary here, so using rgb */
+                    background: rgb(30, 31, 40);
                 "
             >
                 <svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">

src/App.tsx

@@ -178,9 +178,7 @@ const App = () => {
         <div className={customThemeClassName}>
             <Suspense fallback={null}>
                 {validating ? (
-                    <div className="full-height-width">
-                        <DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
-                    </div>
+                    <DevtronProgressing parentClasses="full-height-width flex bg__primary" classes="icon-dim-80" />
                 ) : (
                     renderRoutesWithErrorBoundary()
                 )}

src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx

@@ -94,7 +94,6 @@ const ApplicationInfoForm = ({
                         !isJobView && 'Apps are NOT env specific and can be used to deploy to multiple environments.'
                     }
                     fullWidth
-                    autoFocus
                 />
             </div>
             <Textarea

src/Pages/App/CreateAppModal/ProjectSelector.tsx

@@ -60,6 +60,8 @@
                 value={selectedProject}
                 onChange={handleChange}
                 error={error}
+                autoFocus
+                defaultMenuIsOpen
             />
         </div>
     )

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

@@ -793,7 +793,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
                 <InfoBlock variant="help" description={renderInfoText()} />
                 <div className="flex-grow-1 w-100">
                     <CustomInput
-                        value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}
+                        value={this.state.ssoConfig.url}
                         onChange={this.handleURLChange}
                         name="sso-url"
                         label="URL"

src/components/ApplicationGroup/Details/TriggerView/BulkCDTrigger.tsx

@@ -57,8 +57,6 @@
 } from '@devtron-labs/devtron-fe-common-lib'
 
 import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
-import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
-import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
 import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
 import { ReactComponent as Error } from '@Icons/ic-warning.svg'
 import { getIsMaterialApproved } from '@Components/app/details/triggerView/cdMaterials.utils'
@@ -968,27 +966,25 @@
                         />
                     )}
                     <div className="dc__position-rel tippy-over">
-                        {!isDeployButtonDisabled && isCDStage && !isLoading ? (
-                            <AnimatedDeployButton
-                                onButtonClick={onClickStartDeploy}
-                                isVirtualEnvironment={false}
-                                exceptionUserConfig={{
-                                    canDeploy: canDeployWithoutApproval,
-                                    isImageApprover: canImageApproverDeploy,
-                                }}
-                                isBulkCDTrigger
-                            />
-                        ) : (
-                            <Button
-                                dataTestId="deploy-button"
-                                text={BUTTON_TITLE[stage]}
-                                startIcon={isCDStage ? <DeployIcon /> : <PlayIcon />}
-                                isLoading={isLoading}
-                                size={ComponentSizeType.large}
-                                onClick={onClickStartDeploy}
-                                disabled={isDeployButtonDisabled}
-                            />
-                        )}
+                        <AnimatedDeployButton
+                            dataTestId="cd-trigger-deploy-button"
+                            text={BUTTON_TITLE[stage]}
+                            startIcon={<Icon name={isCDStage ? 'ic-rocket-launch' : 'ic-play-outline'} color={null} />}
+                            onButtonClick={onClickStartDeploy}
+                            disabled={isDeployButtonDisabled}
+                            isLoading={isLoading}
+                            animateStartIcon={isCDStage}
+                            style={
+                                canDeployWithoutApproval || canImageApproverDeploy
+                                    ? ButtonStyleType.warning
+                                    : ButtonStyleType.default
+                            }
+                            tooltipContent={
+                                canDeployWithoutApproval || canImageApproverDeploy
+                                    ? 'You are authorized to deploy as an exception user for some applications'
+                                    : ''
+                            }
+                        />
                     </div>
                 </div>
             </div>

src/components/app/details/triggerView/cdMaterial.tsx

@@ -96,14 +96,10 @@
     useSearchString,
 } from '@devtron-labs/devtron-fe-common-lib'
 
-import { ReactComponent as PlayIC } from '@Icons/ic-play-outline.svg'
-
-import { ReactComponent as BackIcon } from '../../../../assets/icons/ic-arrow-backward.svg'
-import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
-import close from '../../../../assets/icons/ic-close.svg'
-import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
-import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
-import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
+import { ReactComponent as BackIcon } from '@Icons/ic-arrow-backward.svg'
+import { ReactComponent as RefreshIcon } from '@Icons/ic-arrows_clockwise.svg'
+import close from '@Icons/ic-close.svg'
+import { ReactComponent as SearchIcon } from '@Icons/ic-search.svg'
 import noArtifact from '../../../../assets/img/no-artifact.webp'
 import { URLS } from '../../../../config'
 import { EMPTY_STATE_STATUS, TOAST_BUTTON_TEXT_VIEW_DETAILS } from '../../../../config/constantMessaging'
@@ -1693,16 +1689,20 @@
             return null
         }
         if (stageType !== STAGE_TYPE.CD) {
-            return <PlayIC />
+            return <Icon name="ic-play-outline" color={null} />
         }
-        return <DeployIcon />
+        return <Icon name="ic-rocket-launch" color={null} />
     }
 
-    const getDeployButtonStyle = (userActionState: string): ButtonStyleType => {
+    const getDeployButtonStyle = (
+        userActionState: string,
+        canDeployWithoutApproval: boolean,
+        canImageApproverDeploy: boolean,
+    ): ButtonStyleType => {
         if (userActionState === ACTION_STATE.BLOCKED) {
             return ButtonStyleType.negative
         }
-        if (userActionState === ACTION_STATE.PARTIAL) {
+        if (userActionState === ACTION_STATE.PARTIAL || canDeployWithoutApproval || canImageApproverDeploy) {
             return ButtonStyleType.warning
         }
         return ButtonStyleType.default
@@ -1733,35 +1733,32 @@
         const canDeployWithoutApproval = getCanDeployWithoutApproval(state, isExceptionUser)
         const canImageApproverDeploy = getCanImageApproverDeploy(state, canApproverDeploy, isExceptionUser)
 
-        const showAnimatedDeployButton =
-            isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
-
-        if (showAnimatedDeployButton) {
-            return (
-                <AnimatedDeployButton
-                    isLoading={deploymentLoading || isSaveLoading}
-                    onButtonClick={onClickDeploy}
-                    isVirtualEnvironment={isVirtualEnvironment}
-                    exceptionUserConfig={{
-                        canDeploy: canDeployWithoutApproval,
-                        isImageApprover: canImageApproverDeploy,
-                    }}
-                />
-            )
-        }
         return (
-            <Button
+            <AnimatedDeployButton
                 dataTestId="cd-trigger-deploy-button"
-                startIcon={getDeployButtonIcon()}
                 isLoading={deploymentLoading || isSaveLoading}
-                text={`${
-                    userActionState === ACTION_STATE.BLOCKED ? 'Deployment is blocked' : CDButtonLabelMap[stageType]
-                }${isVirtualEnvironment ? ' to isolated env' : ''}`}
-                endIcon={userActionState === ACTION_STATE.BLOCKED ? <InfoOutline /> : null}
-                onClick={(e) => onClickDeploy(e, disableDeployButton)}
-                size={ComponentSizeType.large}
-                style={getDeployButtonStyle(userActionState)}
+                onButtonClick={(e) => onClickDeploy(e, disableDeployButton)}
+                startIcon={getDeployButtonIcon()}
+                text={
+                    canDeployWithoutApproval
+                        ? 'Deploy without approval'
+                        : `${
+                              userActionState === ACTION_STATE.BLOCKED
+                                  ? 'Deployment is blocked'
+                                  : CDButtonLabelMap[stageType]
+                          }${isVirtualEnvironment ? ' to isolated env' : ''}`
+                }
+                endIcon={userActionState === ACTION_STATE.BLOCKED ? <Icon name="ic-info-outline" color={null} /> : null}
+                style={getDeployButtonStyle(userActionState, canDeployWithoutApproval, canImageApproverDeploy)}
                 disabled={disableDeployButton}
+                tooltipContent={
+                    canDeployWithoutApproval || canImageApproverDeploy
+                        ? 'You are authorized to deploy as an exception user'
+                        : ''
+                }
+                animateStartIcon={
+                    isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
+                }
             />
         )
     }

src/components/charts/ChartHeaderFilters.tsx

@@ -250,13 +250,10 @@ const ChartHeaderFilter = ({
                     <div> Show deprecated charts</div>
                 </Checkbox>
                 {ChartCategoryFilters && (
-                    <>
-                        <hr className="mt-8 mb-8" />
-                        <ChartCategoryFilters
-                            selectedCategories={chartCategoryIds}
-                            handleUpdateCategoryFilter={handleUpdateCategoryFilter}
-                        />
-                    </>
+                    <ChartCategoryFilters
+                        selectedCategories={chartCategoryIds}
+                        handleUpdateCategoryFilter={handleUpdateCategoryFilter}
+                    />
                 )}
                 <hr className="mt-8 mb-8" />
                 <Accordian