179 |
180 | );
181 | }
182 | }
183 |
184 | export default Demo;
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tray.io Embedded Edition sample application
2 |
3 | ## Table of Contents
4 |
5 | - [Intro](#trayio-embedded-edition-sample-application)
6 | - [Important concepts in Tray.io Embedded Edition](#important-concepts-in-trayio-embedded-edition)
7 | - [Setting up and running](#setting-up-and-running-the-sample-application)
8 |
9 | ## Intro
10 |
11 | In this repo is a sample webapp which runs on top of the Tray.io Embedded Edition API - this is an application which simply allows you to create new external users linked to your Tray.io partner account, and allow them to create and configure copies of your Solutions that exist on your Tray.io partner account.
12 |
13 | ## Important concepts in Tray.io Embedded Edition
14 |
15 | There are a few key things we should define to understand how to integrate Embedded Edition.
16 |
17 | #### Your Partner Account
18 |
19 | This is the Tray.io account we will provide for the purposes of setting up your integration to Tray.io. You will have to create any Solutions that you would like your users to use on this account. When you sign up an external user to Tray.io through your system, they will be considered to be a user linked to this account's team.
20 |
21 | #### Your Partner Accounts Workflows
22 |
23 | Workflows allow you to build automation within Tray by linking a series of steps. Each step will have a connector that can authenticate and run API calls against a certain service, or transform some data existing from previous steps in the workflow.
24 |
25 | #### Your Partner Accounts Projects
26 |
27 | Projects allow you to package one or more workflows together, in order to be able to provide a solution in your application.
28 |
29 | #### Your Partner Accounts Solutions
30 |
31 | Your Solutions will be available to list and edit through the Tray.io GraphQL API for usage in your application. These are built from Projects, and will be what your External Users configure to get a version of your Project that is linked to their own API Authentications and custom configuration values for the workflows used.
32 |
33 | #### Your Partner Accounts External Users
34 |
35 | In order for your users to take advantage of the Tray.io platform, they must have a Tray account. We have set up a system to provision Tray.io accounts which will be linked to the team of your Partner user. This will generate the associated tray accounts for the end users but the end users would not be aware of this.
36 |
37 | #### Your External Users Solution Instances
38 |
39 | When an external user configures a Solution, a copy of that Solution will be created in that accounts Solution instance list. Their Solution Instance must then be configured and enabled with your users application Authentications for the services used within that Solution.
40 |
41 | ### Integration details:
42 |
43 | - [Embedded Edition GraphQL API](https://tray.io/docs/article/partner-api-intro)
44 | - [Using the Tray.io configurator and authentication UIs from within your application](https://tray.io/docs/article/embedded-external-configuration)
45 | - [Authenticating your external users](https://github.com/trayio/embedded-edition-sample-app#authenticating-your-external-users)
46 |
47 | ## Setting up and running the sample application
48 |
49 | The application will require the following information to run:
50 |
51 | ```
52 | TRAY_ENDPOINT => prod / eu1-prod / fe-stg / stg
53 |
54 | TRAY_MASTER_TOKEN =>
55 |
56 | TRAY_PARTNER =>
57 | ```
58 |
59 | #### Getting the master token
60 |
61 | You can retrieve the token for any environment by visiting the Tray app instance for that environment i.e.
62 |
63 | prod -> https://app.tray.io
64 | eu1-prod -> https://app.eu1.tray.io
65 | stg -> https://app.staging.tray.io
66 | fe-stg -> https://app.frontend-staging.tray.io
67 |
68 | You will then need to log on as a embedded user and visit `Settings & people` -> `Tokens`
69 |
70 | 
71 |
72 | The app will bring the environment variables it needs from a `.env` file at the root of the repository.
73 |
74 | ### Setup configuration
75 |
76 | The required configuration for the application to run needs to be stored in a `.env` file at the root of the application. An example on how to do that:
77 |
78 | ```
79 | touch .env
80 | cat <> .env
81 | # choose from "prod", "stg" or "fe-stg"
82 | TRAY_ENDPOINT=prod
83 | # ensure master token matches the environment chosen in "TRAY_ENDPOINT"
84 | TRAY_MASTER_TOKEN=
85 | # can be any partner "asana", "tray.io" etc
86 | TRAY_PARTNER=tray.io
87 | EOT
88 | ```
89 |
90 | ### Running the application
91 |
92 | To set up and run the sample application first you must have Node LTS v10 or greater and then install the packages:
93 |
94 | ```
95 | npm install
96 | ```
97 |
98 | The application needs both an API and client instance. You can easily run both concurrently with the `start script`:
99 |
100 | ```
101 | npm run start
102 | ```
103 |
104 | ## Implementation details
105 |
106 | #### Making queries and executing mutations on the GQL API
107 |
108 | You can see the query + mutation definitions in the file `server/graphql.js`. For example the Solutions listing query for a partner account is defined as the code below:
109 |
110 | ```
111 | listSolutions: () => {
112 | const query = gql`
113 | {
114 | viewer {
115 | solutions {
116 | edges {
117 | node {
118 | id
119 | title
120 | }
121 | }
122 | }
123 | }
124 | }
125 | `;
126 |
127 | return masterClient.query({query});
128 | }
129 | ```
130 |
131 | This query fetches all Solutions for the given master token and provides the id and title fields. In order to make this query you must pass your Tray.io Partner Accounts API master token, we have some middleware which is using the Apollo Relay client imported from the `server/gqlclient.js`.
132 |
133 | To create side effects through the GraphQL API you must run a mutation. For example to create a Solution Instance from a Solution for a given external user, the mutation is defined as the code below:
134 |
135 | ```
136 | createSolutionInstance: (userToken, solutionId, name) => {
137 | const mutation = gql`
138 | mutation {
139 | createSolutionInstance(
140 | input: {
141 | solutionId: "${solutionId}",
142 | instanceName: "${name}",
143 | }
144 | ) {
145 | solutionInstance {
146 | id
147 | }
148 | }
149 | }
150 | `;
151 |
152 | return generateClient(userToken).mutate({mutation});
153 | },
154 | ```
155 |
156 | This code runs the createSolutionInstance mutation with the `solutionId` template variable passed in to determine which Solution to copy over to the External User account. It's run using a client that is generated from the user token, which is the user that will receive the new Solution Instance.
157 |
158 | #### Authenticating your external users
159 |
160 | In order to run user mutations or queries you will have to generate a user access token, so before running the mutation above you would have to run the `authorize` mutation with the required users trayId:
161 |
162 | ```
163 | authorize: trayId => {
164 | const mutation = gql`
165 | mutation {
166 | authorize(input: {userId: "${trayId}"}) {
167 | accessToken
168 | }
169 | }
170 | `;
171 |
172 | return masterClient.mutate({mutation});
173 | },
174 | ```
175 |
--------------------------------------------------------------------------------
/src/views/Authentications.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import View from '../components/View';
3 | import Error from '../components/Error';
4 | import Typography from '@material-ui/core/Typography';
5 | import Paper from '@material-ui/core/Paper';
6 | import Button from '@material-ui/core/Button';
7 | import Checkbox from '@material-ui/core/Checkbox';
8 | import FormControlLabel from '@material-ui/core/FormControlLabel';
9 | import { withTheme } from "@material-ui/core/styles/index";
10 | import Loading from '../components/Loading';
11 | import { listAuths, getAuthEditUrl } from '../api/me';
12 | import { openAuthWindow } from "../lib/authWindow";
13 | import { getAuthCreateUrl } from "../api/me";
14 | import List from "@material-ui/core/List";
15 | import ListItem from "@material-ui/core/ListItem";
16 | import TextField from "@material-ui/core/TextField";
17 | import ListItemText from "@material-ui/core/ListItemText";
18 | import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
19 | import Grid from "@material-ui/core/Grid";
20 | import RefreshIcon from '@material-ui/icons/Refresh';
21 | import { AuthWizard } from '../components/AuthWizard';
22 |
23 | export class Authentications extends React.PureComponent {
24 |
25 | styles = {
26 | controls: {marginLeft: "20px"},
27 | button: {width: "100%"},
28 | text: {fontWeight: "bold"},
29 | grid: {
30 | maxWidth: "900px",
31 | margin: "20px auto",
32 | },
33 | header: {margin: "20px"},
34 | headerOptions: { display: 'flex', margin: "0 20px 20px 20px" },
35 | headerOption: { marginRight: "20px" },
36 | list: {
37 | margin: "10px",
38 | maxWidth: "1000px",
39 | backgroundColor: "white",
40 | },
41 | advancedInput: {
42 | marginRight: "20px",
43 | flex: 1,
44 | }
45 | };
46 |
47 | state = {
48 | loading: true,
49 | error: false,
50 | auths: [],
51 | params: '',
52 | shouldOpenInFrame: false,
53 | iframeURL: undefined
54 | }
55 |
56 | componentDidMount() {
57 | this.loadAuths();
58 | }
59 |
60 | loadAuths = () => {
61 | this.setState({
62 | loading: true
63 | }, () => {
64 | listAuths()
65 | .then(({ok, body}) => {
66 | if (ok) {
67 | this.setState({
68 | auths: body.data || [],
69 | loading: false,
70 | });
71 | } else {
72 | this.setState({
73 | error: body,
74 | loading: false,
75 | });
76 | }
77 | });
78 | });
79 | }
80 |
81 | openAuthWizard = (url) => {
82 | if (this.state.shouldOpenInFrame) {
83 | this.setState({ iframeURL: url });
84 | } else {
85 | openAuthWindow(url);
86 | }
87 | }
88 |
89 | closeIframe = () => {
90 | this.setState({ iframeURL: undefined });
91 | this.loadAuths();
92 | }
93 |
94 | onCreateAuth = () => {
95 | getAuthCreateUrl()
96 | .then(({body}) => {
97 | this.openAuthWizard(`${body.data.popupUrl}&${this.state.params}`);
98 | })
99 | };
100 |
101 | buildList() {
102 | return (
103 |
104 |
105 |
106 | {
107 | this.state.auths.map(({id, name}, index) =>
108 |
112 |
117 |
118 |
125 |
126 |
127 | )
128 | }
129 |
130 |
131 |
132 | );
133 | }
134 |
135 | showAuthWindow = (id) => () => {
136 | getAuthEditUrl(id)
137 | .then(({body}) => {
138 | this.openAuthWizard(`${body.data.popupUrl}&${this.state.params}`);
139 | })
140 | };
141 |
142 | handleChange = name => event => {
143 | this.setState({
144 | [name]: event.target.value,
145 | });
146 | };
147 |
148 | render() {
149 | return (
150 |
151 |
152 |
156 |
161 | Authentications
162 |
163 |