-
Notifications
You must be signed in to change notification settings - Fork 605
/
TestFunctionModal.tsx
104 lines (95 loc) · 3.01 KB
/
TestFunctionModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import * as React from 'react';
import { Button, Modal, ModalVariant, Title, TitleSizes } from '@patternfly/react-core';
import { FormikProps, FormikValues } from 'formik';
import { useTranslation } from 'react-i18next';
import { ModalComponentProps } from '@console/internal/components/factory/modal';
import { useK8sGet } from '@console/internal/components/utils/k8s-get-hook';
import { ServiceModel } from '../../models';
import { ServiceKind } from '../../types';
import RequestPane from './RequestPane';
import ResponsePane from './ResponsePane';
import { ModalPanel } from './types';
import './TestFunctionModal.scss';
interface TestFunctionModalProps {
service: ServiceKind;
}
type Props = FormikProps<FormikValues> & TestFunctionModalProps & ModalComponentProps;
const TestFunctionModal: React.FC<Props> = (props) => {
const { t } = useTranslation();
const { handleSubmit, cancel, close, isSubmitting, service, setFieldValue } = props;
const [currentView, setCurrentView] = React.useState(ModalPanel.Request);
const { name, namespace } = service.data.metadata;
const [svc, loaded] = useK8sGet<ServiceKind>(ServiceModel, name, namespace);
React.useEffect(() => {
if (loaded) {
setFieldValue('endpoint.url', svc.status.url);
}
}, [loaded, svc, setFieldValue]);
const header = (
<>
<Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
{t(`knative-plugin~Test Serverless Function`)}
</Title>
</>
);
const footer = (
<>
{currentView === ModalPanel.Request ? (
<form
onSubmit={() => {
handleSubmit();
setCurrentView(ModalPanel.Response);
}}
>
<Button
type="submit"
variant="primary"
data-test-id="invoke-action"
isDisabled={isSubmitting}
>
{t('knative-plugin~Test')}
</Button>
<Button type="button" variant="secondary" data-test-id="cancel-action" onClick={cancel}>
{t('knative-plugin~Cancel')}
</Button>
</form>
) : (
<>
<Button
type="button"
variant="primary"
data-test-id="back-action"
onClick={() => setCurrentView(ModalPanel.Request)}
>
{t('knative-plugin~Back')}
</Button>
<Button type="button" variant="secondary" data-test-id="close-action" onClick={close}>
{t('knative-plugin~Close')}
</Button>
</>
)}
</>
);
return (
<Modal
variant={ModalVariant.small}
isOpen
header={header}
className="kn-test-sf-modal"
onClose={close}
position="top"
footer={footer}
>
<div className="kn-test-sf-modal__body">
{currentView === ModalPanel.Request ? (
<RequestPane {...props} />
) : (
<ResponsePane {...props} />
)}
</div>
</Modal>
);
};
export default TestFunctionModal;