mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-15 09:22:43 +03:00
add quickstart content to console remote schema and event triggers pages (#1630)
This commit is contained in:
surendran82
Rikin Kachhia
parent
a1089c1ec5
commit
6a4a33f304
@ -515,6 +515,10 @@ input {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.add_mar_left_small {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.add_mar_small {
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
@ -567,6 +571,10 @@ code {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.add_pad_top {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.add_padd_bottom {
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
@ -601,7 +609,8 @@ code {
|
||||
background-color: #59A21C;
|
||||
border: 1px solid #539719;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -615,7 +624,8 @@ code {
|
||||
background-color: #AC2925;
|
||||
border: 1px solid #761c19;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -629,7 +639,8 @@ code {
|
||||
background-color: #E6E6E6;
|
||||
border: 1px solid #D7D7D7;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -643,7 +654,8 @@ code {
|
||||
background-color: #59A21C;
|
||||
border: 1px solid #539719;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -657,7 +669,8 @@ code {
|
||||
background-color: #AC2925;
|
||||
border: 1px solid #761c19;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -671,7 +684,8 @@ code {
|
||||
background-color: #E6E6E6;
|
||||
border: 1px solid #D7D7D7;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
@ -739,7 +753,8 @@ code {
|
||||
color: #606060;
|
||||
border: 1px solid #FEC53D;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
|
||||
&:hover {
|
||||
@ -749,7 +764,8 @@ code {
|
||||
|
||||
.yellow_button1 {
|
||||
padding: 5px 10px !important;
|
||||
font-size: 12px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -764,8 +780,11 @@ code {
|
||||
color: #292929;
|
||||
border: 1px solid #292929;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background-color: #efefef;
|
||||
@ -783,7 +802,8 @@ code {
|
||||
color: #000;
|
||||
border: 1px solid #c9302c;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@ -797,7 +817,8 @@ code {
|
||||
color: #000;
|
||||
border: 1px solid #FEC53D;
|
||||
padding: 5px 10px;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
|
||||
&:hover {
|
||||
@ -818,7 +839,8 @@ code {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
color: #292929;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border: 1px solid #292929;
|
||||
margin-right: 15px;
|
||||
padding: 5px 10px;
|
||||
@ -862,49 +884,92 @@ code {
|
||||
}
|
||||
}
|
||||
|
||||
/*Newly added for remote schema page*/
|
||||
.headerText {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.addPaddRight {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.subHeaderText {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.descriptionText {
|
||||
font-size: 15px;
|
||||
line-height: 1.2;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.fontWeightBold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.noPadd {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
/*Newly added for remote schema page*/
|
||||
|
||||
.heading_text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px
|
||||
}
|
||||
|
||||
.editable_heading_text
|
||||
{
|
||||
.editable_heading_text {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 20px;
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
i {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.editable_heading_textbox
|
||||
{
|
||||
|
||||
.editable_heading_textbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
|
||||
input {
|
||||
width: 30%;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
.editable_heading_action
|
||||
{
|
||||
|
||||
.editable_heading_action {
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
.editable_heading_action_item
|
||||
{
|
||||
|
||||
.editable_heading_action_item {
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
text-decoration: underline;
|
||||
@ -931,7 +996,8 @@ code {
|
||||
padding: 3px 8px;
|
||||
background-color: #27AE60;
|
||||
border: 1px solid #27AE60;
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
|
||||
|
||||
@ -6,7 +6,8 @@ class TextAreaWithCopy extends React.Component {
|
||||
copyToClip(type, id) {
|
||||
let text = '';
|
||||
if (this.props.copyText.length > 0) {
|
||||
text = window.sqlFormatter
|
||||
|
||||
text = window.sqlFormatter && this.props.textLanguage && this.props.textLanguage.toLowerCase() === 'sql'
|
||||
? window.sqlFormatter.format(this.props.copyText, {
|
||||
language: this.props.textLanguage,
|
||||
})
|
||||
@ -41,13 +42,13 @@ class TextAreaWithCopy extends React.Component {
|
||||
render() {
|
||||
const style = require('./TextAreaWithCopy.scss');
|
||||
|
||||
const { copyText } = this.props;
|
||||
const { copyText, toolTipClass } = this.props;
|
||||
|
||||
return (
|
||||
<div className={`${style.codeBlockCustom}`}>
|
||||
<div className={`${style.copyGenerated}`}>
|
||||
<div className={`${style.copyTooltip}`}>
|
||||
<span className={style.tooltiptext} id="copyCustomFunctionSQL">
|
||||
<span className={toolTipClass ? toolTipClass : style.tooltiptext} id="copyCustomFunctionSQL">
|
||||
Copy
|
||||
</span>
|
||||
<i
|
||||
@ -66,7 +67,7 @@ class TextAreaWithCopy extends React.Component {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{window && window.sqlFormatter && window.hljs ? (
|
||||
{window && window.sqlFormatter && window.hljs && this.props.textLanguage && this.props.textLanguage.toLowerCase() === 'sql' ? (
|
||||
<pre>
|
||||
<code
|
||||
className={style.formattedCode}
|
||||
@ -81,7 +82,7 @@ class TextAreaWithCopy extends React.Component {
|
||||
/>
|
||||
</pre>
|
||||
) : (
|
||||
<pre>
|
||||
<pre className={style.schemaPreWrapper}>
|
||||
<code className={style.formattedCode}>{copyText}</code>
|
||||
</pre>
|
||||
)}
|
||||
@ -93,6 +94,7 @@ class TextAreaWithCopy extends React.Component {
|
||||
TextAreaWithCopy.propTypes = {
|
||||
copyText: PropTypes.string.isRequired,
|
||||
textLanguage: PropTypes.string,
|
||||
isClass: PropTypes.boolean
|
||||
};
|
||||
|
||||
export default TextAreaWithCopy;
|
||||
|
||||
@ -6,15 +6,17 @@
|
||||
.codeBlockCustom {
|
||||
/* position: relative;
|
||||
padding: 10px 20px; */
|
||||
background-color: white;
|
||||
/* background-color: white; */
|
||||
background-color: rgb(253, 249, 237);
|
||||
/* margin: 20px;
|
||||
width: 100%; */
|
||||
width: auto;
|
||||
border-radius: 5px;
|
||||
// max-height: calc(100% - 60px);
|
||||
overflow: auto;
|
||||
// overflow: auto;
|
||||
margin-top: 0px;
|
||||
// min-height: calc(100% - 60px);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.codeBlockCustom pre {
|
||||
@ -42,11 +44,17 @@
|
||||
padding: 0px 0px !important;
|
||||
}
|
||||
|
||||
.schemaPreWrapper {
|
||||
position: relative;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.copyGenerated {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
bottom: 10px;
|
||||
right: 30px;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.copyGenerated img, .copyExecution img {
|
||||
@ -67,6 +75,10 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.copyTooltip i {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.copyTooltip .tooltiptext {
|
||||
background-color: #555;
|
||||
color: #fff;
|
||||
@ -88,7 +100,7 @@
|
||||
.copyTooltip .tooltiptext::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
top: 26px;
|
||||
right: 22px;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
|
||||
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
|
||||
class EventTriggerContent extends React.Component {
|
||||
render() {
|
||||
const { styles } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.listItems + ' ' + styles.addPaddTop}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText}>
|
||||
<span className={styles.fontWeightBold}>Head to the DATA tab</span>{' '}
|
||||
and create a table, say `user`, with columns `id` and `name`
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Click on “Try it with Glitch”
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Add the Event Trigger
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
1. Click on the <span className={styles.fontWeightBold}>SHOW</span>{' '}
|
||||
button in the Glitch console and copy the URL.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
2. Create an event trigger by clicking on the{' '}
|
||||
<span className={styles.fontWeightBold}>Add</span> button at the top
|
||||
of this page.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
3. Set the name as “test-trigger”. Choose `user` table and select
|
||||
all operations. Enter the above URL as{' '}
|
||||
<span className={styles.fontWeightBold}>WEBHOOK URL</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
4. Click on the{' '}
|
||||
<span className={styles.fontWeightBold}>Add Event Trigger</span>{' '}
|
||||
button - That’s it!
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Head to the GraphiQL tab and try out the following query:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default EventTriggerContent;
|
||||
@ -0,0 +1,56 @@
|
||||
import React from 'react';
|
||||
|
||||
class RemoteSchemaContent extends React.Component {
|
||||
render() {
|
||||
const { styles } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.listItems + ' ' + styles.addPaddTop}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Click on “Try it with Glitch”
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Add the GraphQL service as a Remote Schema:
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
1. Click on the <span className={styles.fontWeightBold}>SHOW</span>{' '}
|
||||
button in the Glitch console and copy the URL.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
2. Create a remote schema by clicking the{' '}
|
||||
<span className={styles.fontWeightBold}>Add</span> button at the top
|
||||
of this page.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
3. Set the name as “Test Schema” and enter the above URL as the{' '}
|
||||
<span className={styles.fontWeightBold}>GraphQL server URL</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
4. Click on the{' '}
|
||||
<span className={styles.fontWeightBold}>Add Remote Schema</span>{' '}
|
||||
button - That’s it!
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.yellowCircle} />
|
||||
<div className={styles.descriptionText + ' ' + styles.fontWeightBold}>
|
||||
Head to the GraphiQL tab and try out the following query:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default RemoteSchemaContent;
|
||||
@ -0,0 +1,31 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
class TopicDescription extends React.Component {
|
||||
render() {
|
||||
const Rectangle = require('../CustomResolver/Landing/Rectangle.svg');
|
||||
const styles = require('../CustomResolver/CustomResolver.scss');
|
||||
const { title, imgUrl, imgAlt, description } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.subHeaderText}>
|
||||
<img className={'img-responsive'} src={Rectangle} alt={'Rectangle'} />
|
||||
{title}
|
||||
</div>
|
||||
<div className={styles.remoteSchemaImg}>
|
||||
<img className={'img-responsive'} src={imgUrl} alt={imgAlt} />
|
||||
</div>
|
||||
<div className={styles.descriptionText + ' ' + styles.wd60}>
|
||||
{description}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
TopicDescription.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
imgUrl: PropTypes.string.isRequired,
|
||||
imgAlt: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
};
|
||||
export default TopicDescription;
|
||||
143
console/src/components/Services/CommonLanding/TryItOut.js
Normal file
143
console/src/components/Services/CommonLanding/TryItOut.js
Normal file
@ -0,0 +1,143 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import PopUp from '../CustomResolver/Landing/PopUp';
|
||||
|
||||
class TryItOut extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
isPopUp: false,
|
||||
};
|
||||
}
|
||||
togglePopup() {
|
||||
this.setState({ isPopUp: !this.state.isPopUp });
|
||||
}
|
||||
render() {
|
||||
const Rectangle = require('../CustomResolver/Landing/Rectangle.svg');
|
||||
const styles = require('../CustomResolver/CustomResolver.scss');
|
||||
const glitch = require('../CustomResolver/Landing/glitch.png');
|
||||
const googleCloud = require('../CustomResolver/Landing/google_cloud.svg');
|
||||
const MicrosoftAzure = require('../CustomResolver/Landing/Microsoft_Azure_Logo.svg');
|
||||
const AWS = require('../CustomResolver/Landing/AWS.png');
|
||||
const externalLink = require('../CustomResolver/Landing/external-link.svg');
|
||||
// const { title, imgUrl, imgAlt, description} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.subHeaderText}>
|
||||
<img className={'img-responsive'} src={Rectangle} alt={'Rectangle'} />
|
||||
Try it out
|
||||
</div>
|
||||
<div className={styles.tryOutWrapper}>
|
||||
<div className={styles.boxLarge}>
|
||||
<div className={styles.logoIcon}>
|
||||
<img className={'img-responsive'} src={glitch} alt={'glitch'} />
|
||||
</div>
|
||||
<a
|
||||
href={this.props.glitchLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<button className={styles.default_button}>
|
||||
Try it with Glitch{' '}
|
||||
<img
|
||||
className={'img-responsive ' + styles.externalLinkImg}
|
||||
src={externalLink}
|
||||
alt={'externalLink'}
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
<div
|
||||
className={styles.instructionsWrapper + ' ' + styles.displayFlex}
|
||||
>
|
||||
<span
|
||||
onClick={this.togglePopup.bind(this)}
|
||||
className={styles.instructions + ' ' + styles.displayFlex}
|
||||
>
|
||||
<span>Instructions</span>
|
||||
<div className={styles.rightArrow} />
|
||||
</span>
|
||||
{this.state.isPopUp ? (
|
||||
<PopUp
|
||||
onClose={this.togglePopup.bind(this)}
|
||||
service={this.props.service}
|
||||
title={this.props.title}
|
||||
queryDefinition={this.props.queryDefinition}
|
||||
footerDescription={this.props.footerDescription}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.boxSmallWrapper}>
|
||||
<a
|
||||
href={this.props.googleCloudLink}
|
||||
target={'_blank'}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className={styles.boxSmall}>
|
||||
<div className={styles.logoIcon}>
|
||||
<img
|
||||
className={'img-responsive'}
|
||||
src={googleCloud}
|
||||
alt={'googleCloud'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={this.props.MicrosoftAzureLink}
|
||||
target={'_blank'}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className={styles.boxSmall}>
|
||||
<div className={styles.logoIcon}>
|
||||
<img
|
||||
className={'img-responsive'}
|
||||
src={MicrosoftAzure}
|
||||
alt={'Microsoft Azure'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href={this.props.awsLink}
|
||||
target={'_blank'}
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className={styles.boxSmall}>
|
||||
<div className={styles.logoIcon}>
|
||||
<img
|
||||
className={'img-responsive ' + styles.imgAws}
|
||||
src={AWS}
|
||||
alt={'AWS'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div className={styles.instructions}>
|
||||
<a
|
||||
href={this.props.adMoreLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span>And many more</span> <div className={styles.rightArrow} />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
TryItOut.propTypes = {
|
||||
service: PropTypes.string.isRequired,
|
||||
queryDefinition: PropTypes.string.isRequired,
|
||||
glitchLink: PropTypes.string.isRequired,
|
||||
googleCloudLink: PropTypes.string.isRequired,
|
||||
MicrosoftAzureLink: PropTypes.string.isRequired,
|
||||
awsLink: PropTypes.string.isRequired,
|
||||
adMoreLink: PropTypes.string.isRequired,
|
||||
// imgUrl: PropTypes.string.isRequired,
|
||||
// imgAlt: PropTypes.string.isRequired,
|
||||
// description: PropTypes.string.isRequired,
|
||||
};
|
||||
export default TryItOut;
|
||||
@ -8,6 +8,10 @@
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.wd60 {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.addPaddTop {
|
||||
padding-top: 20px;
|
||||
}
|
||||
@ -57,6 +61,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
.iconWrapper{
|
||||
padding: 20px 0;
|
||||
|
||||
.icon {
|
||||
padding-right: 20px;
|
||||
|
||||
img {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.CommonWrapper {
|
||||
.check_box {
|
||||
margin-bottom: 20px;
|
||||
@ -151,4 +167,155 @@
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.remoteSchemaImg {
|
||||
padding: 12px 0;
|
||||
padding-bottom: 30px;
|
||||
|
||||
img {
|
||||
width: 700px;
|
||||
max-width: 700px;
|
||||
}
|
||||
}
|
||||
|
||||
.externalLinkImg {
|
||||
margin-left: 7px;
|
||||
width: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
color: #909090;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a{
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #505050;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.displayFlex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-left: 8px solid #909090;
|
||||
margin-left: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instructions:hover {
|
||||
color: #505050;
|
||||
|
||||
.rightArrow {
|
||||
border-left: 8px solid #505050;
|
||||
}
|
||||
}
|
||||
|
||||
.tryOutWrapper {
|
||||
padding: 30px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.boxLarge {
|
||||
width: 225px;
|
||||
height: 200px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
|
||||
background-color: #ffffff;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
.logoIcon {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
|
||||
img {
|
||||
width: 76px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.default_button {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.instructionsWrapper {
|
||||
margin-top: 20px;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
position: relative;
|
||||
|
||||
.instructions {
|
||||
padding: 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.instructionsWrapper:hover {
|
||||
.instructions {
|
||||
color: #505050
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
border-left: 8px solid #505050;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boxSmallWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.boxSmall {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);
|
||||
background-color: #ffffff;
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.imgAws {
|
||||
width: 59px;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
.boxSmall {
|
||||
transition: all 0.3s ease-out;
|
||||
border: 1px solid #909090;
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listItems {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
BIN
console/src/components/Services/CustomResolver/Landing/AWS.png
Executable file
BIN
console/src/components/Services/CustomResolver/Landing/AWS.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
@ -5,14 +5,18 @@ import { push } from 'react-router-redux';
|
||||
import { appPrefix, pageTitle } from '../constants';
|
||||
import globals from '../../../../Globals';
|
||||
import Button from '../../../Common/Button/Button';
|
||||
import TopicDescription from '../../CommonLanding/TopicDescription';
|
||||
import TryItOut from '../../CommonLanding/TryItOut';
|
||||
|
||||
class CustomResolver extends React.Component {
|
||||
render() {
|
||||
const styles = require('../CustomResolver.scss');
|
||||
// const landingImage = require('./schema-stitching-color.png');
|
||||
// const landingImage = 'https://storage.googleapis.com/hasura-graphql-engine/console/assets/schema-stitching-diagram.png';
|
||||
// const node = require('./Node.svg');
|
||||
// const Rectangle = require('./Rectangle.svg');
|
||||
|
||||
const { dispatch, migrationMode } = this.props;
|
||||
const { dispatch, migrationMode, customResolverList } = this.props;
|
||||
|
||||
const showFirstSection = customResolverList.resolvers.length ? false : true;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -23,23 +27,54 @@ class CustomResolver extends React.Component {
|
||||
<div className={styles.padd_left}>
|
||||
<Helmet title={`${pageTitle}s | Hasura`} />
|
||||
<div>
|
||||
<h2 className={`${styles.heading_text} ${styles.inline_block}`}>
|
||||
Remote Schemas
|
||||
</h2>
|
||||
{migrationMode ? (
|
||||
<Button
|
||||
data-test="data-create-remote-schemas"
|
||||
color="yellow"
|
||||
size="sm"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
|
||||
}}
|
||||
<div className={styles.display_flex}>
|
||||
<h2
|
||||
className={`${styles.headerText} ${styles.addPaddRight} ${
|
||||
styles.inline_block
|
||||
}`}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
) : null}
|
||||
Remote Schemas
|
||||
</h2>
|
||||
{migrationMode ? (
|
||||
<Button
|
||||
data-test="data-create-remote-schemas"
|
||||
color="yellow"
|
||||
size="sm"
|
||||
onClick={e => {
|
||||
e.preventDefault();
|
||||
dispatch(
|
||||
push(`${globals.urlPrefix}${appPrefix}/manage/add`)
|
||||
);
|
||||
}}
|
||||
>
|
||||
Add
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<hr />
|
||||
{showFirstSection ? (
|
||||
<div>
|
||||
<TopicDescription
|
||||
title="What are Remote Schemas?"
|
||||
imgUrl="https://storage.googleapis.com/hasura-graphql-engine/console/assets/remote_schema.png"
|
||||
imgAlt="Remote Schema"
|
||||
description="Remote schemas are external GraphQL services which can be merged with Hasura to provide a unified GraphQL API. Think of it like automated schema stitching. All you need to do is build a GraphQL service and then provide its HTTP endpoint to Hasura. Your GraphQL service can be written in any language or framework."
|
||||
/>
|
||||
<hr className={styles.clear_fix} />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<TryItOut
|
||||
service="remoteSchema"
|
||||
queryDefinition="query { hello }"
|
||||
title="Steps to deploy an example GraphQL service to Glitch"
|
||||
footerDescription="You just added a remote schema and queried it!"
|
||||
glitchLink="https://glitch.com/edit/#!/hasura-sample-remote-schema-4"
|
||||
googleCloudLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/remote-schemas/google-cloud-functions/nodejs"
|
||||
MicrosoftAzureLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/remote-schemas/azure-functions/nodejs"
|
||||
awsLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/remote-schemas/aws-lambda/nodejs"
|
||||
adMoreLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/remote-schemas/"
|
||||
/>
|
||||
</div>
|
||||
{/*
|
||||
<div className={styles.resolverContent}>
|
||||
@ -78,6 +113,7 @@ class CustomResolver extends React.Component {
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
migrationMode: state.main.migrationMode,
|
||||
customResolverList: state.customResolverData.listData,
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="51.643" height="40" viewBox="0 0 51.643 40">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#0089d6}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="Microsoft_Azure_Logo" transform="translate(626.281 -331.964)">
|
||||
<g id="layer1-1" transform="translate(-626.281 331.964)">
|
||||
<path id="path21" d="M56.126 52.467A8244.436 8244.436 0 0 0 68.3 50.311l.115-.024-6.264-7.451c-3.445-4.1-6.264-7.467-6.264-7.486 0-.037 6.468-17.848 6.5-17.912.012-.021 4.414 7.578 10.67 18.422L83.8 54.46l.082.143H44.066zm-23.892-2.273c0-.01 2.951-5.134 6.559-11.386l6.559-11.367L53 21.027c4.2-3.528 7.655-6.419 7.669-6.424a1.337 1.337 0 0 1-.123.309l-8.3 17.8L44.09 50.2l-5.928.007c-3.262.003-5.928-.007-5.928-.013z" class="cls-1" transform="translate(-32.234 -14.602)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 835 B |
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="590.96881" height="159.0246" id="svg3030">
|
||||
<defs id="defs3032"/>
|
||||
<g transform="translate(-115.94417,-501.42131)" id="layer1">
|
||||
<path d="m 414.48046,501.42155 c -0.40947,0.005 -0.82364,0.10273 -1.18907,0.31708 -0.72963,0.42837 -1.18908,1.21508 -1.18908,2.06106 l 0,60.64254 c 0,0.59586 -0.27746,1.12831 -0.79271,1.42714 -0.51655,0.29958 -1.14689,0.29958 -1.6647,0 l -9.90893,-5.70755 c -1.47635,-0.85131 -3.27961,-0.8508 -4.75629,0 L 355.42323,582.992 c -1.47889,0.85309 -2.37815,2.49432 -2.37815,4.20126 l 0,45.66036 c 0,1.70566 0.90053,3.2675 2.37815,4.12211 l 39.55645,22.83018 c 1.47889,0.85334 3.2774,0.85334 4.75629,0 l 39.55645,-22.83018 c 1.47762,-0.85461 2.37815,-2.41645 2.37815,-4.12211 l 0,-113.83381 c 0,-1.73162 -0.94492,-3.35667 -2.45742,-4.20139 l -23.54362,-13.15906 c -0.36972,-0.20623 -0.7796,-0.24225 -1.18907,-0.23768 z M 160.0191,558.4176 c -0.75434,0.0304 -1.46304,0.16234 -2.14033,0.55502 l -39.55646,22.83018 c -1.47394,0.85207 -2.37814,2.40402 -2.37814,4.12212 l 0.0791,61.2767 c 0,0.85233 0.43971,1.64377 1.18908,2.06131 0.73449,0.43961 1.64613,0.43961 2.37814,0 l 23.46435,-13.4764 c 1.48635,-0.88302 2.45741,-2.41898 2.45741,-4.12211 l 0,-28.61687 c 0,-1.70694 0.89794,-3.27359 2.37815,-4.12212 l 9.9882,-5.78668 c 0.74548,-0.43099 1.54581,-0.63418 2.37814,-0.63418 0.81525,0 1.65329,0.20294 2.37815,0.63418 l 9.9882,5.78668 c 1.48016,0.84853 2.37814,2.41518 2.37814,4.12212 l 0,28.61687 c 0,1.70313 0.98076,3.24899 2.45742,4.12211 l 23.46435,13.4764 c 0.73691,0.43961 1.64727,0.43961 2.37814,0 0.72836,-0.41754 1.18907,-1.20898 1.18907,-2.06131 l 0.0791,-61.2767 c 0,-1.7181 -0.89418,-3.27005 -2.37814,-4.12212 L 162.6348,558.97262 c -0.66905,-0.39268 -1.38089,-0.52408 -2.14033,-0.55502 l -0.47563,0 z m 355.45319,0.55502 c -0.8264,-10e-4 -1.63617,0.20801 -2.37815,0.63417 l -39.55645,22.83018 c -1.47762,0.85334 -2.37814,2.41518 -2.37814,4.12212 l 0,45.66035 c 0,1.71683 0.96711,3.2736 2.45741,4.12212 l 39.23937,22.35455 c 1.44908,0.82747 3.21842,0.88936 4.67701,0.0786 l 23.78144,-13.23846 c 0.75466,-0.41856 1.26517,-1.20036 1.26834,-2.06106 0.005,-0.86095 -0.44392,-1.63261 -1.18907,-2.06106 l -39.79427,-22.83018 c -0.74515,-0.42489 -1.26834,-1.28584 -1.26834,-2.14045 l 0,-14.26886 c 0,-0.85309 0.52953,-1.6349 1.26834,-2.06081 l 12.36635,-7.13468 c 0.73564,-0.42566 1.63933,-0.42566 2.37814,0 l 12.36635,7.13468 c 0.73881,0.42591 1.18907,1.20772 1.18907,2.06081 l 0,11.2568 c 0,0.85435 0.45026,1.63489 1.18907,2.0608 0.74198,0.42718 1.63934,0.42895 2.37815,0 l 23.70216,-13.79298 c 1.47128,-0.85461 2.37814,-2.42051 2.37814,-4.12211 l 0,-11.01886 c 0,-1.70187 -0.90369,-3.26751 -2.37814,-4.12212 l -39.31864,-22.83018 c -0.74041,-0.4292 -1.55174,-0.63315 -2.37814,-0.63417 z m -118.27301,34.08673 c 0.20623,0 0.44899,0.0507 0.63417,0.15727 l 13.55542,7.848 c 0.36782,0.21308 0.63417,0.60551 0.63417,1.0304 l 0,15.69575 c 0,0.42616 -0.26381,0.81884 -0.63417,1.03066 l -13.55542,7.84774 c -0.36909,0.21055 -0.81998,0.21055 -1.18907,0 l -13.55542,-7.84774 c -0.36909,-0.21308 -0.63417,-0.6045 -0.63417,-1.03066 l 0,-15.69575 c 0,-0.42489 0.26635,-0.8163 0.63417,-1.0304 l 13.55542,-7.84673 c 0.18518,-0.10654 0.34864,-0.15727 0.5549,-0.15727 z" id="path22" style="fill:#404137;fill-opacity:1;fill-rule:evenodd;stroke:none"/>
|
||||
<path d="m 633.98311,557.86282 c -1.37141,0 -2.70474,0.2836 -3.8843,0.95126 l -37.33686,21.56183 c -2.41619,1.39112 -3.8843,4.02065 -3.8843,6.81735 l 0,43.04452 c 0,2.79518 1.46811,5.42166 3.8843,6.8171 l 9.75039,5.6284 c 4.73726,2.33476 6.48441,2.29874 8.64059,2.29874 7.01394,0 11.01873,-4.2558 11.01873,-11.65278 l 0,-42.48949 c 0,-0.60069 -0.52002,-1.03066 -1.1098,-1.03066 l -4.67701,0 c -0.5993,0 -1.10981,0.42997 -1.10981,1.03066 l 0,42.48949 c 0,3.27867 -3.41501,6.57586 -8.95767,3.80503 l -10.14674,-5.94523 c -0.35831,-0.19532 -0.63418,-0.54006 -0.63418,-0.95126 l 0,-43.04452 c 0,-0.40866 0.2727,-0.82366 0.63418,-1.0304 l 37.25758,-21.48269 c 0.34879,-0.2004 0.76417,-0.2004 1.1098,0 l 37.25758,21.48269 c 0.35514,0.21308 0.63417,0.60931 0.63417,1.0304 l 0,43.04452 c 0,0.4112 -0.20623,0.83229 -0.5549,1.03041 l -37.33685,21.48269 c -0.32026,0.19025 -0.76101,0.19025 -1.1098,0 l -9.59185,-5.70755 c -0.28538,-0.16742 -0.67539,-0.15474 -0.95126,0 -2.64766,1.50096 -3.14549,1.67548 -5.62827,2.53669 -0.61197,0.21308 -1.54104,0.54463 0.31709,1.58543 l 12.52489,7.37212 c 1.19224,0.68997 2.52083,1.0304 3.8843,1.0304 1.38249,0 2.69206,-0.34043 3.8843,-1.0304 l 37.33685,-21.48269 c 2.4162,-1.40533 3.8843,-4.02192 3.8843,-6.8171 l 0,-43.04452 c 0,-2.7967 -1.4681,-5.42039 -3.8843,-6.81735 l -37.33685,-21.56183 c -1.17005,-0.66766 -2.51289,-0.95126 -3.8843,-0.95126 z M 278.847,558.73468 c -0.82427,0 -1.63996,0.20801 -2.37814,0.63417 l -39.55645,22.75104 c -1.47889,0.85232 -2.37815,2.49584 -2.37815,4.20126 l 0,45.66035 c 0,1.70745 0.90022,3.26802 2.37815,4.12212 l 39.55645,22.83018 c 1.47889,0.8541 3.2774,0.8541 4.75629,0 l 39.55645,-22.83018 c 1.47635,-0.8541 2.37815,-2.41467 2.37815,-4.12212 l 0,-45.66035 c 0,-1.70795 -0.89926,-3.34894 -2.37815,-4.20126 l -39.55645,-22.75104 c -0.73818,-0.42616 -1.55388,-0.63417 -2.37815,-0.63417 z m 410.54685,0.23845 0,1.1098 3.09159,0 0,8.16483 1.26834,0 0,-8.16483 3.17086,0 0,-1.1098 -7.53079,0 z m 8.64059,0 0,9.27463 1.18907,0 0,-5.4696 c 0,-0.22323 0.0101,-0.56847 0,-1.0304 -0.0152,-0.47056 0,-0.88074 0,-1.11006 l 0,-0.23844 2.61596,7.84774 1.26834,0 2.69523,-7.84774 c 0,0.49922 -0.0667,0.98119 -0.0791,1.42688 -0.005,0.43377 0,0.75949 0,0.95126 l 0,5.4696 1.18907,0 0,-9.27463 -1.74397,0 -2.69523,7.848 -2.61596,-7.848 -1.82324,0 z m -54.06313,29.64752 c -10.63189,0 -16.96409,4.52469 -16.96409,12.04926 0,8.16281 6.28464,10.40549 16.48846,11.41509 12.20781,1.19504 13.15906,2.98746 13.15906,5.39046 0,4.16803 -3.32306,5.94523 -11.17727,5.94523 -9.86771,0 -12.03658,-2.46337 -12.76271,-7.37211 -0.0855,-0.52637 -0.49148,-0.95126 -1.03052,-0.95126 l -4.83556,0 c -0.59612,0 -1.1098,0.51266 -1.1098,1.1098 0,6.28337 3.41818,13.71409 19.73859,13.71409 11.81462,0 18.62879,-4.63757 18.62879,-12.76283 0,-8.055 -5.50461,-10.21702 -16.96409,-11.73218 -11.57998,-1.53216 -12.68343,-2.282 -12.68343,-4.99397 0,-2.23863 0.9354,-5.23217 9.51257,-5.23217 7.66079,0 10.49237,1.65214 11.6529,6.8176 0.10147,0.48552 0.52954,0.87185 1.03053,0.87185 l 4.83556,0 c 0.29806,0 0.58661,-0.18264 0.79272,-0.39648 0.20293,-0.2283 0.34562,-0.48552 0.31708,-0.79246 -0.74832,-8.89591 -6.681,-13.07992 -18.62879,-13.07992 z m -128.57829,10.86032 c -0.15804,0 -0.33294,0 -0.47563,0.0786 l -7.61006,4.4392 c -0.28538,0.16235 -0.47563,0.46446 -0.47563,0.79271 l 0,8.71986 c 0,0.32825 0.19025,0.6291 0.47563,0.79272 l 7.61006,4.3598 c 0.28537,0.16488 0.58978,0.16488 0.87198,0 l 7.61006,-4.3598 c 0.28221,-0.16235 0.47563,-0.46447 0.47563,-0.79272 l 0,-8.71986 c 0,-0.32825 -0.19329,-0.62935 -0.47563,-0.79271 l -7.61006,-4.4392 c -0.14104,-0.0837 -0.23819,-0.0786 -0.39635,-0.0786 z" id="path28" style="fill:#83cd29;fill-opacity:1;fill-rule:evenodd;stroke:none"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.0 KiB |
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import TextAreaWithCopy from '../../../Common/TextAreaWithCopy/TextAreaWithCopy';
|
||||
import RemoteSchemaContent from '../../CommonLanding/RemoteSchemaContent';
|
||||
import EventTriggerContent from '../../CommonLanding/EventTriggerContent';
|
||||
|
||||
const styles = require('./Popup.scss');
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const ContentMap = {
|
||||
remoteSchema: <RemoteSchemaContent styles={styles} />,
|
||||
eventTrigger: <EventTriggerContent styles={styles} />,
|
||||
};
|
||||
class PopUp extends React.Component {
|
||||
render() {
|
||||
const close = require('./cancel.svg');
|
||||
const { onClose, title, queryDefinition, footerDescription } = this.props;
|
||||
// const queryDefinition = 'query { hello }';
|
||||
return (
|
||||
<div className={styles.popupWrapper}>
|
||||
<div className={styles.wd100}>
|
||||
<div
|
||||
className={
|
||||
styles.descriptionText +
|
||||
' ' +
|
||||
styles.fontWeightBold +
|
||||
' ' +
|
||||
styles.addPaddBottom +
|
||||
' ' +
|
||||
styles.commonBorBottom
|
||||
}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
<div className={styles.close} onClick={onClose}>
|
||||
<img className={'img-responsive'} src={close} alt={'Close'} />
|
||||
</div>
|
||||
<div className={styles.arrowLeft} />
|
||||
{ContentMap[this.props.service]}
|
||||
<div
|
||||
className={styles.addPaddLeft + ' text-left ' + styles.addPaddTop}
|
||||
>
|
||||
<TextAreaWithCopy
|
||||
copyText={queryDefinition}
|
||||
textLanguage={'graphql'}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.listItems}>
|
||||
<div className={styles.descriptionText + ' ' + styles.addPaddLeft}>
|
||||
{footerDescription}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
PopUp.propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
queryDefinition: PropTypes.string.isRequired,
|
||||
footerDescription: PropTypes.string.isRequired,
|
||||
service: PropTypes.string.isRequired,
|
||||
};
|
||||
export default PopUp;
|
||||
@ -0,0 +1,94 @@
|
||||
@import "../../../Common/Common.scss";
|
||||
@import "../../../Common/TextAreaWithCopy/TextAreaWithCopy.scss";
|
||||
|
||||
.wd100 {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.arrowLeft {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
border-right:8px solid #fff;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 20px;
|
||||
left: -7px;
|
||||
bottom: 13px;
|
||||
}
|
||||
|
||||
.yellowCircle {
|
||||
border-radius: 50%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #f8c533;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.addPaddBottom {
|
||||
padding-bottom: 20px !important;
|
||||
}
|
||||
|
||||
.commonBorBottom {
|
||||
border-bottom: 1px solid #DEDEDE;
|
||||
}
|
||||
|
||||
.addPaddLeft {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.addPaddTop {
|
||||
padding-top: 20px !important;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 17px;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.popupWrapper {
|
||||
box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.16);
|
||||
background-color: #ffffff;
|
||||
width: 540px;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 244px;
|
||||
z-index: 1;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
cursor: default;
|
||||
|
||||
.descriptionText {
|
||||
text-align: left;
|
||||
padding-bottom: 15px;
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.listItems {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 15px;
|
||||
|
||||
.descriptionText {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.copyGenerated {
|
||||
|
||||
}
|
||||
|
||||
.copyTooltip .tooltiptext::after {
|
||||
top: 26px !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#f8c533}
|
||||
</style>
|
||||
</defs>
|
||||
<rect id="Rectangle_121" width="10" height="10" class="cls-1" data-name="Rectangle 121" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 281 B |
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="cancel-music" width="10" height="10" viewBox="0 0 10 10">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#f8c533;fill-rule:evenodd}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Path_31" d="M6.189 5l3.565-3.566A.84.84 0 0 0 8.566.246L5 3.811 1.435.246A.84.84 0 0 0 .246 1.434L3.812 5 .246 8.565a.84.84 0 0 0 1.189 1.188L5 6.188l3.566 3.565a.84.84 0 0 0 1.188-1.188z" class="cls-1" data-name="Path 31"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 455 B |
@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="11.207" height="11.207" viewBox="0 0 11.207 11.207">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:none;stroke:#505050;stroke-linecap:round;stroke-linejoin:round}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="external-link" transform="translate(-2.5 -2.293)">
|
||||
<path id="Path_41" d="M11.263 9.856v3.3a1.1 1.1 0 0 1-1.1 1.1H4.1a1.1 1.1 0 0 1-1.1-1.1V7.1A1.1 1.1 0 0 1 4.1 6h3.307" class="cls-1" data-name="Path 41" transform="translate(0 -1.262)"/>
|
||||
<path id="Path_42" d="M15 3h3.305v3.3" class="cls-1" data-name="Path 42" transform="translate(-5.305)"/>
|
||||
<path id="Line_33" d="M0 6.059L6.059 0" class="cls-1" data-name="Line 33" transform="translate(6.941 3)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 745 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="49.709" height="40" viewBox="0 0 49.709 40">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#ea4335}.cls-2{fill:#4285f4}.cls-3{fill:#34a853}.cls-4{fill:#fbbc05}
|
||||
</style>
|
||||
</defs>
|
||||
<g id="google_cloud" transform="translate(-169.005 -202.007)">
|
||||
<path id="Path_54" d="M198.571 213.023h.164l-.089-.075 5.975-5.976.015-.1a19.434 19.434 0 0 0-31.606 9.477 2.567 2.567 0 0 1 .313-.1 14.164 14.164 0 0 1 7.644-2.325 15.258 15.258 0 0 1 2.742.253.131.131 0 0 1 .119-.03 10.77 10.77 0 0 1 14.752-1.118h-.03z" class="cls-1" data-name="Path 54" transform="translate(1.973)"/>
|
||||
<path id="Path_55" d="M204.415 214.732a19.59 19.59 0 0 0-5.871-9.462l-6.065 6.065a10.782 10.782 0 0 1 3.964 8.554v1.073c7.2 0 7.2 10.8 0 10.8h-10.8l-.015.015v8.568h-.045l.06.06h10.8a14.044 14.044 0 0 0 7.972-25.675z" class="cls-2" data-name="Path 55" transform="translate(8.124 1.599)"/>
|
||||
<path id="Path_56" d="M181.159 231.815h10.789v-8.643h-10.789a5.239 5.239 0 0 1-2.22-.492l-6.244 6.244-.015.06a13.955 13.955 0 0 0 8.479 2.831z" class="cls-3" data-name="Path 56" transform="translate(1.801 10.133)"/>
|
||||
<path id="Path_57" d="M182.96 210a14.036 14.036 0 0 0-8.464 25.169l6.259-6.259a5.4 5.4 0 1 1 7.138-7.138l6.259-6.259A13.952 13.952 0 0 0 182.96 210z" class="cls-4" data-name="Path 57" transform="translate(0 3.918)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
console/src/components/Services/CustomResolver/Landing/remote_schema.png
Executable file
BIN
console/src/components/Services/CustomResolver/Landing/remote_schema.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 118 KiB |
@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1{fill:#f8c533}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="multimedia" d="M13.389 5.765L5.9.05a.238.238 0 0 0-.262-.017.291.291 0 0 0-.138.252v11.429a.291.291 0 0 0 .138.253.238.238 0 0 0 .267-.018l7.484-5.714a.3.3 0 0 0 0-.47z" class="cls-1" transform="translate(-5.5)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 406 B |
@ -128,19 +128,21 @@ class AddTable extends Component {
|
||||
}
|
||||
// check for column value being valid graphql
|
||||
let isValid = true;
|
||||
this.props.columns.filter(c => c.name !== '').map(c => {
|
||||
if (!gqlPattern.test(c.name)) {
|
||||
this.props.dispatch(
|
||||
showErrorNotification(
|
||||
gqlColumnErrorNotif[0],
|
||||
gqlColumnErrorNotif[1],
|
||||
gqlColumnErrorNotif[2],
|
||||
gqlColumnErrorNotif[3]
|
||||
)
|
||||
);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
this.props.columns
|
||||
.filter(c => c.name !== '')
|
||||
.map(c => {
|
||||
if (!gqlPattern.test(c.name)) {
|
||||
this.props.dispatch(
|
||||
showErrorNotification(
|
||||
gqlColumnErrorNotif[0],
|
||||
gqlColumnErrorNotif[1],
|
||||
gqlColumnErrorNotif[2],
|
||||
gqlColumnErrorNotif[3]
|
||||
)
|
||||
);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
if (!isValid) {
|
||||
return false;
|
||||
}
|
||||
@ -409,7 +411,7 @@ class AddTable extends Component {
|
||||
</div>
|
||||
);
|
||||
});
|
||||
let createBtnText = 'Create';
|
||||
let createBtnText = 'Add Table';
|
||||
if (ongoingRequest) {
|
||||
createBtnText = 'Creating...';
|
||||
} else if (lastError) {
|
||||
|
||||
@ -360,6 +360,7 @@ hr {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chevron_mar_right {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@ -9,6 +9,8 @@ import { push } from 'react-router-redux';
|
||||
import { loadTriggers } from '../EventActions';
|
||||
import globals from '../../../../Globals';
|
||||
import Button from '../../../Common/Button/Button';
|
||||
import TopicDescription from '../../CommonLanding/TopicDescription';
|
||||
import TryItOut from '../../CommonLanding/TryItOut';
|
||||
|
||||
const appPrefix = globals.urlPrefix + '/events';
|
||||
|
||||
@ -21,10 +23,22 @@ class Schema extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { migrationMode, dispatch } = this.props;
|
||||
const { migrationMode, dispatch, listingTrigger } = this.props;
|
||||
|
||||
const styles = require('../../../Common/Layout/LeftSubSidebar/LeftSubSidebar.scss');
|
||||
|
||||
const showFirstSection = listingTrigger.length ? false : true;
|
||||
const queryDefinition = `mutation {
|
||||
insert_user(objects: [{name: "testuser"}] ){
|
||||
affected_rows
|
||||
}
|
||||
}`;
|
||||
const footerEvent = (
|
||||
<span>
|
||||
Head to the Events tab and see an event invoked under{' '}
|
||||
<span className={styles.fontWeightBold}> test-trigger</span>.
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={`${styles.padd_left_remove} container-fluid ${
|
||||
@ -33,9 +47,12 @@ class Schema extends Component {
|
||||
>
|
||||
<div className={styles.padd_left}>
|
||||
<Helmet title="Event Triggers | Hasura" />
|
||||
<div>
|
||||
<h2 className={`${styles.heading_text} ${styles.inline_block}`}>
|
||||
{' '}
|
||||
<div className={styles.display_flex}>
|
||||
<h2
|
||||
className={`${styles.headerText} ${styles.addPaddRight} ${
|
||||
styles.inline_block
|
||||
}`}
|
||||
>
|
||||
Event Triggers{' '}
|
||||
</h2>
|
||||
{migrationMode ? (
|
||||
@ -53,6 +70,28 @@ class Schema extends Component {
|
||||
) : null}
|
||||
</div>
|
||||
<hr />
|
||||
{showFirstSection ? (
|
||||
<div>
|
||||
<TopicDescription
|
||||
title="What are Event Triggers?"
|
||||
imgUrl="https://storage.googleapis.com/hasura-graphql-engine/console/assets/event-trigger.png"
|
||||
imgAlt="Event Triggers"
|
||||
description="Hasura can be used to create event triggers on tables. An Event Trigger atomically captures events (insert, update, delete) on a specified table and then reliably calls a webhook that can carry out any custom logic."
|
||||
/>
|
||||
<hr className={styles.clear_fix} />
|
||||
</div>
|
||||
) : null}
|
||||
<TryItOut
|
||||
service="eventTrigger"
|
||||
title="Steps to deploy an example Event Trigger to Glitch"
|
||||
queryDefinition={queryDefinition}
|
||||
footerDescription={footerEvent}
|
||||
glitchLink="https://glitch.com/edit/#!/hasura-sample-event-trigger"
|
||||
googleCloudLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/event-triggers/google-cloud-functions/nodejs8"
|
||||
MicrosoftAzureLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/event-triggers/azure-functions/nodejs"
|
||||
awsLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/event-triggers/aws-lambda/nodejs8"
|
||||
adMoreLink="https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/event-triggers/"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -75,6 +114,7 @@ const mapStateToProps = state => ({
|
||||
migrationMode: state.main.migrationMode,
|
||||
untrackedRelations: state.tables.untrackedRelations,
|
||||
currentSchema: state.tables.currentSchema,
|
||||
listingTrigger: state.triggers.listingTrigger,
|
||||
});
|
||||
|
||||
const schemaConnector = connect => connect(mapStateToProps)(Schema);
|
||||
|
||||
@ -231,10 +231,10 @@ class RedeliverEvent extends Component {
|
||||
value={
|
||||
log.eventInvocations[0]
|
||||
? JSON.stringify(
|
||||
log.eventInvocations[0].request,
|
||||
null,
|
||||
4
|
||||
)
|
||||
log.eventInvocations[0].request,
|
||||
null,
|
||||
4
|
||||
)
|
||||
: ''
|
||||
}
|
||||
minLines={8}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user