Skip to content

Commit

Permalink
Code cosmetics in Admin UI (#6422)
Browse files Browse the repository at this point in the history
  • Loading branch information
timleslie authored Aug 27, 2021
1 parent aa03223 commit 9c5991f
Show file tree
Hide file tree
Showing 15 changed files with 66 additions and 262 deletions.
5 changes: 5 additions & 0 deletions .changeset/dry-dolls-jog.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystone-next/keystone': patch
---

Made cosmetic changes to the Admin UI code. No functional changes.
Original file line number Diff line number Diff line change
Expand Up @@ -75,38 +75,14 @@ export const controller = (
return `${label.toLowerCase()}: ${renderedValue}`;
},
types: {
is: {
label: 'Is exactly',
initialValue: '',
},
not: {
label: 'Is not exactly',
initialValue: '',
},
gt: {
label: 'Is greater than',
initialValue: '',
},
lt: {
label: 'Is less than',
initialValue: '',
},
gte: {
label: 'Is greater than or equal to',
initialValue: '',
},
lte: {
label: 'Is less than or equal to',
initialValue: '',
},
in: {
label: 'Is one of',
initialValue: '',
},
not_in: {
label: 'Is not one of',
initialValue: '',
},
is: { label: 'Is exactly', initialValue: '' },
not: { label: 'Is not exactly', initialValue: '' },
gt: { label: 'Is greater than', initialValue: '' },
lt: { label: 'Is less than', initialValue: '' },
gte: { label: 'Is greater than or equal to', initialValue: '' },
lte: { label: 'Is less than or equal to', initialValue: '' },
in: { label: 'Is one of', initialValue: '' },
not_in: { label: 'Is not one of', initialValue: '' },
},
},
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,7 @@ import { useRouter, Link } from '../../../../admin-ui/router';
type ListCardProps = {
listKey: string;
count:
| {
type: 'success';
count: number;
}
| { type: 'success'; count: number }
| { type: 'no-access' }
| { type: 'error'; message: string }
| { type: 'loading' };
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,7 @@ function ItemForm({
${selectedFields}
}
}`,
{
errorPolicy: 'all',
}
{ errorPolicy: 'all' }
);
itemGetter =
useMemo(() => {
Expand All @@ -93,21 +91,15 @@ function ItemForm({

const [state, setValue] = useState(() => {
const value = deserializeValue(list.fields, itemGetter);
return {
value,
item: itemGetter.data,
};
return { value, item: itemGetter.data };
});
if (
!loading &&
state.item !== itemGetter.data &&
(itemGetter.errors || []).every(x => x.path?.length !== 1)
) {
const value = deserializeValue(list.fields, itemGetter);
setValue({
value,
item: itemGetter.data,
});
setValue({ value, item: itemGetter.data });
}

const { changedFields, dataForUpdate } = useChangedFieldsAndDataForUpdate(
Expand All @@ -125,12 +117,7 @@ function ItemForm({
setForceValidation(newForceValidation);
if (newForceValidation) return;

update({
variables: {
data: dataForUpdate,
id: itemGetter.get('id').data,
},
})
update({ variables: { data: dataForUpdate, id: itemGetter.get('id').data } })
// TODO -- Experimenting with less detail in the toasts, so the data lines are commented
// out below. If we're happy with this, clean up the unused lines.
.then(({ /* data, */ errors }) => {
Expand All @@ -154,11 +141,7 @@ function ItemForm({
}
})
.catch(err => {
toasts.addToast({
title: 'Failed to update item',
tone: 'negative',
message: err.message,
});
toasts.addToast({ title: 'Failed to update item', tone: 'negative', message: err.message });
});
});
const labelFieldValue = itemGetter.data?.[list.labelField];
Expand All @@ -178,10 +161,7 @@ function ItemForm({
invalidFields={invalidFields}
onChange={useCallback(
value => {
setValue(state => ({
item: state.item,
value: value(state.value),
}));
setValue(state => ({ item: state.item, value: value(state.value) }));
},
[setValue]
)}
Expand All @@ -191,10 +171,7 @@ function ItemForm({
onSave={onSave}
hasChangedFields={!!changedFields.size}
onReset={useEventCallback(() => {
setValue({
item: itemGetter.data,
value: deserializeValue(list.fields, itemGetter),
});
setValue({ item: itemGetter.data, value: deserializeValue(list.fields, itemGetter) });
})}
loading={loading}
deleteButton={useMemo(
Expand Down Expand Up @@ -336,14 +313,7 @@ const ItemPage = ({ listKey }: ItemPageProps) => {
item: ItemData;
keystone: {
adminMeta: {
list: {
fields: {
path: string;
itemView: {
fieldMode: 'edit' | 'read' | 'hidden';
};
}[];
};
list: { fields: { path: string; itemView: { fieldMode: 'edit' | 'read' | 'hidden' } }[] };
};
};
}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,9 @@ export function FieldSelection({
const setNewSelectedFields = (selectedFields: string[]) => {
if (isArrayEqual(selectedFields, list.initialColumns)) {
const { fields: _ignore, ...otherQueryFields } = router.query;
router.push({
query: otherQueryFields,
});
router.push({ query: otherQueryFields });
} else {
router.push({
query: {
...router.query,
fields: selectedFields.join(','),
},
});
router.push({ query: { ...router.query, fields: selectedFields.join(',') } });
}
};
const fields: { value: string; label: string; isDisabled: boolean }[] = [];
Expand Down Expand Up @@ -91,9 +84,7 @@ export function FieldSelection({
setNewSelectedFields(options.map(x => x.value));
}}
isMulti
value={fields.filter(option => {
return selectedFields.has(option.value);
})}
value={fields.filter(option => selectedFields.has(option.value))}
options={fields}
components={fieldSelectionOptionsComponents}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,8 @@ import { useList } from '../../../../admin-ui/context';
import { useRouter } from '../../../../admin-ui/router';

type State =
| {
kind: 'selecting-field';
}
| {
kind: 'filter-value';
fieldPath: string;
filterType: string;
filterValue: JSONValue;
};
| { kind: 'selecting-field' }
| { kind: 'filter-value'; fieldPath: string; filterType: string; filterValue: JSONValue };

const fieldSelectComponents: ComponentProps<typeof Options>['components'] = {
Option: ({ children, ...props }) => {
Expand All @@ -50,14 +43,7 @@ const fieldSelectComponents: ComponentProps<typeof Options>['components'] = {
export function FilterAdd({ listKey }: { listKey: string }) {
const { isOpen, setOpen, trigger, dialog, arrow } = usePopover({
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
});

return (
Expand Down Expand Up @@ -155,9 +141,7 @@ function FilterAddPopoverContent({ onClose, listKey }: { onClose: () => void; li
<button
type="button"
onClick={() => {
setState({
kind: 'selecting-field',
});
setState({ kind: 'selecting-field' });
}}
css={{
border: 0,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,7 @@ function FilterPill({ filter, field }: { filter: Filter; field: FieldMeta }) {
const router = useRouter();
const { isOpen, setOpen, trigger, dialog, arrow } = usePopover({
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
});
// doing this because returning a string from Label will be VERY common
// but https://github.com/microsoft/TypeScript/issues/21699 isn't resolved yet
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,7 @@ export function SortSelection({ list }: { list: ListMeta }) {
const sort = useSort(list);
const { isOpen, setOpen, trigger, dialog, arrow } = usePopover({
placement: 'bottom',
modifiers: [
{
name: 'offset',
options: {
offset: [0, 8],
},
},
],
modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
});

return (
Expand Down Expand Up @@ -81,22 +74,13 @@ function SortSelectionPopoverContent({ onClose, list }: { onClose: () => void; l
</div>
<Divider />
<Options
value={
sort
? {
label: list.fields[sort.field].label,
value: sort.field,
}
: noFieldOption
}
value={sort ? { label: list.fields[sort.field].label, value: sort.field } : noFieldOption}
components={fieldSelectionOptionsComponents}
onChange={newVal => {
const fieldPath: string = (newVal as any).value;
if (fieldPath === noFieldOption.value) {
const { sortBy, ...restOfQuery } = router.query;
router.push({
query: restOfQuery,
});
router.push({ query: restOfQuery });
} else {
router.push({
query: {
Expand All @@ -113,10 +97,7 @@ function SortSelectionPopoverContent({ onClose, list }: { onClose: () => void; l
}}
options={Object.keys(list.fields)
.filter(fieldPath => list.fields[fieldPath].isOrderable)
.map(fieldPath => ({
label: list.fields[fieldPath].label,
value: fieldPath,
}))
.map(fieldPath => ({ label: list.fields[fieldPath].label, value: fieldPath }))
.concat(noFieldOption)}
/>
</Stack>
Expand Down
Loading

0 comments on commit 9c5991f

Please sign in to comment.