Skip to content

Commit

Permalink
more changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DaveDarsa
DaveDarsa committed Aug 8, 2023
1 parent c202d87 commit ba51b34
Show file tree
Hide file tree
Showing 10 changed files with 256 additions and 280 deletions.
142 changes: 70 additions & 72 deletions src/components/Organizations/AddGroupToProject/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
import React from 'react';
import Modal from 'components/Modal';
import { Mutation } from 'react-apollo';
import ReactSelect from 'react-select';

import Button from 'components/Button';
import { bp, color } from 'lib/variables';
import Modal from 'components/Modal';
// @TODO: add this once the logic exists
import withLogic from 'components/Organizations/AddGroupToProject/logic';
import ReactSelect from 'react-select';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { bp, color } from 'lib/variables';

import { StyledNotification, StyledNotificationWrapper } from "../SharedStyles";
import { RoleSelect } from '../AddUserToGroup/Styles';

import { Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';

const ADD_GROUP_PROJECT_MUTATION = gql`
mutation addProjectToGroup($groupName: String!, $projectName: String!) {
addGroupsToProject(input:{
groups:{
name: $groupName
}
project:{
name: $projectName
}
}){
addGroupsToProject(input: { groups: { name: $groupName }, project: { name: $projectName } }) {
name
}
}
`;

const customStyles = {
content : {
width : '50%',
}
content: {
width: '50%',
},
};

/**
Expand All @@ -44,65 +37,70 @@ export const AddGroupToProject = ({
open,
openModal,
closeModal,
refresh
refresh,
}) => {
return (
<StyledNotificationWrapper>
<div className="margins"><Button action={openModal}>
Add Group
</Button></div>
<Modal
isOpen={open}
onRequestClose={closeModal}
contentLabel={`Confirm`}
style={customStyles}
>
<div className="margins">
<Button action={openModal}>
<span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
<span style={{ fontSize: '28px' }}>+</span>
<span style={{ fontSize: '16px', lineHeight: '24px' }}>Group</span>
</span>
</Button>
</div>
<Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
<React.Fragment>
<Mutation mutation={ADD_GROUP_PROJECT_MUTATION}>
{(addGroupProject, {_, error, data}) => {
if (error) {
return <div>{error.message}</div>;
}
if (data) {
refresh().then(closeModal);
}
return (
<StyledNotification>
<h4>Add Group</h4>
<label>Group
<RoleSelect>
<ReactSelect
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' })}}
aria-label="Group"
placeholder="Select a group..."
name="group"
value={options.find(o => o.value === selectedProject)}
onChange={selectedOption => setSelectedProject(selectedOption)}
options={options}
required
/>
</RoleSelect></label>
<div>
<p></p>
<Button
disabled={selectedProject === null}
action={() => {
addGroupProject({
variables: {
projectName: projectName,
groupName: selectedProject.value,
}
})
}
}
variant='green'
>Add
</Button>
</div>
</StyledNotification>
);
}}
<Mutation mutation={ADD_GROUP_PROJECT_MUTATION} onError={e => console.error(e)}>
{(addGroupProject, { error, data }) => {
if (error) {
return <div>{error.message}</div>;
}
if (data) {
refresh().then(closeModal);
}
return (
<StyledNotification>
<h4>Add Group</h4>
<label>
Group
<RoleSelect>
<ReactSelect
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
aria-label="Group"
placeholder="Select a group..."
name="group"
value={options.find(o => o.value === selectedProject)}
onChange={selectedOption => setSelectedProject(selectedOption)}
options={options}
required
/>
</RoleSelect>
</label>
<Footer>
<Button
disabled={selectedProject === null}
action={() => {
addGroupProject({
variables: {
projectName: projectName,
groupName: selectedProject.value,
},
});
}}
variant="primary"
>
Add
</Button>

<Button variant="ghost" action={() => closeModal()}>
Cancel
</Button>
</Footer>
</StyledNotification>
);
}}
</Mutation>
</React.Fragment>
</Modal>
Expand Down
160 changes: 89 additions & 71 deletions src/components/Organizations/AddNotificationToProject/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,35 @@
import React from 'react';
import Modal from 'components/Modal';
import { Mutation } from 'react-apollo';
import ReactSelect from 'react-select';

import Button from 'components/Button';
import { bp, color } from 'lib/variables';
import Modal from 'components/Modal';
// @TODO: add this once the logic exists
import withLogic from 'components/Organizations/AddNotificationToProject/logic';
import ReactSelect from 'react-select';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { bp, color } from 'lib/variables';

import { StyledNotification, StyledNotificationWrapper } from "../SharedStyles";
import { RoleSelect } from '../AddUserToGroup/Styles';
import { Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';

const ADD_PROJECT_NOTIFICATION_MUTATION = gql`
mutation addNotificationToProject($notificationType: NotificationType!, $notificationName: String!, $projectName: String!) {
addNotificationToProject(input:{
notificationType: $notificationType
notificationName: $notificationName
project: $projectName
}){
mutation addNotificationToProject(
$notificationType: NotificationType!
$notificationName: String!
$projectName: String!
) {
addNotificationToProject(
input: { notificationType: $notificationType, notificationName: $notificationName, project: $projectName }
) {
id
}
}
`;

const customStyles = {
content : {
width : '50%',
}
content: {
width: '50%',
},
};

/**
Expand All @@ -40,68 +43,83 @@ export const AddNotificationToProject = ({
open,
openModal,
closeModal,
refresh
refresh,
}) => {
return (
<StyledNotificationWrapper>
<div className="margins"><Button action={openModal}>
Add Notification
</Button></div>
<Modal
isOpen={open}
onRequestClose={closeModal}
contentLabel={`Confirm`}
style={customStyles}
>
<div className="margins">
<Button action={openModal}>
<span style={{ display: 'inline-flex', alignContent: 'center', gap: '10px' }}>
<span style={{ fontSize: '28px' }}>+</span>
<span style={{ fontSize: '16px', lineHeight: '24px' }}>Notification</span>
</span>
</Button>
</div>
<Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
<React.Fragment>
<Mutation mutation={ADD_PROJECT_NOTIFICATION_MUTATION}>
{(addNotificationToProject, {_, error, data}) => {
if (error) {
return <div>{error.message}</div>;
}
if (data) {
refresh().then(closeModal);
}
var ops = [...options.slacks, ...options.rocketchats, ...options.teams, ...options.emails, ...options.webhook]
var opts = ops.map(group => {return {label: group.__typename.split("Notification")[1].toLowerCase() + ": " + group.name, value: group.__typename.split("Notification")[1].toUpperCase() + ":" + group.name} })
return (
<StyledNotification>
<h4>Add Notification</h4>
<label>Notification
<RoleSelect>
<ReactSelect
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black'}) }}
aria-label="Notification"
placeholder="Select a notification..."
name="notification"
value={opts.find(o => o.value === selectedProject)}
onChange={selectedOption => setSelectedProject(selectedOption)}
options={opts}
required
/>
</RoleSelect></label>
<div>
<p></p>
<Button
disabled={selectedProject === null}
action={() => {
addNotificationToProject({
variables: {
<Mutation mutation={ADD_PROJECT_NOTIFICATION_MUTATION} onError={e => console.error(e)}>
{(addNotificationToProject, { error, data }) => {
if (error) {
return <div>{error.message}</div>;
}
if (data) {
refresh().then(closeModal);
}
var ops = [
...options.slacks,
...options.rocketchats,
...options.teams,
...options.emails,
...options.webhook,
];
var opts = ops.map(group => {
return {
label: group.__typename.split('Notification')[1].toLowerCase() + ': ' + group.name,
value: group.__typename.split('Notification')[1].toUpperCase() + ':' + group.name,
};
});
return (
<StyledNotification>
<h4>Add Notification</h4>
<label>
Notification
<RoleSelect>
<ReactSelect
menuPortalTarget={document.body}
styles={{ menuPortal: base => ({ ...base, zIndex: 9999, color: 'black' }) }}
aria-label="Notification"
placeholder="Select a notification..."
name="notification"
value={opts.find(o => o.value === selectedProject)}
onChange={selectedOption => setSelectedProject(selectedOption)}
options={opts}
required
/>
</RoleSelect>
</label>
<Footer>
<Button
disabled={selectedProject === null}
action={() => {
addNotificationToProject({
variables: {
projectName: projectName,
notificationType: selectedProject.value.split(":")[0],
notificationName: selectedProject.value.split(":")[1],
}
})
}
}
variant='green'
>Add
</Button>
</div>
</StyledNotification>
);
}}
notificationType: selectedProject.value.split(':')[0],
notificationName: selectedProject.value.split(':')[1],
},
});
}}
variant="primary"
>
Add
</Button>
<Button variant="ghost" action={() => closeModal()}>
Cancel
</Button>
</Footer>
</StyledNotification>
);
}}
</Mutation>
</React.Fragment>
</Modal>
Expand Down
Loading

0 comments on commit ba51b34

Please sign in to comment.