-
Notifications
You must be signed in to change notification settings - Fork 593
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.
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
Bug 1797702: remove search button and search status/result for deploy image #4187
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,97 +3,124 @@ import * as _ from 'lodash'; | |
import { k8sCreate } from '@console/internal/module/k8s'; | ||
import { ImageStreamImportsModel } from '@console/internal/models'; | ||
import { useFormikContext, FormikValues } from 'formik'; | ||
import { TextInputTypes, Alert, AlertActionCloseButton, Button } from '@patternfly/react-core'; | ||
import { | ||
TextInputTypes, | ||
Alert, | ||
AlertActionCloseButton, | ||
Button, | ||
ValidatedOptions, | ||
} from '@patternfly/react-core'; | ||
import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret'; | ||
import { InputSearchField } from '@console/shared'; | ||
import { InputField } from '@console/shared'; | ||
import { getSuggestedName, getPorts, makePortName } from '../../../utils/imagestream-utils'; | ||
import { secretModalLauncher } from '../CreateSecretModal'; | ||
|
||
const ImageSearch: React.FC = () => { | ||
const { values, setFieldValue, dirty } = useFormikContext<FormikValues>(); | ||
const [newImageSecret, setNewImageSecret] = React.useState(''); | ||
const [alertVisible, shouldHideAlert] = React.useState(true); | ||
const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default); | ||
const namespace = values.project.name; | ||
|
||
const handleSearch = React.useCallback( | ||
(searchTerm: string) => { | ||
const importImage = { | ||
kind: 'ImageStreamImport', | ||
apiVersion: 'image.openshift.io/v1', | ||
metadata: { | ||
name: 'newapp', | ||
namespace: values.project.name, | ||
}, | ||
spec: { | ||
import: false, | ||
images: [ | ||
{ | ||
from: { | ||
kind: 'DockerImage', | ||
name: _.trim(searchTerm), | ||
}, | ||
const handleSearch = React.useCallback(() => { | ||
const searchTermImage = values.searchTerm; | ||
setFieldValue('isSearchingForImage', true); | ||
setValidated(ValidatedOptions.default); | ||
const importImage = { | ||
kind: 'ImageStreamImport', | ||
apiVersion: 'image.openshift.io/v1', | ||
metadata: { | ||
name: 'newapp', | ||
namespace: values.project.name, | ||
}, | ||
spec: { | ||
import: false, | ||
images: [ | ||
{ | ||
from: { | ||
kind: 'DockerImage', | ||
name: _.trim(searchTermImage), | ||
}, | ||
], | ||
}, | ||
status: {}, | ||
}; | ||
}, | ||
], | ||
}, | ||
status: {}, | ||
}; | ||
|
||
k8sCreate(ImageStreamImportsModel, importImage) | ||
.then((imageStreamImport) => { | ||
const status = _.get(imageStreamImport, 'status.images[0].status'); | ||
if (status.status === 'Success') { | ||
const name = _.get(imageStreamImport, 'spec.images[0].from.name'); | ||
const image = _.get(imageStreamImport, 'status.images[0].image'); | ||
const tag = _.get(imageStreamImport, 'status.images[0].tag'); | ||
const isi = { name, image, tag, status }; | ||
const ports = getPorts(isi); | ||
setFieldValue('isSearchingForImage', false); | ||
setFieldValue('isi.name', name); | ||
setFieldValue('isi.image', image); | ||
setFieldValue('isi.tag', tag); | ||
setFieldValue('isi.status', status); | ||
setFieldValue('isi.ports', ports); | ||
setFieldValue('image.ports', ports); | ||
setFieldValue('image.tag', tag); | ||
!values.name && setFieldValue('name', getSuggestedName(name)); | ||
!values.application.name && | ||
setFieldValue('application.name', `${getSuggestedName(name)}-app`); | ||
// set default port value | ||
const targetPort = _.head(ports); | ||
targetPort && setFieldValue('route.targetPort', makePortName(targetPort)); | ||
} else { | ||
setFieldValue('isSearchingForImage', false); | ||
setFieldValue('isi', {}); | ||
setFieldValue('isi.status', status.message); | ||
setFieldValue('route.targetPort', null); | ||
} | ||
}) | ||
.catch((error) => { | ||
setFieldValue('isi', {}); | ||
setFieldValue('isi.status', error.message); | ||
k8sCreate(ImageStreamImportsModel, importImage) | ||
.then((imageStreamImport) => { | ||
const status = _.get(imageStreamImport, 'status.images[0].status'); | ||
if (status.status === 'Success') { | ||
const name = _.get(imageStreamImport, 'spec.images[0].from.name'); | ||
const image = _.get(imageStreamImport, 'status.images[0].image'); | ||
const tag = _.get(imageStreamImport, 'status.images[0].tag'); | ||
const isi = { name, image, tag, status }; | ||
const ports = getPorts(isi); | ||
setFieldValue('isSearchingForImage', false); | ||
}); | ||
}, | ||
[setFieldValue, values.application.name, values.name, values.project.name], | ||
); | ||
setFieldValue('isi.name', name); | ||
setFieldValue('isi.image', image); | ||
setFieldValue('isi.tag', tag); | ||
setFieldValue('isi.status', status); | ||
setFieldValue('isi.ports', ports); | ||
setFieldValue('image.ports', ports); | ||
setFieldValue('image.tag', tag); | ||
!values.name && setFieldValue('name', getSuggestedName(name)); | ||
!values.application.name && | ||
setFieldValue('application.name', `${getSuggestedName(name)}-app`); | ||
// set default port value | ||
const targetPort = _.head(ports); | ||
targetPort && setFieldValue('route.targetPort', makePortName(targetPort)); | ||
setValidated(ValidatedOptions.success); | ||
} else { | ||
setFieldValue('isSearchingForImage', false); | ||
setFieldValue('isi', {}); | ||
setFieldValue('isi.status', status.message); | ||
setFieldValue('route.targetPort', null); | ||
setValidated(ValidatedOptions.error); | ||
} | ||
}) | ||
.catch((error) => { | ||
setFieldValue('isi', {}); | ||
setFieldValue('isi.status', error.message); | ||
setFieldValue('isSearchingForImage', false); | ||
setValidated(ValidatedOptions.error); | ||
}); | ||
}, [setFieldValue, values.application.name, values.name, values.project.name, values.searchTerm]); | ||
|
||
const handleSave = (name: string) => { | ||
setNewImageSecret(name); | ||
values.searchTerm && handleSearch(values.searchTerm); | ||
values.searchTerm && handleSearch(); | ||
}; | ||
|
||
const getHelpText = () => { | ||
if (values.isSearchingForImage) { | ||
return 'Validating...'; | ||
} | ||
if (!values.isSearchingForImage && validated === ValidatedOptions.success) { | ||
return 'Validated'; | ||
} | ||
return ''; | ||
}; | ||
|
||
const helpTextInvalid = validated === ValidatedOptions.error && ( | ||
<span>{values.searchTerm === '' ? 'Required' : values.isi.status}</span> | ||
); | ||
|
||
React.useEffect(() => { | ||
!dirty && values.searchTerm && handleSearch(values.searchTerm); | ||
!dirty && values.searchTerm && handleSearch(); | ||
}, [dirty, handleSearch, values.searchTerm]); | ||
|
||
return ( | ||
<> | ||
<InputSearchField | ||
<InputField | ||
type={TextInputTypes.text} | ||
data-test-id="deploy-image-search-term" | ||
name="searchTerm" | ||
label="Image Name" | ||
onSearch={handleSearch} | ||
placeholder="Enter an image name" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @sahil143 seems the removal of There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @invincibleJai added data-test-id There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good catch @invincibleJai - we need to be careful not to remove |
||
helpText={getHelpText()} | ||
helpTextInvalid={helpTextInvalid} | ||
validated={validated} | ||
onBlur={handleSearch} | ||
data-test-id="deploy-image-search-term" | ||
required | ||
/> | ||
<div className="help-block" id="image-name-help"> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We had an integration test for Deploy Image?
cc @christianvogt
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
deploy-image flow existed before dev-console and then it was updated and moved.
old e2e tests were updated.
We should eventually move these to the dev-console integration tests folder and update them further.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of removing the test, can we update it to work with the new ui components.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@christianvogt This test is obsolete now because It was testing the content in SearchResult and SearchStatus component and both of these components are removed now. Even With the new component, there is a test that covers the whole deploy image flow.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fair enough that there's one testing the full deploy.
I just thought that instead of testing the results block, it could similarly test for the validation message.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
added test for new search field