mirror of
https://github.com/wassname/talk.git
synced 2026-09-11 12:51:33 +08:00
[CORL-392] add settings config for story configuration on advanced panel (#2499)
* add settings config for story configuration on advanced panel * include external link in proxy description * update copy * update copy * fix lints * update snap
This commit is contained in:
Tessa Thornton
@@ -7,6 +7,7 @@ import CommentStreamLiveUpdatesContainer from "./CommentStreamLiveUpdatesContain
|
||||
import CustomCSSConfigContainer from "./CustomCSSConfigContainer";
|
||||
import EmbedCodeContainer from "./EmbedCodeContainer";
|
||||
import PermittedDomainsConfigContainer from "./PermittedDomainsConfigContainer";
|
||||
import StoryCreationConfigContainer from "./StoryCreationConfigContainer";
|
||||
|
||||
interface Props {
|
||||
disabled: boolean;
|
||||
@@ -14,7 +15,8 @@ interface Props {
|
||||
PropTypesOf<typeof PermittedDomainsConfigContainer>["settings"] &
|
||||
PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settings"] &
|
||||
PropTypesOf<typeof CommentStreamLiveUpdatesContainer>["settingsReadOnly"] &
|
||||
PropTypesOf<typeof EmbedCodeContainer>["settings"];
|
||||
PropTypesOf<typeof EmbedCodeContainer>["settings"] &
|
||||
PropTypesOf<typeof StoryCreationConfigContainer>["settings"];
|
||||
onInitValues: (values: any) => void;
|
||||
}
|
||||
|
||||
@@ -41,6 +43,11 @@ const AdvancedConfig: FunctionComponent<Props> = ({
|
||||
settings={settings}
|
||||
onInitValues={onInitValues}
|
||||
/>
|
||||
<StoryCreationConfigContainer
|
||||
disabled={disabled}
|
||||
settings={settings}
|
||||
onInitValues={onInitValues}
|
||||
/>
|
||||
</HorizontalGutter>
|
||||
);
|
||||
|
||||
|
||||
@@ -50,6 +50,7 @@ const enhanced = withFragmentContainer<Props>({
|
||||
...PermittedDomainsConfigContainer_settings
|
||||
...CommentStreamLiveUpdatesContainer_settings
|
||||
...CommentStreamLiveUpdatesContainer_settingsReadOnly
|
||||
...StoryCreationConfigContainer_settings
|
||||
}
|
||||
`,
|
||||
})(AdvancedConfigContainer);
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
import { Localized } from "fluent-react/compat";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { Field } from "react-final-form";
|
||||
|
||||
import { ValidationMessage } from "coral-framework/lib/form";
|
||||
import { ExternalLink } from "coral-framework/lib/i18n/components";
|
||||
import { validateURL } from "coral-framework/lib/validation";
|
||||
import {
|
||||
FormField,
|
||||
HorizontalGutter,
|
||||
InputLabel,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "coral-ui/components";
|
||||
import OnOffField from "../../OnOffField";
|
||||
|
||||
import Header from "../../Header";
|
||||
|
||||
interface Props {
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
const StoryCreationConfig: FunctionComponent<Props> = ({ disabled }) => (
|
||||
<HorizontalGutter size="double">
|
||||
<HorizontalGutter size="full">
|
||||
<Localized id="configure-advanced-stories">
|
||||
<Header>Story Creation</Header>
|
||||
</Localized>
|
||||
<Localized id="configure-advanced-stories-explanation">
|
||||
<Typography variant="detail">Details</Typography>
|
||||
</Localized>
|
||||
</HorizontalGutter>
|
||||
<HorizontalGutter size="double">
|
||||
<FormField>
|
||||
<HorizontalGutter size="full">
|
||||
<Localized id="configure-advanced-stories-lazy">
|
||||
<InputLabel>Lazy story creation</InputLabel>
|
||||
</Localized>
|
||||
<Localized id="configure-advanced-stories-lazy-detail">
|
||||
<Typography variant="detail">Details</Typography>
|
||||
</Localized>
|
||||
<OnOffField invert name="stories.disableLazy" disabled={disabled} />
|
||||
</HorizontalGutter>
|
||||
</FormField>
|
||||
<FormField>
|
||||
<HorizontalGutter size="full">
|
||||
<Localized id="configure-advanced-stories-scraping">
|
||||
<InputLabel>Story scraping</InputLabel>
|
||||
</Localized>
|
||||
<Localized id="configure-advanced-stories-scraping-detail">
|
||||
<Typography variant="detail">Details</Typography>
|
||||
</Localized>
|
||||
<OnOffField name="stories.scraping.enabled" disabled={disabled} />
|
||||
</HorizontalGutter>
|
||||
</FormField>
|
||||
<FormField>
|
||||
<HorizontalGutter size="full">
|
||||
<Localized id="configure-advanced-stories-proxy">
|
||||
<InputLabel htmlFor="configure-advanced-stories-proxy-url">
|
||||
Scraper proxy URL
|
||||
</InputLabel>
|
||||
</Localized>
|
||||
<Localized
|
||||
id="configure-advanced-stories-proxy-detail"
|
||||
externalLink={
|
||||
<ExternalLink href="https://www.npmjs.com/package/proxy-agent" />
|
||||
}
|
||||
>
|
||||
<Typography variant="detail">
|
||||
When specified, allows scraping requests to use the provided
|
||||
proxy. All requests will then be passed through the appropriote
|
||||
proxy as parsed by the npm proxy-agent package.
|
||||
</Typography>
|
||||
</Localized>
|
||||
<Field name="stories.scraping.proxyURL" validate={validateURL}>
|
||||
{({ input, meta }) => (
|
||||
<>
|
||||
<TextField
|
||||
id="configure-advanced-stories-proxy-url"
|
||||
disabled={disabled}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
{...input}
|
||||
/>
|
||||
<ValidationMessage meta={meta} />
|
||||
</>
|
||||
)}
|
||||
</Field>
|
||||
</HorizontalGutter>
|
||||
</FormField>
|
||||
</HorizontalGutter>
|
||||
</HorizontalGutter>
|
||||
);
|
||||
|
||||
export default StoryCreationConfig;
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
import React from "react";
|
||||
import { graphql } from "react-relay";
|
||||
|
||||
import { StoryCreationConfigContainer_settings as SettingsData } from "coral-admin/__generated__/StoryCreationConfigContainer_settings.graphql";
|
||||
import { withFragmentContainer } from "coral-framework/lib/relay";
|
||||
|
||||
import StoryCreationConfig from "./StoryCreationConfig";
|
||||
|
||||
interface Props {
|
||||
settings: SettingsData;
|
||||
onInitValues: (values: SettingsData) => void;
|
||||
disabled: boolean;
|
||||
}
|
||||
|
||||
class StoryCreationConfigContainer extends React.Component<Props> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
props.onInitValues(props.settings);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const { disabled } = this.props;
|
||||
return <StoryCreationConfig disabled={disabled} />;
|
||||
}
|
||||
}
|
||||
|
||||
const enhanced = withFragmentContainer<Props>({
|
||||
settings: graphql`
|
||||
fragment StoryCreationConfigContainer_settings on Settings {
|
||||
stories {
|
||||
scraping {
|
||||
enabled
|
||||
proxyURL
|
||||
}
|
||||
disableLazy
|
||||
}
|
||||
}
|
||||
`,
|
||||
})(StoryCreationConfigContainer);
|
||||
|
||||
export default enhanced;
|
||||
@@ -329,6 +329,214 @@ https://domain.com).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-double"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<h1
|
||||
className="Box-root Typography-root Typography-heading1 Typography-colorTextPrimary Header-root"
|
||||
>
|
||||
Story creation
|
||||
</h1>
|
||||
<p
|
||||
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
|
||||
>
|
||||
Advanced settings for how stories are created within Coral.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-double"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<label
|
||||
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
|
||||
>
|
||||
Lazy story creation
|
||||
</label>
|
||||
<p
|
||||
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
|
||||
>
|
||||
Enable stories to be automatically created when they are published from your CMS.
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<input
|
||||
checked={true}
|
||||
className="RadioButton-input"
|
||||
disabled={false}
|
||||
id="stories.disableLazy-true"
|
||||
name="stories.disableLazy"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="radio"
|
||||
value={false}
|
||||
/>
|
||||
<label
|
||||
className="RadioButton-label"
|
||||
htmlFor="stories.disableLazy-true"
|
||||
>
|
||||
<span>
|
||||
On
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="RadioButton-input"
|
||||
disabled={false}
|
||||
id="stories.disableLazy-false"
|
||||
name="stories.disableLazy"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="radio"
|
||||
value={true}
|
||||
/>
|
||||
<label
|
||||
className="RadioButton-label"
|
||||
htmlFor="stories.disableLazy-false"
|
||||
>
|
||||
<span>
|
||||
Off
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<label
|
||||
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
|
||||
>
|
||||
Story scraping
|
||||
</label>
|
||||
<p
|
||||
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
|
||||
>
|
||||
Enable story metadata to be automatically scraped when they are published from your CMS.
|
||||
</p>
|
||||
<div>
|
||||
<div
|
||||
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<input
|
||||
checked={true}
|
||||
className="RadioButton-input"
|
||||
disabled={false}
|
||||
id="stories.scraping.enabled-true"
|
||||
name="stories.scraping.enabled"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="radio"
|
||||
value={true}
|
||||
/>
|
||||
<label
|
||||
className="RadioButton-label"
|
||||
htmlFor="stories.scraping.enabled-true"
|
||||
>
|
||||
<span>
|
||||
On
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root Flex-root RadioButton-root Flex-flex Flex-alignCenter"
|
||||
>
|
||||
<input
|
||||
checked={false}
|
||||
className="RadioButton-input"
|
||||
disabled={false}
|
||||
id="stories.scraping.enabled-false"
|
||||
name="stories.scraping.enabled"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="radio"
|
||||
value={false}
|
||||
/>
|
||||
<label
|
||||
className="RadioButton-label"
|
||||
htmlFor="stories.scraping.enabled-false"
|
||||
>
|
||||
<span>
|
||||
Off
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root FormField-root HorizontalGutter-half"
|
||||
>
|
||||
<div
|
||||
className="Box-root HorizontalGutter-root HorizontalGutter-full"
|
||||
>
|
||||
<label
|
||||
className="Box-root Typography-root Typography-inputLabel Typography-colorTextPrimary InputLabel-root"
|
||||
htmlFor="configure-advanced-stories-proxy-url"
|
||||
>
|
||||
Scraper proxy url
|
||||
</label>
|
||||
<p
|
||||
className="Box-root Typography-root Typography-detail Typography-colorTextPrimary"
|
||||
>
|
||||
When specified, allows scraping requests to use the provided
|
||||
proxy. All requests will then be passed through the appropriote
|
||||
proxy as parsed by the
|
||||
<a
|
||||
className="ExternalLink-root"
|
||||
href="https://www.npmjs.com/package/proxy-agent"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
npm proxy-agent
|
||||
</a>
|
||||
package.
|
||||
</p>
|
||||
<div
|
||||
className="TextField-root"
|
||||
>
|
||||
<input
|
||||
autoCapitalize="off"
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
className="TextField-input TextField-colorRegular"
|
||||
disabled={false}
|
||||
id="configure-advanced-stories-proxy-url"
|
||||
name="stories.scraping.proxyURL"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
placeholder=""
|
||||
spellCheck={false}
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -141,6 +141,12 @@ export const settings = createFixture<GQLSettings>({
|
||||
},
|
||||
},
|
||||
},
|
||||
stories: {
|
||||
scraping: {
|
||||
enabled: true,
|
||||
},
|
||||
disableLazy: false,
|
||||
},
|
||||
accountFeatures: {
|
||||
downloadComments: true,
|
||||
changeUsername: true,
|
||||
|
||||
Reference in New Issue
Block a user