Skip to content

Commit 9a76e76

Browse files
DaveDarsaDaveDarsa
authored
Merge pull request #189 from uselagoon/Some-organizations-changes
Recommended fixes/changes to organizations
2 parents b60798d + eb64b4c commit 9a76e76

File tree

41 files changed

+1107
-679
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1107
-679
lines changed

‎src/components/ErrorNotification/ErrorNotification.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { FC } from 'react';
2+
3+
import { notification } from 'antd';
4+
5+
interface Props {
6+
error: {
7+
message: string;
8+
};
9+
message: string;
10+
}
11+
12+
const ErrorNotification: FC<Props> = ({ error, message }) => {
13+
// const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
14+
15+
// const openNotification = () => {
16+
// api['error']({
17+
// message: message,
18+
// description: description,
19+
// placement: 'top',
20+
// duration: 0,
21+
// style: { width: '500px' },
22+
// });
23+
// };
24+
25+
// return (
26+
// <>
27+
// {contextHolder}
28+
29+
// {openNotification()}
30+
// </>
31+
// );
32+
const [api, contextHolder] = notification.useNotification({ maxCount: 1 });
33+
34+
const openNotificationWithIcon = (message: string, description: string) => {
35+
api['error']({
36+
message: message,
37+
description: description,
38+
placement: 'top',
39+
duration: 0,
40+
style: { width: '500px' },
41+
});
42+
};
43+
return (
44+
<>
45+
{contextHolder}
46+
{error && openNotificationWithIcon(message, error.message)}
47+
</>
48+
);
49+
};
50+
51+
export default ErrorNotification;

‎src/components/Header/StyledHeader.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
import { color } from 'lib/variables';
22
import styled from 'styled-components';
33

4-
export const StyledHeader = styled.header`
4+
export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
55
background: ${color.brightBlue} ${color.lightBlue};
66
background: ${color.lightBlue};
7-
background: ${props => props.theme.gradients.headerFooterGradient};
7+
background: ${props =>
8+
props.isOrganizationsPath
9+
? props.theme.gradients.organizationsHeaderGradient
10+
: props.theme.gradients.headerFooterGradient};
11+
812
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='${color.brightBlue}', endColorstr='${color.lightBlue}',GradientType=1 );
913
display: flex;
1014
justify-content: space-between;
@@ -38,7 +42,10 @@ export const StyledHeader = styled.header`
3842
}
3943
&.navitem {
4044
align-items: center;
41-
border-left: 1px solid ${color.blue};
45+
border-left: 1px solid ${props =>
46+
props.isOrganizationsPath
47+
? "transparent"
48+
: color.blue};
4249
cursor: pointer;
4350
display: flex;
4451
&::before {

‎src/components/Header/index.js

Lines changed: 46 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33
import getConfig from 'next/config';
44
import Link from 'next/link';
5+
import { useRouter } from 'next/router';
56

67
import lagoonLogo from '!svg-inline-loader?classPrefix!./lagoon.svg';
78
import HeaderMenu from 'components/HeaderMenu';
@@ -16,45 +17,51 @@ const { publicRuntimeConfig } = getConfig();
1617
/**
1718
* Displays the header using the provided logo.
1819
*/
19-
const Header = ({ logo }) => (
20-
<StyledHeader>
21-
<Link href="/">
22-
<a className="home">
23-
<img
24-
alt="Home"
25-
src={
26-
logo
27-
? logo
28-
: `data:image/svg+xml;utf8,${
29-
publicRuntimeConfig.LAGOON_UI_ICON
30-
? publicRuntimeConfig.LAGOON_UI_ICON
31-
: encodeURIComponent(lagoonLogo)
32-
}`
20+
const Header = ({ logo }) => {
21+
const { asPath } = useRouter();
22+
23+
const isOrganizationsPath = asPath.includes('/organizations');
24+
25+
return (
26+
<StyledHeader isOrganizationsPath={isOrganizationsPath}>
27+
<Link href="/">
28+
<a className="home">
29+
<img
30+
alt="Home"
31+
src={
32+
logo
33+
? logo
34+
: `data:image/svg+xml;utf8,${
35+
publicRuntimeConfig.LAGOON_UI_ICON
36+
? publicRuntimeConfig.LAGOON_UI_ICON
37+
: encodeURIComponent(lagoonLogo)
38+
}`
39+
}
40+
/>
41+
</a>
42+
</Link>
43+
<ControlButtons>
44+
<TourControlBtn />
45+
<ThemeToggler />
46+
</ControlButtons>
47+
<AuthContext.Consumer>
48+
{auth => {
49+
if (auth.authenticated) {
50+
return (
51+
<div className="authContainer">
52+
<Link href="/alldeployments" prefetch>
53+
<a className="navitem">Deployments</a>
54+
</Link>
55+
<HeaderMenu isOrganizationsPath={isOrganizationsPath} auth={auth}></HeaderMenu>
56+
</div>
57+
);
3358
}
34-
/>
35-
</a>
36-
</Link>
37-
<ControlButtons>
38-
<TourControlBtn />
39-
<ThemeToggler />
40-
</ControlButtons>
41-
<AuthContext.Consumer>
42-
{auth => {
43-
if (auth.authenticated) {
44-
return (
45-
<div className="authContainer">
46-
<Link href="/alldeployments" prefetch>
47-
<a className="navitem">Deployments</a>
48-
</Link>
49-
<HeaderMenu auth={auth}></HeaderMenu>
50-
</div>
51-
);
52-
}
53-
54-
return null;
55-
}}
56-
</AuthContext.Consumer>
57-
</StyledHeader>
58-
);
59+
60+
return null;
61+
}}
62+
</AuthContext.Consumer>
63+
</StyledHeader>
64+
);
65+
};
5966

6067
export default Header;

‎src/components/HeaderMenu/StyledHeaderMenu.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const DropdownButton = styled.a`
2525
}
2626
`;
2727

28-
export const StyledDropdown = styled.div`
29-
border-left: 1px solid ${color.blue};
28+
export const StyledDropdown = styled.div<{ isOrganizationsPath: boolean }>`
29+
border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
3030
cursor: pointer;
3131
padding: 10px 20px;
3232
hr {

‎src/components/HeaderMenu/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const useOutsideClick = callback => {
2929
return ref;
3030
};
3131

32-
const HeaderMenu = ({ auth }) => {
32+
const HeaderMenu = ({ auth, isOrganizationsPath }) => {
3333
const [open, setOpen] = React.useState(false);
3434

3535
const handleClickOutside = () => {
@@ -55,6 +55,7 @@ const HeaderMenu = ({ auth }) => {
5555
return (
5656
<>
5757
<Dropdown
58+
isOrganizationsPath={isOrganizationsPath}
5859
open={open}
5960
trigger={
6061
<DropdownButton ref={ref} onClick={handleOpen}>
@@ -96,10 +97,10 @@ const HeaderMenu = ({ auth }) => {
9697
);
9798
};
9899

99-
const Dropdown = ({ open, trigger, menu }) => {
100+
const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => {
100101
return (
101102
<>
102-
<StyledDropdown>
103+
<StyledDropdown isOrganizationsPath={isOrganizationsPath}>
103104
{trigger}
104105
{open ? (
105106
<DropdownMenu>

‎src/components/NewEnvironment/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ const NewEnvironment = ({
118118
id="branchName"
119119
className="inputBranch"
120120
type="text"
121-
placeholder="e.g. main or develop"
121+
placeholder="Enter branch name"
122122
value={inputBranchName}
123123
onChange={setBranchName}
124124
onBlur={() => toggleShowEnvType()}

‎src/components/Organizations/AddGroupToProject/index.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import gql from 'graphql-tag';
1010

1111
import { RoleSelect } from '../AddUserToGroup/Styles';
1212
import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
13+
import { Tooltip } from 'antd';
1314

1415
const ADD_GROUP_PROJECT_MUTATION = gql`
1516
mutation addProjectToGroup($groupName: String!, $projectName: String!) {
@@ -41,12 +42,13 @@ export const AddGroupToProject = ({
4142
return (
4243
<StyledNotificationWrapper>
4344
<div className="margins">
44-
<Button action={openModal}>
45-
<AddButtonContent>
46-
<span>+</span>
47-
<span>Group</span>
48-
</AddButtonContent>
49-
</Button>
45+
<Tooltip overlayClassName="orgTooltip" placement="bottom" title="Link a group to this project">
46+
<>
47+
<Button action={openModal}>
48+
<AddButtonContent>Link Group</AddButtonContent>
49+
</Button>
50+
</>
51+
</Tooltip>
5052
</div>
5153
<Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
5254
<React.Fragment>
@@ -60,7 +62,7 @@ export const AddGroupToProject = ({
6062
}
6163
return (
6264
<StyledNotification>
63-
<h4>Add Group</h4>
65+
<h4>Link Group</h4>
6466
<label>
6567
Group
6668
<RoleSelect>

‎src/components/Organizations/AddNotificationToProject/index.js

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { Mutation } from 'react-apollo';
33
import ReactSelect from 'react-select';
44

5+
import { Tooltip } from 'antd';
56
import Button from 'components/Button';
67
import Modal from 'components/Modal';
78
// @TODO: add this once the logic exists
@@ -47,12 +48,13 @@ export const AddNotificationToProject = ({
4748
return (
4849
<StyledNotificationWrapper>
4950
<div className="margins">
50-
<Button action={openModal}>
51-
<AddButtonContent>
52-
<span>+</span>
53-
<span>Notification</span>
54-
</AddButtonContent>
55-
</Button>
51+
<Tooltip overlayClassName="orgTooltip" placement="bottom" title="Link a notification to this project">
52+
<>
53+
<Button action={openModal}>
54+
<AddButtonContent>Link Notification</AddButtonContent>
55+
</Button>
56+
</>
57+
</Tooltip>
5658
</div>
5759
<Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} style={customStyles}>
5860
<React.Fragment>
@@ -79,7 +81,7 @@ export const AddNotificationToProject = ({
7981
});
8082
return (
8183
<StyledNotification>
82-
<h4>Add Notification</h4>
84+
<h4>Link Notification</h4>
8385
<label>
8486
Notification
8587
<RoleSelect>

‎src/components/Organizations/CustomIcons/DashboardIcon.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export const DashboardIcon = () => (
2+
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path d="M15.1398 7.62501L10.957 10.1622L19.0396 14.876V5.49268L15.1398 7.62501Z" fill="#3B67C6" />
4+
<path
5+
d="M6.36599 12.5272L0.00306702 16.486L9.52645 21.9803L19.0376 16.4869L9.52022 10.9887L6.36599 12.5272Z"
6+
fill="#3B67C6"
7+
/>
8+
<path d="M0 5.49007L0.00297163 16.4863L9.52013 10.9891V0.000488281L0 5.49007Z" fill="#3B67C6" />
9+
<path d="M10.9571 10.1616L19.0396 5.49205L10.957 0.827637L10.9571 10.1616Z" fill="#3B67C6" />
10+
</svg>
11+
);

‎src/components/Organizations/CustomIcons/OrganizationIcons.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Icon, { CustomIconComponentProps } from '@ant-design/icons/lib/components/Icon';
2+
3+
import { DashboardIcon } from './DashboardIcon';
4+
5+
/**
6+
* A place where svgs get turned into custom antd icons
7+
*/
8+
9+
export const IconDashboard = (props: Partial<CustomIconComponentProps>) => (
10+
<Icon component={DashboardIcon} {...props} />
11+
);

0 commit comments

Comments
 (0)