Skip to content

Commit 7864dc6

Browse files
talhainvenxiontalhainvenxion
committed
fixed copy button on stackComponents
1 parent e301f0f commit 7864dc6

File tree

3 files changed

+109
-50
lines changed

3 files changed

+109
-50
lines changed

‎src/ui/layouts/stackComponents/RunDetail/index.tsx‎

Lines changed: 77 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
22

33
import { routePaths } from '../../../../routes/routePaths';
4+
import { camelCaseToParagraph } from '../../../../utils';
5+
import { useLocationPath } from '../../../hooks';
46
// import { translate } from './translate';
57
import { BasePage } from '../BasePage';
68
import { Configuration } from './Configuration';
@@ -17,19 +19,77 @@ import { useService } from './useService';
1719
// import { formatMoney } from '../../../../utils/money';
1820
// import { truncate } from '../../../../utils';
1921

20-
const getTabPages = ({
21-
stackId,
22-
runId,
23-
}: {
22+
// const getTabPages = ({
23+
// stackId,
24+
// runId,
25+
// }: {
26+
// stackId: TId;
27+
// runId: TId;
28+
// }): TabPage[] => {
29+
// const locationPath = useLocationPath();
30+
// return [
31+
// {
32+
// text: 'DAG',
33+
// // <Statistics runId={runId} stackId={stackId} />
34+
// Component: () => <div>Coming soon</div>,
35+
// path: routePaths.run.component.statistics('alerter', runId, stackId),
36+
// },
37+
// {
38+
// text: 'Configuration',
39+
// // <Results runId={runId} stackId={stackId} />
40+
// Component: () => <Configuration runId={runId} />,
41+
// path: routePaths.run.component.results(runId, stackId),
42+
// },
43+
// ];
44+
// };
45+
46+
// const getBreadcrumbs = ({
47+
// stackId,
48+
// runId,
49+
// }: {
50+
// stackId: TId;
51+
// runId: TId;
52+
// }): TBreadcrumb[] => {
53+
// return [
54+
// {
55+
// name: 'Component',
56+
// clickable: true,
57+
// to: routePaths.stackComponents.base('alerter'),
58+
// },
59+
// {
60+
// name: 'alerteaaar',
61+
// clickable: true,
62+
// to: routePaths.stackComponents.base('alerter'),
63+
// },
64+
// {
65+
// name: `Run ${runId}`,
66+
// clickable: true,
67+
// to: routePaths.run.component.statistics('alerter', runId, stackId),
68+
// },
69+
// ];
70+
// };
71+
72+
export interface RunDetailRouteParams {
73+
id: TId;
2474
stackId: TId;
25-
runId: TId;
26-
}): TabPage[] => {
27-
return [
75+
}
76+
77+
export const RunDetail: React.FC = () => {
78+
const locationPath = useLocationPath();
79+
const { runId, stackId } = useService();
80+
81+
// const { runId, stackId, run, billing } = useService();
82+
// debugger;
83+
const tabPages = [
2884
{
2985
text: 'DAG',
3086
// <Statistics runId={runId} stackId={stackId} />
3187
Component: () => <div>Coming soon</div>,
32-
path: routePaths.run.component.statistics('alerter', runId, stackId),
88+
path: routePaths.run.component.statistics(
89+
locationPath.split('/')[2],
90+
runId,
91+
stackId,
92+
),
3393
},
3494
{
3595
text: 'Configuration',
@@ -38,51 +98,27 @@ const getTabPages = ({
3898
path: routePaths.run.component.results(runId, stackId),
3999
},
40100
];
41-
};
42-
43-
const getBreadcrumbs = ({
44-
stackId,
45-
runId,
46-
}: {
47-
stackId: TId;
48-
runId: TId;
49-
}): TBreadcrumb[] => {
50-
return [
101+
const breadcrumbs = [
51102
{
52103
name: 'Component',
53104
clickable: true,
54-
to: routePaths.stackComponents.base('alerter'),
105+
to: routePaths.stackComponents.base(locationPath.split('/')[2]),
55106
},
56107
{
57-
name: 'alerter',
108+
name: camelCaseToParagraph(locationPath.split('/')[2]),
58109
clickable: true,
59-
to: routePaths.stackComponents.base('alerter'),
110+
to: routePaths.stackComponents.base(locationPath.split('/')[2]),
60111
},
61112
{
62113
name: `Run ${runId}`,
63114
clickable: true,
64-
to: routePaths.run.component.statistics('alerter', runId, stackId),
115+
to: routePaths.run.component.statistics(
116+
locationPath.split('/')[2],
117+
runId,
118+
stackId,
119+
),
65120
},
66121
];
67-
};
68-
69-
export interface RunDetailRouteParams {
70-
id: TId;
71-
stackId: TId;
72-
}
73-
74-
export const RunDetail: React.FC = () => {
75-
const { runId, stackId } = useService();
76-
// const { runId, stackId, run, billing } = useService();
77-
// debugger;
78-
const tabPages = getTabPages({
79-
runId,
80-
stackId,
81-
});
82-
const breadcrumbs = getBreadcrumbs({
83-
runId,
84-
stackId,
85-
});
86122

87123
return (
88124
<BasePage

‎src/ui/layouts/stackComponents/RunsTable/index.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { routePaths } from '../../../../routes/routePaths';
3-
import { useHistory } from '../../../hooks';
3+
import { useHistory, useLocationPath } from '../../../hooks';
44

55
import { Table } from '../../common/Table';
66

@@ -15,7 +15,7 @@ export const RunsTable: React.FC<{
1515
filter?: any;
1616
}> = ({ runIds, pagination = true, emptyStateText, fetching, filter }) => {
1717
const history = useHistory();
18-
18+
const locationPath = useLocationPath();
1919
const {
2020
sortedRuns,
2121
setSortedRuns,
@@ -30,7 +30,11 @@ export const RunsTable: React.FC<{
3030
// debugger;
3131
setSelectedRunIds([]);
3232
history.push(
33-
routePaths.run.component.statistics('alerter', run.id, run.pipelineId),
33+
routePaths.run.component.statistics(
34+
locationPath.split('/')[2],
35+
run.id,
36+
run.pipelineId,
37+
),
3438
);
3539
};
3640

‎src/ui/layouts/stackComponents/StackDetail/Configuration/index.tsx‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,27 @@ import React from 'react';
22

33
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
44
import { okaidia } from 'react-syntax-highlighter/dist/esm/styles/prism';
5-
import { FlexBox, H4, GhostButton } from '../../../../components';
6-
5+
import { iconColors, iconSizes, toasterTypes } from '../../../../../constants';
6+
import { showToasterAction } from '../../../../../redux/actions';
7+
import { FlexBox, H4, GhostButton, icons, Box } from '../../../../components';
8+
import { useDispatch } from '../../../../hooks';
79
import { translate } from '../translate';
810

911
import styles from './index.module.scss';
1012
import { useService } from './useService';
1113

1214
export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
15+
const dispatch = useDispatch();
1316
const { downloadYamlFile, stackConfig } = useService({ stackId });
14-
17+
const handleCopy = () => {
18+
navigator.clipboard.writeText(stackConfig);
19+
dispatch(
20+
showToasterAction({
21+
description: 'Config copied to clipboard',
22+
type: toasterTypes.success,
23+
}),
24+
);
25+
};
1526
return (
1627
<FlexBox.Column fullWidth>
1728
<FlexBox
@@ -20,9 +31,17 @@ export const Configuration: React.FC<{ stackId: TId }> = ({ stackId }) => {
2031
justifyContent="space-between"
2132
>
2233
<H4 bold>{translate('configuration.title.text')}</H4>
23-
<GhostButton onClick={downloadYamlFile}>
24-
{translate('configuration.button.text')}
25-
</GhostButton>
34+
<Box>
35+
<GhostButton
36+
style={{ marginRight: '10px' }}
37+
onClick={downloadYamlFile}
38+
>
39+
{translate('configuration.button.text')}
40+
</GhostButton>
41+
<GhostButton onClick={handleCopy}>
42+
<icons.copy color={iconColors.black} size={iconSizes.sm} />
43+
</GhostButton>
44+
</Box>
2645
</FlexBox>
2746
<FlexBox className={styles.code}>
2847
<SyntaxHighlighter

0 commit comments

Comments
 (0)