Skip to content

Commit 76c159d

Browse files
arunjaindevarunjaindev
committed
feat: refactor routing and components for improved workflow management
1 parent 3a0e5e8 commit 76c159d

File tree

9 files changed

+269
-273
lines changed

9 files changed

+269
-273
lines changed

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/MainContent/AppComposeRouter.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ const AppComposeRouter = ({ routePath }: { routePath: string }) => {
129129
{isUnlocked.workflowEditor && [
130130
<Route
131131
key={URLS.APP_WORKFLOW_CONFIG}
132-
path={`${URLS.APP_WORKFLOW_CONFIG}/:workflowId?/*`}
132+
path={`${URLS.APP_WORKFLOW_CONFIG}/*`}
133133
element={
134134
<WorkflowEdit
135135
configStatus={1}
@@ -289,7 +289,7 @@ const AppComposeRouter = ({ routePath }: { routePath: string }) => {
289289
{isUnlocked.workflowEditor && [
290290
<Route
291291
key={URLS.APP_WORKFLOW_CONFIG}
292-
path={`${URLS.APP_WORKFLOW_CONFIG}/:workflowId?/*`}
292+
path={`${URLS.APP_WORKFLOW_CONFIG}/*`}
293293
element={
294294
<WorkflowEdit
295295
configStatus={1}

‎src/Pages/Applications/DevtronApps/Details/AppConfigurations/Navigation/EnvConfigurationsNav.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ export const EnvConfigurationsNav = ({
412412

413413
// Build the new app path, conditionally adding the environment override config when switching to environment
414414
const appPath = `${truncatedPath}${
415-
value !== BASE_CONFIGURATIONS.id ? `/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId(\\d+)?` : `/${URLS.BASE_CONFIG}`
415+
value !== BASE_CONFIGURATIONS.id ? `/${URLS.APP_ENV_OVERRIDE_CONFIG}/:envId?` : `/${URLS.BASE_CONFIG}`
416416
}/${DEPLOYMENT_CONFIGURATION_RESOURCE_TYPE_ROUTE}?` // Dynamically set valid resource types
417417

418418
// Generate the final path

‎src/Pages/Shared/EnvironmentOverride/EnvironmentOverride.tsx‎

Lines changed: 70 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -125,65 +125,76 @@ const EnvironmentOverride = ({
125125
<ErrorBoundary>
126126
<div className={`h-100 ${isDeploymentOverride ? 'deployment-template-override' : ''}`}>
127127
<Routes>
128-
<Route path={URLS.APP_DEPLOYMENT_CONFIG}>
129-
<DeploymentTemplate
130-
key={`deployment-${params.appId}-${params.envId}`}
131-
environmentName={getEnvName()}
132-
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
133-
approvalConfigMap?.[ApprovalConfigDataKindType.deploymentTemplate],
134-
)}
135-
reloadEnvironments={reloadEnvironments}
136-
clusterId={clusterId}
137-
fetchEnvConfig={fetchEnvConfig}
138-
isExceptionUser={
139-
approvalConfigMap?.[ApprovalConfigDataKindType.deploymentTemplate].isExceptionUser
140-
}
141-
isTemplateView={isTemplateView}
142-
/>
143-
</Route>
144-
<Route path={`${URLS.APP_CM_CONFIG}/:name?`}>
145-
<ConfigMapSecretWrapper
146-
key={`configmap-${params.appId}-${params.envId}`}
147-
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
148-
approvalConfigMap?.[ApprovalConfigDataKindType.configMap],
149-
)}
150-
parentName={getParentName()}
151-
clusterId={clusterId}
152-
envConfig={envConfig}
153-
fetchEnvConfig={fetchEnvConfig}
154-
onErrorRedirectURL={onErrorRedirectURL}
155-
reloadEnvironments={reloadEnvironments}
156-
isJob={isJob}
157-
appName={getAppName()}
158-
envName={getEnvName()}
159-
isExceptionUser={approvalConfigMap?.[ApprovalConfigDataKindType.configMap].isExceptionUser}
160-
isTemplateView={isTemplateView}
161-
routePath={`${routePath}/${URLS.APP_CM_CONFIG}/:name?`}
162-
/>
163-
</Route>
164-
<Route path={`${URLS.APP_CS_CONFIG}/:name?`}>
165-
<ConfigMapSecretWrapper
166-
key={`secret-${params.appId}-${params.envId}`}
167-
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
168-
approvalConfigMap?.[ApprovalConfigDataKindType.configSecret],
169-
)}
170-
parentName={getParentName()}
171-
clusterId={environmentsMap.get(+params.envId)?.clusterId?.toString()}
172-
componentType={CMSecretComponentType.Secret}
173-
envConfig={envConfig}
174-
fetchEnvConfig={fetchEnvConfig}
175-
onErrorRedirectURL={onErrorRedirectURL}
176-
reloadEnvironments={reloadEnvironments}
177-
isJob={isJob}
178-
appName={getAppName()}
179-
envName={getEnvName()}
180-
isExceptionUser={
181-
approvalConfigMap?.[ApprovalConfigDataKindType.configSecret].isExceptionUser
182-
}
183-
isTemplateView={isTemplateView}
184-
routePath={`${routePath}/${URLS.APP_CS_CONFIG}/:name?`}
185-
/>
186-
</Route>
128+
<Route
129+
path={URLS.APP_DEPLOYMENT_CONFIG}
130+
element={
131+
<DeploymentTemplate
132+
key={`deployment-${params.appId}-${params.envId}`}
133+
environmentName={getEnvName()}
134+
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
135+
approvalConfigMap?.[ApprovalConfigDataKindType.deploymentTemplate],
136+
)}
137+
reloadEnvironments={reloadEnvironments}
138+
clusterId={clusterId}
139+
fetchEnvConfig={fetchEnvConfig}
140+
isExceptionUser={
141+
approvalConfigMap?.[ApprovalConfigDataKindType.deploymentTemplate].isExceptionUser
142+
}
143+
isTemplateView={isTemplateView}
144+
/>
145+
}
146+
/>
147+
<Route
148+
path={`${URLS.APP_CM_CONFIG}/:name?`}
149+
element={
150+
<ConfigMapSecretWrapper
151+
key={`configmap-${params.appId}-${params.envId}`}
152+
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
153+
approvalConfigMap?.[ApprovalConfigDataKindType.configMap],
154+
)}
155+
parentName={getParentName()}
156+
clusterId={clusterId}
157+
envConfig={envConfig}
158+
fetchEnvConfig={fetchEnvConfig}
159+
onErrorRedirectURL={onErrorRedirectURL}
160+
reloadEnvironments={reloadEnvironments}
161+
isJob={isJob}
162+
appName={getAppName()}
163+
envName={getEnvName()}
164+
isExceptionUser={
165+
approvalConfigMap?.[ApprovalConfigDataKindType.configMap].isExceptionUser
166+
}
167+
isTemplateView={isTemplateView}
168+
routePath={`${routePath}/${URLS.APP_CM_CONFIG}/:name?`}
169+
/>
170+
}
171+
/>
172+
<Route
173+
path={`${URLS.APP_CS_CONFIG}/:name?`}
174+
element={
175+
<ConfigMapSecretWrapper
176+
key={`secret-${params.appId}-${params.envId}`}
177+
isApprovalPolicyConfigured={getIsApprovalPolicyConfigured(
178+
approvalConfigMap?.[ApprovalConfigDataKindType.configSecret],
179+
)}
180+
parentName={getParentName()}
181+
clusterId={environmentsMap.get(+params.envId)?.clusterId?.toString()}
182+
componentType={CMSecretComponentType.Secret}
183+
envConfig={envConfig}
184+
fetchEnvConfig={fetchEnvConfig}
185+
onErrorRedirectURL={onErrorRedirectURL}
186+
reloadEnvironments={reloadEnvironments}
187+
isJob={isJob}
188+
appName={getAppName()}
189+
envName={getEnvName()}
190+
isExceptionUser={
191+
approvalConfigMap?.[ApprovalConfigDataKindType.configSecret].isExceptionUser
192+
}
193+
isTemplateView={isTemplateView}
194+
routePath={`${routePath}/${URLS.APP_CS_CONFIG}/:name?`}
195+
/>
196+
}
197+
/>
187198
</Routes>
188199
</div>
189200
</ErrorBoundary>

‎src/components/Jobs/JobDetails/JobDetails.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import {
2222
BreadCrumb,
2323
BreadcrumbText,
2424
DOCUMENTATION,
25+
getAutomationEnablementBreadcrumb,
2526
handleAnalyticsEvent,
2627
PageHeader,
2728
Progressing,
@@ -144,6 +145,7 @@ const JobHeader = ({ jobName }: { jobName: string }) => {
144145
ROUTER_URLS.JOB_DETAIL.ROOT,
145146
{
146147
alias: {
148+
...getAutomationEnablementBreadcrumb(),
147149
':appId': {
148150
component: (
149151
<AppSelector onChange={handleAppChange} appId={Number(appId)} appName={jobName} isJobView />

‎src/components/workflowEditor/CreateWorkflow.tsx‎

Lines changed: 76 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -14,118 +14,109 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { Component } from 'react'
17+
import { useEffect, useState } from 'react'
1818
import { CustomInput, DialogForm, DialogFormSubmit, ServerErrors, showError, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
19-
import { AddWorkflowProps, AddWorkflowState } from './types'
19+
import { AddWorkflowProps } from './types'
2020
import { createWorkflow, updateWorkflow } from './service'
2121
import { getWorkflowList } from '../../services/service'
2222
import { REQUIRED_FIELD_MSG } from '../../config/constantMessaging'
23+
import { useParams } from 'react-router-dom'
2324

24-
export default class AddWorkflow extends Component<AddWorkflowProps, AddWorkflowState> {
25-
constructor(props) {
26-
super(props)
27-
this.state = {
28-
id: 0,
29-
name: '',
30-
showError: false,
31-
}
32-
}
25+
const AddWorkflow = ({ onClose, getWorkflows, isTemplateView }: AddWorkflowProps) => {
26+
const params = useParams<{ appId: string; workflowId: string }>()
3327

34-
componentDidMount() {
35-
if (this.props.params.workflowId) {
36-
this.getWorkflow()
37-
}
38-
}
28+
const [workflowId, setWorkflowId] = useState<number>(0)
29+
const [workflowName, setWorkflowName] = useState<string>('')
30+
const [showValidationError, setShowValidationError] = useState<boolean>(false)
3931

40-
getWorkflow(): void {
41-
getWorkflowList(this.props.params.appId, '', this.props.isTemplateView)
42-
.then((response) => {
43-
if (response.result) {
44-
const workflows = response.result.workflows || []
45-
const workflow = workflows.find((wf) => wf.id == +this.props.params.workflowId)
46-
if (workflow) {
47-
this.setState({ id: workflow.id, name: workflow.name })
48-
} else {
49-
ToastManager.showToast({
50-
variant: ToastVariantType.error,
51-
description: 'Workflow Not Found',
52-
})
32+
const isNameValid = !!workflowName?.length
33+
34+
useEffect(() => {
35+
if (params.workflowId) {
36+
getWorkflowList(params.appId, '', isTemplateView)
37+
.then((response) => {
38+
if (response.result) {
39+
const workflows = response.result.workflows || []
40+
const workflow = workflows.find((wf) => wf.id === +params.workflowId)
41+
if (workflow) {
42+
setWorkflowId(workflow.id)
43+
setWorkflowName(workflow.name)
44+
} else {
45+
ToastManager.showToast({
46+
variant: ToastVariantType.error,
47+
description: 'Workflow Not Found',
48+
})
49+
}
5350
}
54-
}
55-
})
56-
.catch((error: ServerErrors) => {
57-
showError(error)
58-
})
59-
}
51+
})
52+
.catch((error: ServerErrors) => {
53+
showError(error)
54+
})
55+
}
56+
}, [params.workflowId, params.appId, isTemplateView])
6057

61-
handleWorkflowName = (event): void => {
62-
this.setState({ name: event.target.value })
58+
const handleWorkflowName = (event): void => {
59+
setWorkflowName(event.target.value)
6360
}
6461

65-
saveWorkflow = (event): void => {
62+
const saveWorkflow = (event): void => {
6663
event.preventDefault()
67-
this.setState({ showError: true })
64+
setShowValidationError(true)
6865
const request = {
69-
appId: +this.props.params.appId,
70-
id: this.state.id,
71-
name: this.state.name,
66+
appId: +params.appId,
67+
id: workflowId,
68+
name: workflowName,
7269
}
73-
if (!this.isNameValid()) {
70+
if (!isNameValid) {
7471
return
7572
}
76-
const message = this.state.id ? 'Workflow Updated Successfully' : 'Workflow Created successfully'
77-
const promise = this.props.params.workflowId
78-
? updateWorkflow(request, this.props.isTemplateView)
79-
: createWorkflow(request, this.props.isTemplateView)
73+
const message = workflowId ? 'Workflow Updated Successfully' : 'Workflow Created successfully'
74+
const promise = params.workflowId
75+
? updateWorkflow(request, isTemplateView)
76+
: createWorkflow(request, isTemplateView)
8077
promise
8178
.then((response) => {
8279
ToastManager.showToast({
8380
variant: ToastVariantType.success,
8481
description: message,
8582
})
86-
this.setState({
87-
id: response.result.id,
88-
name: response.result.name,
89-
showError: false,
90-
})
91-
this.props.onClose()
92-
this.props.getWorkflows()
83+
setWorkflowId(response.result.id)
84+
setWorkflowName(response.result.name)
85+
setShowValidationError(false)
86+
onClose()
87+
getWorkflows()
9388
})
9489
.catch((error: ServerErrors) => {
9590
showError(error)
9691
})
9792
}
9893

99-
isNameValid(): boolean {
100-
return !!this.state.name?.length
101-
}
94+
const title = params.workflowId ? 'Edit Workflow' : 'Add Workflow'
10295

103-
render() {
104-
const isValid = this.isNameValid()
105-
const title = this.props.params.workflowId ? 'Edit Workflow' : 'Add Workflow'
106-
return (
107-
<DialogForm
108-
title={title}
109-
className=""
110-
close={(event) => this.props.onClose()}
111-
onSave={this.saveWorkflow}
112-
isLoading={false}
113-
closeOnESC
114-
>
115-
<label className="form__row">
116-
<CustomInput
117-
name="workflow-name"
118-
label="Workflow Name"
119-
value={this.state.name}
120-
placeholder="e.g. production workflow"
121-
autoFocus
122-
onChange={this.handleWorkflowName}
123-
required
124-
error={this.state.showError && !isValid && REQUIRED_FIELD_MSG}
125-
/>
126-
</label>
127-
<DialogFormSubmit tabIndex={2}>Save</DialogFormSubmit>
128-
</DialogForm>
129-
)
130-
}
96+
return (
97+
<DialogForm
98+
title={title}
99+
className=""
100+
close={onClose}
101+
onSave={saveWorkflow}
102+
isLoading={false}
103+
closeOnESC
104+
>
105+
<label className="form__row">
106+
<CustomInput
107+
name="workflow-name"
108+
label="Workflow Name"
109+
value={workflowName}
110+
placeholder="e.g. production workflow"
111+
autoFocus
112+
onChange={handleWorkflowName}
113+
required
114+
error={showValidationError && !isNameValid && REQUIRED_FIELD_MSG}
115+
/>
116+
</label>
117+
<DialogFormSubmit tabIndex={2}>Save</DialogFormSubmit>
118+
</DialogForm>
119+
)
131120
}
121+
122+
export default AddWorkflow

‎src/components/workflowEditor/EmptyWorkflow.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,15 @@
1515
*/
1616

1717
import { useState } from 'react'
18+
import { useParams } from 'react-router-dom'
1819
import { CustomInput, DialogForm, DialogFormSubmit, ServerErrors, showError, ToastManager, ToastVariantType } from '@devtron-labs/devtron-fe-common-lib'
1920
import { EmptyWorkflowProps, EmptyWorkflowState } from './types'
2021
import { createWorkflow } from './service'
2122
import { FILTER_NAME_REGEX } from '../ApplicationGroup/Constants'
2223
import { NO_WORKFLOW_NAME, INVALID_WORKFLOW_NAME, MIN_3CHARS, MAX_30CHARS, SUCCESS_CREATION } from './constants'
2324

2425
export default function EmptyWorkflow(props: EmptyWorkflowProps) {
26+
const params = useParams<{ appId: string }>()
2527
const [state, setState] = useState<EmptyWorkflowState>({
2628
name: '',
2729
showError: false,
@@ -36,7 +38,7 @@ export default function EmptyWorkflow(props: EmptyWorkflowProps) {
3638
event.preventDefault()
3739
setState({ ...state, showError: true, loading: true })
3840
const request = {
39-
appId: +props.params.appId,
41+
appId: +params.appId,
4042
name: state.name,
4143
}
4244
if (!isNameValid().isValid) {

0 commit comments

Comments
 (0)