Skip to content

Commit 10f2024

Browse files
RohitRaj011RohitRaj011
committed
feat: HeaderWithCreateButton - update Create button with ActionMenu
1 parent 2f75c95 commit 10f2024

File tree

4 files changed

+78
-136
lines changed

4 files changed

+78
-136
lines changed

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButon.tsx‎

Lines changed: 27 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -14,122 +14,57 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { useState } from 'react'
18-
import { useHistory, useLocation, useParams } from 'react-router-dom'
17+
import { useLocation, useParams } from 'react-router-dom'
1918

20-
import { ReactComponent as AddIcon } from '@Icons/ic-add.svg'
21-
import { ReactComponent as DropDown } from '@Icons/ic-caret-down-small.svg'
22-
import { ReactComponent as ChartIcon } from '@Icons/ic-charts.svg'
23-
import { ReactComponent as JobIcon } from '@Icons/ic-k8s-job.svg'
19+
import { SERVER_MODE, URLS } from '@Common/Constants'
20+
import { noop } from '@Common/Helper'
21+
import { ActionMenu } from '@Shared/Components/ActionMenu'
22+
import { ButtonComponentType } from '@Shared/Components/Button'
2423
import Button from '@Shared/Components/Button/Button.component'
24+
import { Icon } from '@Shared/Components/Icon'
25+
import { AppListConstants, ComponentSizeType } from '@Shared/constants'
26+
import { useMainContext } from '@Shared/Providers'
2527

26-
import { Modal, SERVER_MODE, URLS } from '../../../../Common'
27-
import { AppListConstants, ComponentSizeType } from '../../../constants'
28-
import { useMainContext } from '../../../Providers'
2928
import PageHeader from '../PageHeader'
30-
import { getIsShowingLicenseData } from '../utils'
31-
32-
import './HeaderWithCreateButton.scss'
33-
34-
export interface HeaderWithCreateButtonProps {
35-
headerName: string
36-
}
29+
import { HeaderWithCreateButtonProps } from './types'
30+
import { getCreateActionMenuOptions } from './utils'
3731

3832
export const HeaderWithCreateButton = ({ headerName }: HeaderWithCreateButtonProps) => {
33+
// HOOKS
34+
const { serverMode } = useMainContext()
3935
const params = useParams<{ appType: string }>()
40-
const history = useHistory()
4136
const location = useLocation()
42-
const { serverMode, licenseData } = useMainContext()
43-
const [showCreateSelectionModal, setShowCreateSelectionModal] = useState(false)
44-
45-
const showingLicenseBar = getIsShowingLicenseData(licenseData)
46-
47-
const handleCreateButton = () => {
48-
setShowCreateSelectionModal((prevState) => !prevState)
49-
}
5037

51-
const redirectToHelmAppDiscover = () => {
52-
history.push(URLS.CHARTS_DISCOVER)
53-
}
54-
55-
const openCreateDevtronAppModel = () => {
56-
const _urlPrefix = `${URLS.APP}/${URLS.APP_LIST}/${params.appType ?? AppListConstants.AppType.DEVTRON_APPS}`
57-
history.push(`${_urlPrefix}/${AppListConstants.CREATE_DEVTRON_APP_URL}${location.search}`)
58-
}
59-
60-
const openCreateJobModel = () => {
61-
history.push(`${URLS.JOB}/${URLS.APP_LIST}/${URLS.CREATE_JOB}`)
62-
}
38+
// CONSTANTS
39+
const createCustomAppURL = `${URLS.APP}/${URLS.APP_LIST}/${params.appType ?? AppListConstants.AppType.DEVTRON_APPS}/${AppListConstants.CREATE_DEVTRON_APP_URL}${location.search}`
6340

6441
const renderActionButtons = () =>
6542
serverMode === SERVER_MODE.FULL ? (
66-
<Button
67-
text="Create"
68-
onClick={handleCreateButton}
69-
dataTestId="create-app-button-on-header"
70-
endIcon={<DropDown className="icon-dim-20" />}
71-
size={ComponentSizeType.small}
43+
<ActionMenu
44+
id="page-header-create-app-action-menu"
45+
alignment="end"
46+
onClick={noop}
47+
options={getCreateActionMenuOptions(createCustomAppURL)}
48+
buttonProps={{
49+
text: 'Create',
50+
dataTestId: 'create-app-button-on-header',
51+
endIcon: <Icon name="ic-caret-down-small" color={null} />,
52+
size: ComponentSizeType.small,
53+
}}
7254
/>
7355
) : (
7456
<Button
7557
text="Deploy helm charts"
76-
onClick={redirectToHelmAppDiscover}
58+
component={ButtonComponentType.link}
59+
linkProps={{ to: URLS.CHARTS_DISCOVER }}
7760
dataTestId="deploy-helm-chart-on-header"
7861
size={ComponentSizeType.small}
7962
/>
8063
)
8164

82-
const renderCreateSelectionModal = () => (
83-
<Modal
84-
rootClassName={`create-modal-wrapper ${showingLicenseBar ? 'with-bar' : ''}
85-
${window._env_.FEATURE_PROMO_EMBEDDED_BUTTON_TEXT ? 'create-modal-wrapper--try-devtron' : ''}`}
86-
onClick={handleCreateButton}
87-
>
88-
<div
89-
className="create-modal-child cursor"
90-
onClick={openCreateDevtronAppModel}
91-
data-testid="create-custom-app-button-in-dropdown"
92-
>
93-
<AddIcon className="icon-dim-20 fcn-9" />
94-
<div className="ml-8">
95-
<strong>Custom app</strong>
96-
<div>
97-
Connect a git repository to deploy <br /> a custom application
98-
</div>
99-
</div>
100-
</div>
101-
<div
102-
className="create-modal-child cursor"
103-
onClick={redirectToHelmAppDiscover}
104-
data-testid="create-from-chart-store-button"
105-
>
106-
<ChartIcon className="icon-dim-20 fcn-9" />
107-
<div className="ml-8">
108-
<strong>From Chart store</strong>
109-
<div>
110-
Deploy apps using third party helm <br /> charts (eg. prometheus, redis etc.)
111-
</div>
112-
</div>
113-
</div>
114-
<div
115-
className="create-modal-child cursor"
116-
onClick={openCreateJobModel}
117-
data-testid="create-job-button-in-dropdown"
118-
>
119-
<JobIcon className="icon-dim-20 scn-9" />
120-
<div className="ml-8">
121-
<strong>Job</strong>
122-
<div>
123-
Jobs allow manual and automated <br /> execution of developer actions.
124-
</div>
125-
</div>
126-
</div>
127-
</Modal>
128-
)
12965
return (
13066
<div className="create-button-container dc__position-sticky dc__top-0 bg__primary dc__zi-4">
13167
<PageHeader headerName={headerName} renderActionButtons={renderActionButtons} />
132-
{showCreateSelectionModal && renderCreateSelectionModal()}
13368
</div>
13469
)
13570
}

‎src/Shared/Components/Header/HeaderWithCreateButton/HeaderWithCreateButton.scss‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/Shared/Components/Header/HeaderWithCreateButton/types.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ActionMenuProps } from '@Shared/Components/ActionMenu'
2+
3+
export interface HeaderWithCreateButtonProps {
4+
headerName: string
5+
}
6+
7+
export enum CreateActionMenuItems {
8+
CUSTOM_APP = 'create-custom-app',
9+
CHART_STORE = 'create-from-chart-store',
10+
JOB = 'create-job',
11+
}
12+
13+
export type CreateActionMenuProps = ActionMenuProps<CreateActionMenuItems>

‎src/Shared/Components/Header/HeaderWithCreateButton/utils.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { URLS } from '@Common/Constants'
2+
3+
import { CreateActionMenuItems, CreateActionMenuProps } from './types'
4+
5+
export const getCreateActionMenuOptions = (createCustomAppURL: string): CreateActionMenuProps['options'] => [
6+
{
7+
items: [
8+
{
9+
id: CreateActionMenuItems.CUSTOM_APP,
10+
label: 'Custom app',
11+
description: 'Connect a git repository to deploy a custom application',
12+
startIcon: { name: 'ic-add' },
13+
componentType: 'link',
14+
to: createCustomAppURL,
15+
},
16+
],
17+
},
18+
{
19+
items: [
20+
{
21+
id: CreateActionMenuItems.CHART_STORE,
22+
label: 'From Chart store',
23+
description: 'Deploy apps using third party helm charts (eg. prometheus, redis etc.)',
24+
startIcon: { name: 'ic-helm' },
25+
componentType: 'link',
26+
to: URLS.CHARTS_DISCOVER,
27+
},
28+
{
29+
id: CreateActionMenuItems.JOB,
30+
label: 'Job',
31+
description: 'Jobs allow manual and automated execution of developer actions.',
32+
startIcon: { name: 'ic-k8s-job' },
33+
componentType: 'link',
34+
to: `${URLS.JOB}/${URLS.APP_LIST}/${URLS.CREATE_JOB}`,
35+
},
36+
],
37+
},
38+
]

0 commit comments

Comments
 (0)