Skip to content

Commit 9147237

Browse files
vaibhavdarenvaibhavdaren
authored
Merge pull request #572 from AuraOfDivinity/user-integrations
User Integrations
2 parents 1f48f6a + 327c416 commit 9147237

File tree

5 files changed

+425
-7
lines changed

5 files changed

+425
-7
lines changed

‎src/assets/jsonData/integrations.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import Drive from "../integrations/Drive.png";
2+
import Calendar from "../integrations/Calendar.png";
3+
import Github from "../integrations/Github.png";
4+
import Jitsi from "../integrations/Jitsi.png";
5+
import Trello from "../integrations/Trello.png";
6+
import SimplePoll from "../integrations/SimplePoll.png";
7+
8+
const integrationsList = [
9+
{
10+
id: "1",
11+
integrationName: "Google Drive",
12+
image: Drive,
13+
tag: "File Management",
14+
description: `Use Google Drive within Donut to:
15+
• Create new Google Docs, Slides, and Sheets files
16+
• Import an existing file from Google Drive into a channel or direct message
17+
• Search directly within Google Drive files shared within Donut
18+
• Automatically grant access to the files you share with the right audience
19+
• Get updates in Donut on changes in Drive, like comments, access requests, and new files shared with you
20+
• Reply directly to comment notifications from within Donut and have them posted to the file
21+
`,
22+
},
23+
{
24+
id: "2",
25+
integrationName: "Google Calendar",
26+
image: Calendar,
27+
tag: "Productivity",
28+
description: `From viewing your daily schedule or receiving up-to-the-minute reminders, keep your calendar top of mind without leaving Donut. Use Google Calendar in Donut to:
29+
• Create an event right from Donut using the shortcuts button.
30+
• Automatically sync your calendar to your Donut status to let your team know when you are in a meeting.
31+
• See a holistic view of your daily schedule from Donut.
32+
• Get notified when an event is starting soon, and join a Hangout, Zoom, Webex, or Microsoft Teams meeting directly from the calendar reminder in Donut.
33+
• Respond directly to event invitations.
34+
• Get updated when an event’s details change, and change your response as needed.
35+
`,
36+
},
37+
{
38+
id: "3",
39+
integrationName: "Github",
40+
image: Github,
41+
tag: "Developer Tools",
42+
description: `Bring your code to the conversations you care about with the GitHub and Donut app. With two of your most important workspaces connected, you’ll get updates about what’s happening on GitHub—without leaving Donut.
43+
Subscribe to repositories
44+
Use /github subscribe [owner/repo] in Donut to start receiving updates about that project.
45+
Stay up to date
46+
Get updates about what’s happening with your repositories in Donut discussions for activities like:
47+
• New commits
48+
• New pull requests
49+
• New issues
50+
• Code reviews
51+
• Deployment statuses
52+
See the details
53+
Give your team more information in Donut when you share links to GitHub activities and properties like:
54+
• Pull requests
55+
• Issues
56+
• Linked comments
57+
• Code snippets
58+
• Developer profiles
59+
Take actions with slash commands
60+
Donut conversations often lead to decisions and actionable takeaways. Now it’s easier to start on next steps from Donut with slash commands for common GitHub actions, using /github [action] [resource]. For example, these commands let you:
61+
• Close an issue or pull request
62+
• Reopen an issue or pull request
63+
• Open a new issue using a Donut dialog
64+
Using an older version of GitHub and Donut? Installing the new integration will allow you to migrate subscriptions from legacy versions. GitHub Enterprise and Donut Enterprise Grid are not yet supported.
65+
`,
66+
},
67+
{
68+
id: "4",
69+
integrationName: "Jitsi Meet",
70+
image: Jitsi,
71+
tag: "Communication",
72+
description: `Jitsi Meet is an OpenSource (Apache License) application that provides large scale video conferences for your browser or your mobile. No accounts or pin-codes are necessary. Just click the link and you are in!
73+
This integration adds the /jitsi slash command for your team so that you can start a video conference in your channel, making it easy for everyone to just jump on the call. Just type /jitsi into your channel and a conference link will be provided in the channel. Additionally, you can send direct messages to users by mentioning their username in the command.
74+
In addition to simple video calls Jitsi Meet also lets you join over the phone, stream to YouTube and collaboratively edit documents.
75+
`,
76+
},
77+
{
78+
id: "5",
79+
integrationName: "Trello",
80+
image: Trello,
81+
tag: "Prodictivity",
82+
description: `Trusted by millions, Trello is the visual collaboration tool that creates a shared perspective on any project.
83+
Link your Trello and Donut teams to harness the power of productivity with the Trello app for Donut, and create a seamless and collaborative workflow between your favorite apps.
84+
With Trello for Donut, you can:
85+
• Add new Trello cards to boards directly from Donut with /trello add
86+
• Join Trello cards (and boards!), change due dates, attach conversations and a lot more.
87+
• Invite @trello to a channel for automated card & board previews including members, descriptions, comments and more.
88+
• Allow Donut team members to join your Trello team & boards in one click.
89+
`,
90+
},
91+
{
92+
id: "6",
93+
integrationName: "Simple Poll",
94+
image: SimplePoll,
95+
tag: "Productivity",
96+
description: `With Simple Poll, you can create native and simple polls, right within Slack.
97+
Get your colleagues’ thoughts in minutes; not in the next meeting.
98+
Need to decide on whether to proceed with a candidate? The next step with a customer? A favourite product design? Or even where to go to lunch on Thursday? Simple Poll provides an effortless and collaborative way to make these decisions.
99+
`,
100+
},
101+
];
102+
103+
export default integrationsList;

‎src/router.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,9 @@ import Setup from "./user/setup/Setup";
2020
import CommunitySetting from "./user/dashboard/Community/CommunitySetting";
2121
import Insight from "./user/dashboard/insights/Insight";
2222
import AdminRoute from "./common/AdminRoute";
23-
import Activity from './user/Activity/Activity';
24-
import IntegrationsPage from './user/integrations/IntegrationsPage/IntegrationsPage'
23+
import Activity from "./user/Activity/Activity";
24+
import IntegrationsPage from "./user/integrations/IntegrationsPage/IntegrationsPage";
25+
import UserIntegrations from "./user/integrations/UserIntegrations/UserIntegrations";
2526

2627
const Router = () => (
2728
<BrowserRouter>
@@ -45,15 +46,16 @@ const Router = () => (
4546
/>
4647
<PrivateRoute exact path="/proposaleditor" component={ProposalEditor} />
4748
<PrivateRoute exact path="/setup" component={Setup} />
48-
<AdminRoute
49-
exact
50-
path="/org-settings"
51-
component={CommunitySetting}
52-
/>
49+
<AdminRoute exact path="/org-settings" component={CommunitySetting} />
5350
<AdminRoute exact path="/activity/:userId" component={Activity} />
5451
<PrivateRoute exact path="/insight" component={Insight} />
5552
<PrivateRoute exact path="/admin" component={Admin} />
5653
<PrivateRoute exact path="/integrations" component={IntegrationsPage} />
54+
<PrivateRoute
55+
exact
56+
path="/userintegrations"
57+
component={UserIntegrations}
58+
/>
5759
<Route component={NotFound} />
5860
</Switch>
5961
</BrowserRouter>

‎src/user/integrations/UserIntegrations/IntegrationDetails.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from "react";
2+
import { Card, Button } from "react-bootstrap";
3+
4+
const IntegrationDetails = (props) => {
5+
const { integration } = props;
6+
7+
return (
8+
<div className="integrations-content">
9+
<div className="title-content">
10+
<div className="integrations-title">Integrations</div>
11+
<div className="integrations-subtitle"></div>
12+
</div>
13+
<div className="integration-content">
14+
<Card className="details-card">
15+
<div className="details-top">
16+
<img src={integration?.image} />
17+
<div className="details-name">{integration?.integrationName}</div>
18+
<div className="button-container">
19+
<Button
20+
variant="primary"
21+
onClick={props.back}
22+
className="details-button-back"
23+
>
24+
Back to Integrations
25+
</Button>
26+
<Button
27+
variant="primary"
28+
onClick={props.back}
29+
className="details-button"
30+
>
31+
Add to Donut
32+
</Button>
33+
</div>
34+
</div>
35+
<div className="details-bottom">
36+
<div className="details-usage">Usage Guide</div>
37+
<div className="details-usagetext">{integration.description}</div>
38+
</div>
39+
</Card>
40+
</div>
41+
</div>
42+
);
43+
};
44+
45+
export default IntegrationDetails;

‎src/user/integrations/UserIntegrations/UserIntegrations.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import React, { Component } from "react";
2+
import "./UserIntegrations.scss";
3+
import Navigation from "../../dashboard/navigation/navigation";
4+
import { Button, Form, Card } from "react-bootstrap";
5+
import integrationsList from "../../../assets/jsonData/integrations";
6+
import IntegrationDetails from "./IntegrationDetails";
7+
8+
class UserIntegrations extends Component {
9+
constructor(props) {
10+
super(props);
11+
this.state = {
12+
integrations: true,
13+
integrationSelected: false,
14+
selectedIntegration: {},
15+
};
16+
}
17+
18+
handleSelection = (integration) => {
19+
this.setState({
20+
selectedIntegration: integration,
21+
integrationSelected: true,
22+
});
23+
};
24+
25+
handleBackClick = () => {
26+
this.setState({
27+
selectedIntegration: {},
28+
integrationSelected: false,
29+
});
30+
};
31+
32+
render() {
33+
const { integrationSelected, selectedIntegration } = this.state;
34+
35+
return (
36+
<div className="integrations">
37+
<div className="navigation">
38+
<Navigation org={this.state.org}></Navigation>
39+
</div>
40+
{integrationSelected ? (
41+
<IntegrationDetails
42+
back={this.handleBackClick}
43+
integration={selectedIntegration}
44+
/>
45+
) : (
46+
<div className="integrations-content">
47+
<div className="title-content">
48+
<div className="integrations-title">Integrations</div>
49+
<div className="integrations-subtitle">
50+
These are the present integrations for the donut application.
51+
More cool integrations are on their way
52+
</div>
53+
<Form>
54+
<Form.Control
55+
as="input"
56+
placeholder="Search"
57+
className="searchbar"
58+
onChange={this.handleSearchBarChange}
59+
/>
60+
</Form>
61+
</div>
62+
<div className="integration-content">
63+
{integrationsList.map((integration, index) => {
64+
return (
65+
<Card className="integration-card">
66+
<Card.Img
67+
variant="top"
68+
src={integration?.image}
69+
className="integration-card-image"
70+
/>
71+
<Card.Body>
72+
<div className="integration-card-body">
73+
<Card.Title className="integration-card-title">
74+
{integration?.integrationName}
75+
</Card.Title>
76+
<Card.Text className="integration-card-tag">
77+
{integration?.tag}
78+
</Card.Text>
79+
<Button
80+
variant="primary"
81+
className="integration-card-button"
82+
onClick={() => this.handleSelection(integration)}
83+
>
84+
Learn More
85+
</Button>
86+
</div>
87+
</Card.Body>
88+
</Card>
89+
);
90+
})}
91+
</div>
92+
</div>
93+
)}
94+
</div>
95+
);
96+
}
97+
}
98+
99+
export default UserIntegrations;

0 commit comments

Comments
 (0)