Skip to content

feat: add project selector on one-click app setup page #218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
bestony wants to merge 1 commit into from
Closed

feat: add project selector on one-click app setup page #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions src/containers/apps/oneclick/variables/OneClickAppConfigPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import { Card, Col, Row } from 'antd'
import ReactMarkdown from 'react-markdown'
import { RouteComponentProps } from 'react-router'
import gfm from 'remark-gfm'
import ProjectSelector from '../../../../components/ProjectSelector'
import { IOneClickTemplate } from '../../../../models/IOneClickAppModels'
import ProjectDefinition from '../../../../models/ProjectDefinition'
import ErrorFactory from '../../../../utils/ErrorFactory'
import { localize } from '../../../../utils/Language'
import Toaster from '../../../../utils/Toaster'
import Utils from '../../../../utils/Utils'
import ApiComponent from '../../../global/ApiComponent'
Expand All @@ -16,17 +19,21 @@ import OneClickVariablesSection from './OneClickVariablesSection'

export const ONE_CLICK_APP_NAME_VAR_NAME = '$$cap_appname'
export const ONE_CLICK_ROOT_DOMAIN_VAR_NAME = '$$cap_root_domain'
export const ONE_CLICK_PROJECT_ID_VAR_NAME = '$$cap_project_id'

// Query parameter constants for deployment page
export const DEPLOYMENT_QUERY_PARAM_TEMPLATE = 'template'
export const DEPLOYMENT_QUERY_PARAM_VALUES_ARRAY = 'valuesArray'
export const DEPLOYMENT_QUERY_PARAM_APP_NAME = 'appName'
export const DEPLOYMENT_QUERY_PARAM_PROJECT_ID = 'projectId'

export default class OneClickAppConfigPage extends ApiComponent<
RouteComponentProps<any>,
{
apiData: IOneClickTemplate | undefined
rootDomain: string
projects: ProjectDefinition[]
selectedProjectId: string
}
> {
private isUnmount: boolean = false
Expand All @@ -36,6 +43,8 @@ export default class OneClickAppConfigPage extends ApiComponent<
this.state = {
apiData: undefined,
rootDomain: '',
projects: [],
selectedProjectId: '',
}
}

Expand Down Expand Up @@ -100,17 +109,53 @@ export default class OneClickAppConfigPage extends ApiComponent<

apiData = data

return self.apiManager.getCaptainInfo()
return Promise.all([
self.apiManager.getCaptainInfo(),
self.apiManager.getAllProjects(),
])
})
.then(function (captainInfo) {
.then(function ([captainInfo, projectsResponse]) {
self.setState({
apiData: apiData,
rootDomain: captainInfo.rootDomain,
projects: projectsResponse.projects || [],
})
})
.catch(Toaster.createCatcher())
}

renderProjectSelector() {
const self = this

if ((self.state.projects || []).length === 0) {
return undefined
}

return (
<div style={{ marginBottom: 40 }}>
<h4>{localize('apps.parent_project', 'Parent project')}</h4>
<div
style={{ paddingBottom: 5, fontSize: '90%' }}
className="hide-on-demand"
/>
<Row>
<Col xs={{ span: 24 }} lg={{ span: 12 }}>
<ProjectSelector
allProjects={self.state.projects}
selectedProjectId={self.state.selectedProjectId}
onChange={(value: string) => {
self.setState({
selectedProjectId: value,
})
}}
excludeProjectId={'NONE'}
/>
</Col>
</Row>
</div>
)
}

render() {
const self = this
const apiData = this.state.apiData
Expand Down Expand Up @@ -145,6 +190,7 @@ export default class OneClickAppConfigPage extends ApiComponent<
</ReactMarkdown>
</div>
<div style={{ height: 40 }} />
{self.renderProjectSelector()}
<OneClickVariablesSection
oneClickAppVariables={
apiData.caproverOneClickApp.variables
Expand All @@ -166,6 +212,12 @@ export default class OneClickAppConfigPage extends ApiComponent<
ONE_CLICK_ROOT_DOMAIN_VAR_NAME
] = self.state.rootDomain

// Carry selected project through values so deploy works
// even when the API client does not yet have a projectId field.
valuesAugmented[
ONE_CLICK_PROJECT_ID_VAR_NAME
] = self.state.selectedProjectId || ''

const valuesArray = Object.keys(
valuesAugmented
).map((key) => {
Expand All @@ -185,8 +237,11 @@ export default class OneClickAppConfigPage extends ApiComponent<
const appName = encodeURIComponent(
self.props.match.params.appName
)
const projectId = encodeURIComponent(
self.state.selectedProjectId || ''
)

const deployUrl = `/apps/oneclick/deployment?${DEPLOYMENT_QUERY_PARAM_TEMPLATE}=${templateStr}&${DEPLOYMENT_QUERY_PARAM_VALUES_ARRAY}=${valuesArrayStr}&${DEPLOYMENT_QUERY_PARAM_APP_NAME}=${appName}`
const deployUrl = `/apps/oneclick/deployment?${DEPLOYMENT_QUERY_PARAM_TEMPLATE}=${templateStr}&${DEPLOYMENT_QUERY_PARAM_VALUES_ARRAY}=${valuesArrayStr}&${DEPLOYMENT_QUERY_PARAM_APP_NAME}=${appName}&${DEPLOYMENT_QUERY_PARAM_PROJECT_ID}=${projectId}`
self.props.history.push(deployUrl)
}}
/>
Expand Down
23 changes: 23 additions & 0 deletions src/containers/apps/oneclick/variables/OneClickDeploymentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import ApiComponent from '../../../global/ApiComponent'
import CenteredSpinner from '../../../global/CenteredSpinner'
import {
DEPLOYMENT_QUERY_PARAM_APP_NAME,
DEPLOYMENT_QUERY_PARAM_PROJECT_ID,
DEPLOYMENT_QUERY_PARAM_TEMPLATE,
DEPLOYMENT_QUERY_PARAM_VALUES_ARRAY,
ONE_CLICK_PROJECT_ID_VAR_NAME,
} from './OneClickAppConfigPage'
import OneClickAppDeployProgress from './OneClickAppDeployProgress'

Expand All @@ -18,6 +20,7 @@ export default class OneClickDeploymentPage extends ApiComponent<
appName: string
template?: IOneClickTemplate
valuesArray?: Array<{ key: string; value: string }>
projectId?: string
}
> {
private isUnmount: boolean = false
Expand All @@ -29,6 +32,7 @@ export default class OneClickDeploymentPage extends ApiComponent<
appName: '',
template: undefined,
valuesArray: undefined,
projectId: undefined,
}
}

Expand All @@ -45,6 +49,7 @@ export default class OneClickDeploymentPage extends ApiComponent<
const templateStr = qs.get(DEPLOYMENT_QUERY_PARAM_TEMPLATE)
const valuesArrayStr = qs.get(DEPLOYMENT_QUERY_PARAM_VALUES_ARRAY)
const appName = qs.get(DEPLOYMENT_QUERY_PARAM_APP_NAME) || ''
const projectIdFromQuery = qs.get(DEPLOYMENT_QUERY_PARAM_PROJECT_ID) || ''

if (!templateStr || !valuesArrayStr || !appName) {
Toaster.createCatcher()(
Expand All @@ -61,10 +66,28 @@ export default class OneClickDeploymentPage extends ApiComponent<
value: string
}>

// Prefer explicit query param; fall back to reserved values key
const projectIdFromValues =
valuesArray.find((v) => v.key === ONE_CLICK_PROJECT_ID_VAR_NAME)
?.value || ''
const projectId = projectIdFromQuery || projectIdFromValues || ''

// Ensure project id is present in values for backends that only read values
if (
projectId &&
!valuesArray.some((v) => v.key === ONE_CLICK_PROJECT_ID_VAR_NAME)
) {
valuesArray.push({
key: ONE_CLICK_PROJECT_ID_VAR_NAME,
value: projectId,
})
}

self.setState({
appName,
template,
valuesArray,
projectId,
})

// Start deployment immediately
Expand Down
Loading