fix layout on safari (#85442)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Angela Chuang 2020-12-10 15:09:37 +00:00 committed by GitHub
parent 3b5ed46c9d
commit 0b929f340e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 67 additions and 69 deletions

View file

@ -220,74 +220,72 @@ export const EditConnector = React.memo(
)}
</MyFlexGroup>
<EuiHorizontalRule margin="xs" />
<MyFlexGroup gutterSize="none">
<EuiFlexGroup data-test-subj="edit-connectors" direction="column">
<DisappearingFlexItem $isHidden={!editConnector}>
<Form form={form}>
<EuiFlexGroup gutterSize="none" direction="row">
<EuiFlexItem>
<UseField
path="connectorId"
component={ConnectorSelector}
componentProps={{
connectors,
dataTestSubj: 'caseConnectors',
defaultValue: selectedConnector,
disabled,
idAria: 'caseConnectors',
isEdit: editConnector,
isLoading,
}}
onChange={onChangeConnector}
/>
</EuiFlexItem>
</EuiFlexGroup>
</Form>
</DisappearingFlexItem>
<EuiFlexItem data-test-subj="edit-connector-settings-fields-form-flex-item">
{(currentConnector == null || currentConnector?.id === 'none') && // Connector is none or not defined.
!(currentConnector === null && selectedConnector !== 'none') && // Connector has not been deleted.
!editConnector && (
<EuiText size="s">
<span>{i18n.NO_CONNECTOR}</span>
</EuiText>
)}
<SettingFieldsForm
connector={currentConnector}
fields={fields}
isEdit={editConnector}
onChange={onFieldsChange}
/>
<MyFlexGroup data-test-subj="edit-connectors" direction="column">
<DisappearingFlexItem $isHidden={!editConnector}>
<Form form={form}>
<EuiFlexGroup gutterSize="none" direction="row">
<EuiFlexItem>
<UseField
path="connectorId"
component={ConnectorSelector}
componentProps={{
connectors,
dataTestSubj: 'caseConnectors',
defaultValue: selectedConnector,
disabled,
idAria: 'caseConnectors',
isEdit: editConnector,
isLoading,
}}
onChange={onChangeConnector}
/>
</EuiFlexItem>
</EuiFlexGroup>
</Form>
</DisappearingFlexItem>
<EuiFlexItem data-test-subj="edit-connector-settings-fields-form-flex-item">
{(currentConnector == null || currentConnector?.id === 'none') && // Connector is none or not defined.
!(currentConnector === null && selectedConnector !== 'none') && // Connector has not been deleted.
!editConnector && (
<EuiText size="s">
<span>{i18n.NO_CONNECTOR}</span>
</EuiText>
)}
<SettingFieldsForm
connector={currentConnector}
fields={fields}
isEdit={editConnector}
onChange={onFieldsChange}
/>
</EuiFlexItem>
{editConnector && (
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButton
color="secondary"
data-test-subj="edit-connectors-submit"
fill
iconType="save"
onClick={onSubmitConnector}
size="s"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="edit-connectors-cancel"
iconType="cross"
onClick={onCancelConnector}
size="s"
>
{i18n.CANCEL}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
{editConnector && (
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<EuiButton
color="secondary"
data-test-subj="edit-connectors-submit"
fill
iconType="save"
onClick={onSubmitConnector}
size="s"
>
{i18n.SAVE}
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButtonEmpty
data-test-subj="edit-connectors-cancel"
iconType="cross"
onClick={onCancelConnector}
size="s"
>
{i18n.CANCEL}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
)}
</EuiFlexGroup>
)}
</MyFlexGroup>
</EuiText>
);

View file

@ -138,7 +138,7 @@ const JiraSettingFieldsComponent: React.FunctionComponent<SettingFieldsProps<Jir
);
return isEdit ? (
<span data-test-subj={'connector-settings-jira'}>
<div data-test-subj={'connector-settings-jira'}>
<EuiFormRow fullWidth label={i18n.ISSUE_TYPE}>
<EuiSelect
data-test-subj="issueTypeSelect"
@ -189,7 +189,7 @@ const JiraSettingFieldsComponent: React.FunctionComponent<SettingFieldsProps<Jir
</>
)}
</>
</span>
</div>
) : (
<ConnectorCard
connectorType={ConnectorTypes.jira}