Skip to content

Commit

Permalink
Merge branch 'feature/ZKUI-111-bucket-version-confusing-thenew' into …
Browse files Browse the repository at this point in the history 
…q/1.4
  • Loading branch information
@bert-e
bert-e committed Mar 30, 2022
2 parents a8f703a + d5c0097 commit 0ba3044
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 83 deletions.
16 changes: 9 additions & 7 deletions src/react/workflow/ConfigurationTab.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { joiResolver } from '@hookform/resolvers/joi';
import {
convertToReplicationForm,
convertToReplicationStream,
generateExpirationName,
generateStreamName,
prepareExpirationQuery,
} from './utils';
Expand Down Expand Up @@ -302,11 +303,7 @@ function EditForm({
resolver: async (values, context, options) => {
const joiValidator = joiResolver(schema);
if (workflow && isExpirationWorkflow(workflow)) {
return joiValidator(
prepareExpirationQuery(values),
context,
options,
);
return joiValidator(prepareExpirationQuery(values), context, options);
} else {
return joiValidator(values, context, options);
}
Expand Down Expand Up @@ -372,7 +369,10 @@ function EditForm({
approve={handleDeleteWorkflow}
cancel={handleCloseDeleteModal}
show={isDeleteModalOpen}
titleText={`Permanently remove the following Rule: ${workflow.name || (isExpirationWorkflow(workflow) ? '' : generateStreamName(workflow))} ?`}
titleText={`Permanently remove the following Rule: ${
workflow.name ||
(isExpirationWorkflow(workflow) ? generateExpirationName(workflow) : generateStreamName(workflow))
} ?`}
/>
<ConfigurationHeader>
{formState.isDirty ? (
Expand All @@ -398,7 +398,9 @@ function EditForm({
/>
</ConfigurationHeader>
<FormProvider {...useFormMethods}>
<FormContainer style={{ backgroundColor: 'transparent', overflowX: 'hidden' }}>
<FormContainer
style={{ backgroundColor: 'transparent', overflowX: 'hidden' }}
>
<form onSubmit={handleSubmit(onSubmit)}>
<T.Group>
<T.GroupContent>
Expand Down
48 changes: 33 additions & 15 deletions src/react/workflow/ExpirationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@ import * as T from '../ui-elements/TableKeyValue2';
import { Controller, useFormContext } from 'react-hook-form';
import { ErrorInput } from '../ui-elements/FormLayout';
import type { Locations } from '../../types/config';
import { Select, Toggle, SpacedBox } from '@scality/core-ui';
import { flattenFormErrors, renderSource, sourceBucketOptions } from './utils';
import { Toggle, SpacedBox } from '@scality/core-ui';
import Select, {
Option,
} from '@scality/core-ui/dist/components/selectv2/Selectv2.component';
import {
flattenFormErrors,
renderSource,
sourceBucketOptions,
} from './utils';
import Joi from '@hapi/joi';

import Input from '../ui-elements/Input';
Expand Down Expand Up @@ -83,14 +90,10 @@ export const expirationSchema = Joi.object({
);

export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
const {
register,
control,
watch,
setValue,
formState: { errors: formErrors },
} = useFormContext();
const { register, control, watch, getValues, setValue, formState } =
useFormContext();

const { errors: formErrors } = formState;
const currentVersionTriggerDelayDays = watch(
`${prefix}currentVersionTriggerDelayDays`,
);
Expand All @@ -105,6 +108,12 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {

return (
<ExpirationContainer>
<input
type="hidden"
id="name"
{...register(`${prefix}name`)}
autoComplete="off"
/>
<input
type="hidden"
id="workflowId"
Expand Down Expand Up @@ -158,20 +167,29 @@ export function ExpirationForm({ bucketList, locations, prefix = '' }: Props) {
bucketList,
locations,
);
const isEditing = !!getValues(`${prefix}workflowId`);

const result = options.find(
(l) => l.value === sourceBucket,
);

if (isEditing) {
return renderSource(locations)(result);
}

return (
<Select
id="sourceBucket"
onChange={({ value }) => onChange(value)}
options={options}
formatOptionLabel={renderSource(locations)}
isOptionDisabled={(option) => option.disabled === true}
value={result}
/>
value={sourceBucket}
onChange={onChange}
>
{options &&
options.map((o, i) => (
<Option key={i} value={o.value} disabled={o.disabled}>
{renderSource(locations)(o)}
</Option>
))}
</Select>
);
}}
/>
Expand Down
49 changes: 20 additions & 29 deletions src/react/workflow/ReplicationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,9 @@ import { Controller, useFormContext } from 'react-hook-form';
import { ErrorInput } from '../ui-elements/FormLayout';
import type {
Locations,
Replication as ReplicationStream,
} from '../../types/config';
import { useEffect } from 'react';
import { Select, Toggle } from '@scality/core-ui';
import { Toggle } from '@scality/core-ui';
import Select, { Option } from '@scality/core-ui/dist/components/selectv2/Selectv2.component';
import {
checkIfExternalLocation,
checkSupportsReplicationTarget,
Expand Down Expand Up @@ -59,17 +58,9 @@ export const replicationSchema = {
// 'string.min': '"Name" should have a minimum length of {#limit}',
// }),
enabled: Joi.boolean().label('State').required(),
sourceBucket: Joi.object({
value: Joi.string().label('Bucket Name').required(),
label: Joi.string(),
disabled: Joi.boolean(),
location: Joi.string(),
}),
sourceBucket: Joi.string().label('Bucket Name').required(),
sourcePrefix: Joi.string().label('Prefix').allow(''),
destinationLocation: Joi.object({
value: Joi.string().label('Destination Location Name').required(),
label: Joi.string(),
}),
destinationLocation: Joi.string().label('Destination Location Name').required(),
};

function ReplicationComponent({
Expand Down Expand Up @@ -173,9 +164,9 @@ function ReplicationComponent({
bucketList,
locations,
);
const isEditing = !!getValues('streamId');
const isEditing = !!getValues(`${prefix}streamId`);
const result = options.find(
(l) => l.value === sourceBucket?.value,
(l) => l.value === sourceBucket,
);

if (isEditing) {
Expand All @@ -184,7 +175,7 @@ function ReplicationComponent({
return (
<span>
{' '}
{sourceBucket.value}{' '}
{sourceBucket}{' '}
<small>
(depreciated because entity does not exist){' '}
</small>{' '}
Expand All @@ -196,22 +187,22 @@ function ReplicationComponent({
}

return (
<Select
id="sourceBucket"
onChange={onChange}
options={options}
formatOptionLabel={renderSource(locations)}
isDisabled={isEditing}
isOptionDisabled={(option) => option.disabled === true}
value={result}
/>
<Select id="sourceBucket" value={sourceBucket} onChange={onChange} isDisabled={isEditing}>
{options &&
options.map((o, i) => (
<Option title={o.disabled ? 'Versioning is disabled' : ''} key={i} value={o.value}
disabled={o.disabled}>
{renderSource(locations)(o)}
</Option>
))}
</Select>
);
}}
/>
<T.ErrorContainer>
<ErrorInput hasError={errors[`${prefix}sourceBucket.value`]}>
<ErrorInput hasError={errors[`${prefix}sourceBucket`]}>
{' '}
{errors[`${prefix}sourceBucket.value`]?.message}{' '}
{errors[`${prefix}sourceBucket`]?.message}{' '}
</ErrorInput>
</T.ErrorContainer>
</T.Value>
Expand Down Expand Up @@ -267,9 +258,9 @@ function ReplicationComponent({
}}
/>
<T.ErrorContainer>
<ErrorInput hasError={errors[`${prefix}destinationLocation.value`]}>
<ErrorInput hasError={errors[`${prefix}destinationLocation`]}>
{' '}
{errors[`${prefix}destinationLocation.value`]?.message}{' '}
{errors[`${prefix}destinationLocation`]?.message}{' '}
</ErrorInput>
</T.ErrorContainer>
</T.Value>
Expand Down
27 changes: 7 additions & 20 deletions src/react/workflow/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,14 +56,7 @@ export const destinationOptions = (
export const renderSource = (locations: Locations) => {
return function does(option: ReplicationBucketOption) {
return (
<div>
<span> {option.label} </span>
<small>
{' '}
({option.location} /{' '}
{getLocationTypeShort(option.location, locations)}){' '}
</small>
</div>
`${option.label} (${option.location} / ${getLocationTypeShort(option.location, locations)})`
);
};
};
Expand Down Expand Up @@ -99,9 +92,9 @@ export function newReplicationForm(): ReplicationForm {
streamVersion: 1,
streamId: '',
enabled: true,
sourceBucket: {},
sourceBucket: '',
sourcePrefix: '',
destinationLocation: {},
destinationLocation: '',
};
}
export function newReplicationStream(): ReplicationStream {
Expand Down Expand Up @@ -131,15 +124,9 @@ export function convertToReplicationForm(
streamVersion: r.version || 1,
streamId: r.streamId || '',
enabled: r.enabled,
sourceBucket: {
value: r.source.bucketName,
label: r.source.bucketName,
},
sourceBucket: r.source.bucketName,
sourcePrefix: r.source.prefix || '',
destinationLocation: {
label: r.destination.locations[0].name,
value: r.destination.locations[0].name,
},
destinationLocation: r.destination.locations[0].name,
};
}
export function convertToReplicationStream(
Expand All @@ -156,13 +143,13 @@ export function convertToReplicationStream(
enabled: !!r.enabled,
source: {
prefix: r.sourcePrefix || '',
bucketName: r.sourceBucket.value || '',
bucketName: r.sourceBucket || '',
},
destination: {
locations:
[
{
name: r.destinationLocation.value || '',
name: r.destinationLocation || '',
},
] || [],
preferredReadLocation: null,
Expand Down
15 changes: 3 additions & 12 deletions src/types/replication.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,8 @@ export type ReplicationForm = {
readonly streamVersion: number;
readonly streamId: string;
readonly enabled: boolean;
readonly sourceBucket: {
label?: string;
value?: string;
// todo: to be removed?
location?: string;
disabled?: boolean;
};
readonly sourceBucket: string;
readonly sourcePrefix: string;
// todo: allow multiple locations?
readonly destinationLocation: {
label?: string;
value?: string;
};
}
readonly destinationLocation: string;
};

0 comments on commit 0ba3044

Please sign in to comment.