Skip to content

Url preview block upgrade #1

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.

Sign up for GitHub

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

Open
rwaldron wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Url preview block upgrade #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8df4ba6
URL Preview Block: simplify preview parsing and url construction
rwaldron Mar 27, 2020
edbd540
URL Preview Block: add Specified Table & Field settings feature
rwaldron Mar 27, 2020
081f4cc
URL Preview Block: Use a SelectButtonsSynced component to let the use…
rwaldron Mar 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 98 additions & 0 deletions frontend/SettingsForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import {Field, FieldType, Table} from '@airtable/blocks/models';
import {
Box,
Button,
FieldPickerSynced,
FormField,
Heading,
SelectButtonsSynced,
TablePickerSynced,
} from '@airtable/blocks/ui';

import {ConfigKeys, IsEnforced} from './settings';

function SettingsForm({setIsSettingsVisible, settings}) {
return (
<Box
flex="1 0 auto"
display="flex"
flexDirection="column"
width="300px"
backgroundColor="white"
maxHeight="100vh"
>
<Box
flex="auto"
display="flex"
flexDirection="column"
minHeight="0"
padding={3}
overflowY="auto"
>
<Heading marginBottom={3}>Settings</Heading>
<FormField label="Table">
<TablePickerSynced globalConfigKey={ConfigKeys.TABLE_ID} />
</FormField>
{settings.table && (
<Fragment>
<FormField
label="URL Field"
description="Must have field type: TEXT or URL"
>
<FieldPickerSynced
table={settings.table}
globalConfigKey={ConfigKeys.URL_FIELD_ID}
allowedTypes={[
FieldType.SINGLE_LINE_TEXT,
FieldType.TEXT,
FieldType.URL,
]}
/>
</FormField>
</Fragment>
)}
<FormField
label="Enforce Table & URL Field Settings?"
description={`URL Previews will be shown for ${
settings.isEnforced === IsEnforced.YES
? 'only the specified URL Field in the specified Table'
: 'all valid fields in all available tables'
}.`}
>
<SelectButtonsSynced
options={[
{label: 'Yes', value: IsEnforced.YES},
{label: 'No', value: IsEnforced.NO},
]}
globalConfigKey={ConfigKeys.IS_ENFORCED}
Copy link

@jugglinmike jugglinmike Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I load the Settings page for the first time, neither button for "Enforce Table & URL Field Settings?" is enabled.

Copy link
Author

@rwaldron rwaldron Apr 1, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like a bug in SelectButtonsSynced, which is supposed to sync the value via the provided globalConfigKey

/>
</FormField>
</Box>
<Box
flex="none"
display="flex"
justifyContent="flex-end"
paddingY={3}
marginX={3}
borderTop="thick"
>
<Button variant="primary" onClick={() => setIsSettingsVisible(false)}>
Done
</Button>
</Box>
</Box>
);
}

SettingsForm.propTypes = {
setIsSettingsVisible: PropTypes.func.isRequired,
settings: PropTypes.shape({
isEnforced: PropTypes.bool,
table: PropTypes.instanceOf(Table),
urlField: PropTypes.instanceOf(Field),
}).isRequired,
};

export default SettingsForm;
Loading