Skip to content

Commit b9a3487

Browse files
arunjaindevarunjaindev
authored
Merge pull request #2787 from devtron-labs/feat/initial-loading
feat: show initial loading inside app container and animate navbar
2 parents 71757e1 + 3f3cf0e commit b9a3487

File tree

21 files changed

+679
-790
lines changed

21 files changed

+679
-790
lines changed

‎.eslintignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,6 @@ src/components/common/hooks/__tests__/FileReader.test.tsx
238238
src/components/common/icons/Icons.tsx
239239
src/components/common/lineChart/lineChart.tsx
240240
src/components/common/navigation/Navigation.tsx
241-
src/components/common/navigation/NavigationRoutes.tsx
242241
src/components/dockerRegistry/Docker.tsx
243242
src/components/dockerRegistry/ManageRegistry.tsx
244243
src/components/dockerRegistry/service.tsx

‎index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@
3838
display: flex;
3939
justify-content: center;
4040
align-items: center;
41+
/* cannot use --bg-primary here, so using rgb */
42+
background: rgb(30, 31, 40);
4143
"
4244
>
4345
<svg width="80" height="80" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"private": true,
55
"homepage": "/dashboard",
66
"dependencies": {
7-
"@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-2",
7+
"@devtron-labs/devtron-fe-common-lib": "1.16.0-pre-3",
88
"@esbuild-plugins/node-globals-polyfill": "0.2.3",
99
"@rjsf/core": "^5.13.3",
1010
"@rjsf/utils": "^5.13.3",

‎src/App.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -178,9 +178,7 @@ const App = () => {
178178
<div className={customThemeClassName}>
179179
<Suspense fallback={null}>
180180
{validating ? (
181-
<div className="full-height-width">
182-
<DevtronProgressing parentClasses="h-100 flex bg__primary" classes="icon-dim-80" />
183-
</div>
181+
<DevtronProgressing parentClasses="full-height-width flex bg__primary" classes="icon-dim-80" />
184182
) : (
185183
renderRoutesWithErrorBoundary()
186184
)}

‎src/Pages/App/CreateAppModal/ApplicationInfoForm.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ const ApplicationInfoForm = ({
9494
!isJobView && 'Apps are NOT env specific and can be used to deploy to multiple environments.'
9595
}
9696
fullWidth
97-
autoFocus
9897
/>
9998
</div>
10099
<Textarea

‎src/Pages/App/CreateAppModal/ProjectSelector.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ const ProjectSelector = ({ selectedProjectId, handleProjectIdChange, error }: Pr
6060
value={selectedProject}
6161
onChange={handleChange}
6262
error={error}
63+
autoFocus
64+
defaultMenuIsOpen
6365
/>
6466
</div>
6567
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -793,7 +793,7 @@ class SSOLogin extends Component<SSOLoginProps, SSOLoginState> {
793793
<InfoBlock variant="help" description={renderInfoText()} />
794794
<div className="flex-grow-1 w-100">
795795
<CustomInput
796-
value={this.state.ssoConfig.url || window.__ORCHESTRATOR_ROOT__}
796+
value={this.state.ssoConfig.url}
797797
onChange={this.handleURLChange}
798798
name="sso-url"
799799
label="URL"

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

Lines changed: 19 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,6 @@ import {
5757
} from '@devtron-labs/devtron-fe-common-lib'
5858

5959
import { ReactComponent as UnAuthorized } from '@Icons/ic-locked.svg'
60-
import { ReactComponent as DeployIcon } from '@Icons/ic-nav-rocket.svg'
61-
import { ReactComponent as PlayIcon } from '@Icons/ic-play-outline.svg'
6260
import { ReactComponent as Tag } from '@Icons/ic-tag.svg'
6361
import { ReactComponent as Error } from '@Icons/ic-warning.svg'
6462
import { getIsMaterialApproved } from '@Components/app/details/triggerView/cdMaterials.utils'
@@ -968,27 +966,25 @@ const BulkCDTrigger = ({
968966
/>
969967
)}
970968
<div className="dc__position-rel tippy-over">
971-
{!isDeployButtonDisabled && isCDStage && !isLoading ? (
972-
<AnimatedDeployButton
973-
onButtonClick={onClickStartDeploy}
974-
isVirtualEnvironment={false}
975-
exceptionUserConfig={{
976-
canDeploy: canDeployWithoutApproval,
977-
isImageApprover: canImageApproverDeploy,
978-
}}
979-
isBulkCDTrigger
980-
/>
981-
) : (
982-
<Button
983-
dataTestId="deploy-button"
984-
text={BUTTON_TITLE[stage]}
985-
startIcon={isCDStage ? <DeployIcon /> : <PlayIcon />}
986-
isLoading={isLoading}
987-
size={ComponentSizeType.large}
988-
onClick={onClickStartDeploy}
989-
disabled={isDeployButtonDisabled}
990-
/>
991-
)}
969+
<AnimatedDeployButton
970+
dataTestId="cd-trigger-deploy-button"
971+
text={BUTTON_TITLE[stage]}
972+
startIcon={<Icon name={isCDStage ? 'ic-rocket-launch' : 'ic-play-outline'} color={null} />}
973+
onButtonClick={onClickStartDeploy}
974+
disabled={isDeployButtonDisabled}
975+
isLoading={isLoading}
976+
animateStartIcon={isCDStage}
977+
style={
978+
canDeployWithoutApproval || canImageApproverDeploy
979+
? ButtonStyleType.warning
980+
: ButtonStyleType.default
981+
}
982+
tooltipContent={
983+
canDeployWithoutApproval || canImageApproverDeploy
984+
? 'You are authorized to deploy as an exception user for some applications'
985+
: ''
986+
}
987+
/>
992988
</div>
993989
</div>
994990
</div>

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

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -96,14 +96,10 @@ import {
9696
useSearchString,
9797
} from '@devtron-labs/devtron-fe-common-lib'
9898

99-
import { ReactComponent as PlayIC } from '@Icons/ic-play-outline.svg'
100-
101-
import { ReactComponent as BackIcon } from '../../../../assets/icons/ic-arrow-backward.svg'
102-
import { ReactComponent as RefreshIcon } from '../../../../assets/icons/ic-arrows_clockwise.svg'
103-
import close from '../../../../assets/icons/ic-close.svg'
104-
import { ReactComponent as InfoOutline } from '../../../../assets/icons/ic-info-outline.svg'
105-
import { ReactComponent as DeployIcon } from '../../../../assets/icons/ic-nav-rocket.svg'
106-
import { ReactComponent as SearchIcon } from '../../../../assets/icons/ic-search.svg'
99+
import { ReactComponent as BackIcon } from '@Icons/ic-arrow-backward.svg'
100+
import { ReactComponent as RefreshIcon } from '@Icons/ic-arrows_clockwise.svg'
101+
import close from '@Icons/ic-close.svg'
102+
import { ReactComponent as SearchIcon } from '@Icons/ic-search.svg'
107103
import noArtifact from '../../../../assets/img/no-artifact.webp'
108104
import { URLS } from '../../../../config'
109105
import { EMPTY_STATE_STATUS, TOAST_BUTTON_TEXT_VIEW_DETAILS } from '../../../../config/constantMessaging'
@@ -1693,16 +1689,20 @@ const CDMaterial = ({
16931689
return null
16941690
}
16951691
if (stageType !== STAGE_TYPE.CD) {
1696-
return <PlayIC />
1692+
return <Icon name="ic-play-outline" color={null} />
16971693
}
1698-
return <DeployIcon />
1694+
return <Icon name="ic-rocket-launch" color={null} />
16991695
}
17001696

1701-
const getDeployButtonStyle = (userActionState: string): ButtonStyleType => {
1697+
const getDeployButtonStyle = (
1698+
userActionState: string,
1699+
canDeployWithoutApproval: boolean,
1700+
canImageApproverDeploy: boolean,
1701+
): ButtonStyleType => {
17021702
if (userActionState === ACTION_STATE.BLOCKED) {
17031703
return ButtonStyleType.negative
17041704
}
1705-
if (userActionState === ACTION_STATE.PARTIAL) {
1705+
if (userActionState === ACTION_STATE.PARTIAL || canDeployWithoutApproval || canImageApproverDeploy) {
17061706
return ButtonStyleType.warning
17071707
}
17081708
return ButtonStyleType.default
@@ -1733,35 +1733,32 @@ const CDMaterial = ({
17331733
const canDeployWithoutApproval = getCanDeployWithoutApproval(state, isExceptionUser)
17341734
const canImageApproverDeploy = getCanImageApproverDeploy(state, canApproverDeploy, isExceptionUser)
17351735

1736-
const showAnimatedDeployButton =
1737-
isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
1738-
1739-
if (showAnimatedDeployButton) {
1740-
return (
1741-
<AnimatedDeployButton
1742-
isLoading={deploymentLoading || isSaveLoading}
1743-
onButtonClick={onClickDeploy}
1744-
isVirtualEnvironment={isVirtualEnvironment}
1745-
exceptionUserConfig={{
1746-
canDeploy: canDeployWithoutApproval,
1747-
isImageApprover: canImageApproverDeploy,
1748-
}}
1749-
/>
1750-
)
1751-
}
17521736
return (
1753-
<Button
1737+
<AnimatedDeployButton
17541738
dataTestId="cd-trigger-deploy-button"
1755-
startIcon={getDeployButtonIcon()}
17561739
isLoading={deploymentLoading || isSaveLoading}
1757-
text={`${
1758-
userActionState === ACTION_STATE.BLOCKED ? 'Deployment is blocked' : CDButtonLabelMap[stageType]
1759-
}${isVirtualEnvironment ? ' to isolated env' : ''}`}
1760-
endIcon={userActionState === ACTION_STATE.BLOCKED ? <InfoOutline /> : null}
1761-
onClick={(e) => onClickDeploy(e, disableDeployButton)}
1762-
size={ComponentSizeType.large}
1763-
style={getDeployButtonStyle(userActionState)}
1740+
onButtonClick={(e) => onClickDeploy(e, disableDeployButton)}
1741+
startIcon={getDeployButtonIcon()}
1742+
text={
1743+
canDeployWithoutApproval
1744+
? 'Deploy without approval'
1745+
: `${
1746+
userActionState === ACTION_STATE.BLOCKED
1747+
? 'Deployment is blocked'
1748+
: CDButtonLabelMap[stageType]
1749+
}${isVirtualEnvironment ? ' to isolated env' : ''}`
1750+
}
1751+
endIcon={userActionState === ACTION_STATE.BLOCKED ? <Icon name="ic-info-outline" color={null} /> : null}
1752+
style={getDeployButtonStyle(userActionState, canDeployWithoutApproval, canImageApproverDeploy)}
17641753
disabled={disableDeployButton}
1754+
tooltipContent={
1755+
canDeployWithoutApproval || canImageApproverDeploy
1756+
? 'You are authorized to deploy as an exception user'
1757+
: ''
1758+
}
1759+
animateStartIcon={
1760+
isCDNode && !disableDeployButton && (!userActionState || userActionState === ACTION_STATE.ALLOWED)
1761+
}
17651762
/>
17661763
)
17671764
}

‎src/components/charts/ChartHeaderFilters.tsx

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -250,13 +250,10 @@ const ChartHeaderFilter = ({
250250
<div> Show deprecated charts</div>
251251
</Checkbox>
252252
{ChartCategoryFilters && (
253-
<>
254-
<hr className="mt-8 mb-8" />
255-
<ChartCategoryFilters
256-
selectedCategories={chartCategoryIds}
257-
handleUpdateCategoryFilter={handleUpdateCategoryFilter}
258-
/>
259-
</>
253+
<ChartCategoryFilters
254+
selectedCategories={chartCategoryIds}
255+
handleUpdateCategoryFilter={handleUpdateCategoryFilter}
256+
/>
260257
)}
261258
<hr className="mt-8 mb-8" />
262259
<Accordian

0 commit comments

Comments
 (0)