Show all repository type options, mark missing plugins

This commit is contained in:
Jen Huang 2019-04-26 13:07:38 -07:00
parent ad34f63764
commit e34ee47cec
3 changed files with 39 additions and 10 deletions

View file

@ -37,9 +37,9 @@ export const DEFAULT_REPOSITORY_TYPES: RepositoryType[] = [
];
export const PLUGIN_REPOSITORY_TYPES: RepositoryType[] = [
REPOSITORY_TYPES.azure,
REPOSITORY_TYPES.s3,
REPOSITORY_TYPES.hdfs,
REPOSITORY_TYPES.azure,
REPOSITORY_TYPES.gcs,
];

View file

@ -12,8 +12,18 @@
}
}
.ssrRepositoryFormTypeCardWrapper:focus .ssrRepositoryFormTypeCard:not(.ssrRepositoryFormTypeCard--selected),
.ssrRepositoryFormTypeCard:not(.ssrRepositoryFormTypeCard--selected):hover {
@include euiBottomShadowMedium;
transform: translateY(-2px);
.ssrRepositoryFormTypeCardWrapper--disabled {
.ssrRepositoryFormTypeCard {
cursor: default;
opacity: .7;
}
}
.ssrRepositoryFormTypeCardWrapper:not(.ssrRepositoryFormTypeCardWrapper--disabled) {
&:focus .ssrRepositoryFormTypeCard:not(.ssrRepositoryFormTypeCard--selected),
.ssrRepositoryFormTypeCard:not(.ssrRepositoryFormTypeCard--selected):hover {
@include euiBottomShadowMedium;
transform: translateY(-2px);
}
}

View file

@ -17,12 +17,17 @@ import {
EuiLink,
EuiSpacer,
EuiSwitch,
EuiText,
EuiTitle,
EuiIcon,
} from '@elastic/eui';
import { Repository, RepositoryType, EmptyRepository } from '../../../../common/types';
import { REPOSITORY_TYPES } from '../../../../common/constants';
import {
REPOSITORY_TYPES,
DEFAULT_REPOSITORY_TYPES,
PLUGIN_REPOSITORY_TYPES,
} from '../../../../common/constants';
import { useAppDependencies } from '../../index';
import { documentationLinksService } from '../../services/documentation';
@ -127,15 +132,17 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
? repository.settings.delegateType
: repository.type) === type;
const displayName = textService.getRepositoryTypeName(type);
const isAvailable = repositoryTypes.includes(type);
return (
<EuiFlexItem
className="ssrRepositoryFormTypeCardWrapper"
className={`ssrRepositoryFormTypeCardWrapper
${!isAvailable ? 'ssrRepositoryFormTypeCardWrapper--disabled' : ''}`}
key={index}
tabIndex={0}
onClick={() => onTypeChange(type)}
onClick={() => (isAvailable ? onTypeChange(type) : false)}
onKeyDown={({ key }) => {
if (key === 'Enter') {
if (isAvailable && key === 'Enter') {
onTypeChange(type);
}
}}
@ -159,6 +166,16 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
<EuiIcon type="link" />
</EuiLink>
}
footer={
!isAvailable ? (
<EuiText size="s" color="subdued">
<FormattedMessage
id="xpack.snapshotRestore.repositoryForm.fields.typePluginRequiredDescription"
defaultMessage="Plugin required"
/>
</EuiText>
) : null
}
/>
</EuiFlexItem>
);
@ -192,7 +209,9 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
return (
<EuiFlexGrid columns={3}>
{repositoryTypes.map((type: RepositoryType, index: number) => renderTypeCard(type, index))}
{[...DEFAULT_REPOSITORY_TYPES, ...PLUGIN_REPOSITORY_TYPES].map(
(type: RepositoryType, index: number) => renderTypeCard(type, index)
)}
</EuiFlexGrid>
);
};