This will replace the current active environment
diff --git a/src/components/AddTask/components/CustomTaskConfirm.tsx b/src/components/AddTask/components/CustomTaskConfirm.tsx
index 16e865d8..b1a609e3 100644
--- a/src/components/AddTask/components/CustomTaskConfirm.tsx
+++ b/src/components/AddTask/components/CustomTaskConfirm.tsx
@@ -33,7 +33,7 @@ export const CustomTaskConfirm: FC = ({
Confirm Task
-
+
{taskText}
diff --git a/src/components/AddTask/components/DrushArchiveDump.js b/src/components/AddTask/components/DrushArchiveDump.js
index 53bc6e32..5058c403 100644
--- a/src/components/AddTask/components/DrushArchiveDump.js
+++ b/src/components/AddTask/components/DrushArchiveDump.js
@@ -57,7 +57,9 @@ const DrushArchiveDump = ({ pageEnvironment, onCompleted, onError, onNewTask })
required
/>
- {loading ?
+
+ {loading ?
);
}}
diff --git a/src/components/AddTask/components/DrushCacheClear.js b/src/components/AddTask/components/DrushCacheClear.js
index baa83e75..d82d767f 100644
--- a/src/components/AddTask/components/DrushCacheClear.js
+++ b/src/components/AddTask/components/DrushCacheClear.js
@@ -57,7 +57,9 @@ const DrushCacheClear = ({ pageEnvironment, onCompleted, onError, onNewTask }) =
required
/>
- {loading ?
+
+ {loading ?
);
}}
diff --git a/src/components/AddTask/components/DrushCron.js b/src/components/AddTask/components/DrushCron.js
index 9e266ee2..205b2113 100644
--- a/src/components/AddTask/components/DrushCron.js
+++ b/src/components/AddTask/components/DrushCron.js
@@ -58,7 +58,9 @@ const DrushCron = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
required
/>
- {loading ?
+
+ {loading ?
);
}}
diff --git a/src/components/AddTask/components/DrushRsyncFiles.js b/src/components/AddTask/components/DrushRsyncFiles.js
index 049c6782..caa3a1cc 100644
--- a/src/components/AddTask/components/DrushRsyncFiles.js
+++ b/src/components/AddTask/components/DrushRsyncFiles.js
@@ -78,6 +78,7 @@ const DrushRsyncFiles = ({
/>
taskDrushRsyncFiles({
variables: {
@@ -86,9 +87,9 @@ const DrushRsyncFiles = ({
},
})
}
- disabled={!selectedSourceEnv || loading }
+ disabled={!selectedSourceEnv || loading}
>
- {loading ?
);
diff --git a/src/components/AddTask/components/DrushSqlDump.js b/src/components/AddTask/components/DrushSqlDump.js
index 258b1765..2988ed3b 100644
--- a/src/components/AddTask/components/DrushSqlDump.js
+++ b/src/components/AddTask/components/DrushSqlDump.js
@@ -57,7 +57,9 @@ const DrushSqlDump = ({ pageEnvironment, onCompleted, onError, onNewTask }) => (
required
/>
- {loading ?
+
+ {loading ?
);
}}
diff --git a/src/components/AddTask/components/DrushSqlSync.js b/src/components/AddTask/components/DrushSqlSync.js
index 353cb187..748dbf7b 100644
--- a/src/components/AddTask/components/DrushSqlSync.js
+++ b/src/components/AddTask/components/DrushSqlSync.js
@@ -78,6 +78,7 @@ const DrushSqlSync = ({
/>
taskDrushSqlSync({
variables: {
@@ -88,7 +89,7 @@ const DrushSqlSync = ({
}
disabled={!selectedSourceEnv || loading}
>
- {loading ?
);
diff --git a/src/components/AddTask/components/DrushUserLogin.js b/src/components/AddTask/components/DrushUserLogin.js
index 2a3f52fc..9a3e4340 100644
--- a/src/components/AddTask/components/DrushUserLogin.js
+++ b/src/components/AddTask/components/DrushUserLogin.js
@@ -34,8 +34,8 @@ const DrushUserLogin = ({ pageEnvironment, onCompleted, onError, onNewTask }) =>
>
{(taskDrushUserLogin, { loading, data }) => {
if (data) {
- onNewTask();
- }
+ onNewTask();
+ }
return (
@@ -57,7 +57,9 @@ const DrushUserLogin = ({ pageEnvironment, onCompleted, onError, onNewTask }) =>
required
/>
- {loading ?
+
+ {loading ?
);
}}
diff --git a/src/components/AddTask/components/InvokeRegisteredTask.js b/src/components/AddTask/components/InvokeRegisteredTask.js
index 2c0539aa..f51ab4a6 100644
--- a/src/components/AddTask/components/InvokeRegisteredTask.js
+++ b/src/components/AddTask/components/InvokeRegisteredTask.js
@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from 'react';
import { Mutation } from 'react-apollo';
import ReactSelect from 'react-select';
@@ -52,7 +52,7 @@ const InvokeRegisteredTask = ({
defaultArgValues[item.name] = item.defaultValue;
}
});
- setAdvancedTaskArguments(defaultArgValues)
+ setAdvancedTaskArguments(defaultArgValues);
}, []);
let taskArgumentsExist = false;
@@ -134,7 +134,7 @@ const InvokeRegisteredTask = ({
- {loading ?
)}
diff --git a/src/components/AddTask/components/Styles.tsx b/src/components/AddTask/components/Styles.tsx
index e24a548f..c8b25a30 100644
--- a/src/components/AddTask/components/Styles.tsx
+++ b/src/components/AddTask/components/Styles.tsx
@@ -36,19 +36,19 @@ export const SelectWrapper = styled.div`
color: white;
padding: 10px;
}
-
+
.btn--disabled {
margin-right: 0;
}
-
+
.loader {
display: inline-block;
width: 50px;
height: 15px;
}
-
+
.loader:after {
- content: " ";
+ content: ' ';
display: block;
width: 20px;
height: 20px;
@@ -58,7 +58,7 @@ export const SelectWrapper = styled.div`
border-color: ${color.blue} transparent ${color.blue} transparent;
animation: loader 1.2s linear infinite;
}
-
+
@keyframes loader {
0% {
transform: rotate(0deg);
@@ -94,19 +94,19 @@ export const StyledRegisteredTasks = styled.div`
color: white;
padding: 10px;
}
-
+
.btn--disabled {
margin-right: 0;
}
-
+
.loader {
display: inline-block;
width: 50px;
height: 15px;
}
-
+
.loader:after {
- content: " ";
+ content: ' ';
display: block;
width: 20px;
height: 20px;
@@ -116,7 +116,7 @@ export const StyledRegisteredTasks = styled.div`
border-color: ${color.blue} transparent ${color.blue} transparent;
animation: loader 1.2s linear infinite;
}
-
+
@keyframes loader {
0% {
transform: rotate(0deg);
diff --git a/src/components/AddTask/index.js b/src/components/AddTask/index.js
index 74df16e8..d453c513 100644
--- a/src/components/AddTask/index.js
+++ b/src/components/AddTask/index.js
@@ -52,7 +52,7 @@ const AddTask = ({
-
+
{selectedTask && (
-
+
props.theme.backgrounds.primary};
+ .react-select__control,
+ .react-select__menu,
+ .react-select__option,
+ .react-select__single-value {
+ background: ${props => props.theme.backgrounds.primary};
color: ${props => props.theme.texts.primary};
}
-`;
\ No newline at end of file
+`;
diff --git a/src/components/AddVariable/index.js b/src/components/AddVariable/index.js
index d60bb851..c8bdabf2 100644
--- a/src/components/AddVariable/index.js
+++ b/src/components/AddVariable/index.js
@@ -1,13 +1,15 @@
-import React, {useEffect, useState} from "react";
-import Modal from "components/Modal";
-import ButtonBootstrap from "react-bootstrap/Button";
-import Button from 'components/Button'
-import ReactSelect from "react-select";
-import { Mutation } from "react-apollo";
-import withLogic from "components/AddVariable/logic";
-import addOrUpdateEnvVariableMutation from "../../lib/mutation/AddOrUpdateEnvVariableByName";
-import { NewVariable, NewVariableModal } from "./StyledAddVariable";
+import React, { useEffect, useState } from 'react';
+import { Mutation } from 'react-apollo';
+import ButtonBootstrap from 'react-bootstrap/Button';
+import ReactSelect from 'react-select';
+
import { Popconfirm } from 'antd';
+import withLogic from 'components/AddVariable/logic';
+import Button from 'components/Button';
+import Modal from 'components/Modal';
+
+import addOrUpdateEnvVariableMutation from '../../lib/mutation/AddOrUpdateEnvVariableByName';
+import { NewVariable, NewVariableModal } from './StyledAddVariable';
import {LoadingOutlined} from "@ant-design/icons";
/**
@@ -15,13 +17,13 @@ import {LoadingOutlined} from "@ant-design/icons";
*/
const scopeOptions = [
- { value: "BUILD", label: "BUILD" },
- { value: "RUNTIME", label: "RUNTIME" },
- { value: "GLOBAL", label: "GLOBAL" },
- { value: "CONTAINER_REGISTRY", label: "CONTAINER_REGISTRY" },
+ { value: 'BUILD', label: 'BUILD' },
+ { value: 'RUNTIME', label: 'RUNTIME' },
+ { value: 'GLOBAL', label: 'GLOBAL' },
+ { value: 'CONTAINER_REGISTRY', label: 'CONTAINER_REGISTRY' },
{
- value: "INTERNAL_CONTAINER_REGISTRY",
- label: "INTERNAL_CONTAINER_REGISTRY",
+ value: 'INTERNAL_CONTAINER_REGISTRY',
+ label: 'INTERNAL_CONTAINER_REGISTRY',
},
];
@@ -69,8 +71,8 @@ export const AddVariable = ({
setUpdateScope(varScope);
}, [varName, varValue]);
const handleError = () => {
- setProjectErrorAlert ? setProjectErrorAlert(true) : setEnvironmentErrorAlert(true)
- }
+ setProjectErrorAlert ? setProjectErrorAlert(true) : setEnvironmentErrorAlert(true);
+ };
const handlePermissionCheck = () => {
let waitForGQL = setTimeout(() => {
@@ -86,11 +88,11 @@ export const AddVariable = ({
{
icon ?
-
+
Update
: !loading ?
-
+
Add
:
@@ -117,9 +119,15 @@ export const AddVariable = ({
aria-label="Scope"
placeholder="Select a variable scope"
name="results"
- value={varScope ? scopeOptions.find((o) => o.value === updateScope.toUpperCase()) : scopeOptions.find((o) => o.value === inputScope)}
- onChange={varScope ? (selectedOption) => setUpdateScope(selectedOption.value)
- : (selectedOption) => setInputScope(selectedOption.value)
+ value={
+ varScope
+ ? scopeOptions.find(o => o.value === updateScope.toUpperCase())
+ : scopeOptions.find(o => o.value === inputScope)
+ }
+ onChange={
+ varScope
+ ? selectedOption => setUpdateScope(selectedOption.value)
+ : selectedOption => setInputScope(selectedOption.value)
}
options={scopeOptions}
required
@@ -129,6 +137,7 @@ export const AddVariable = ({
-
+
cancel
-
+ console.error(e)}>
{(addOrUpdateEnvVariableByName, { called, error, data, loading }) => {
- let updateVar = varValues.map((varName) => {
+ let updateVar = varValues.map(varName => {
return varName.name;
});
updateVar = updateVar.includes(inputName);
@@ -168,10 +178,14 @@ export const AddVariable = ({
refresh().then(closeModal).then(handleError);
}
- if (action === "add" && inputValue !== '' || action === "edit" && updateValue !== '' || action === "edit" && inputValue !== '') {
- if (action === "edit" && called ) {
+ if (
+ (action === 'add' && inputValue !== '') ||
+ (action === 'edit' && updateValue !== '') ||
+ (action === 'edit' && inputValue !== '')
+ ) {
+ if (action === 'edit' && called) {
return Updating variable
;
- } else if (action === "add" && called) {
+ } else if (action === 'add' && called) {
return Adding variable
;
}
}
@@ -193,7 +207,10 @@ export const AddVariable = ({
}, 1000);
};
- if (action === "add" && inputValue === '' || action === "edit" && updateValue === '' && inputValue === '') {
+ if (
+ (action === 'add' && inputValue === '') ||
+ (action === 'edit' && updateValue === '' && inputValue === '')
+ ) {
return (
- {varTarget === "Environment"
+ {varTarget === 'Environment'
? updateVar || varName
- ? "Update environment variable"
- : "Add environment variable"
+ ? 'Update environment variable'
+ : 'Add environment variable'
: updateVar || varName
- ? "Update project variable"
- : "Add project variable"}
+ ? 'Update project variable'
+ : 'Add project variable'}
);
} else {
return (
- {varTarget === "Environment"
+ {varTarget === 'Environment'
? updateVar || varName
- ? "Update environment variable"
- : "Add environment variable"
+ ? 'Update environment variable'
+ : 'Add environment variable'
: updateVar || varName
- ? "Update project variable"
- : "Add project variable"}
+ ? 'Update project variable'
+ : 'Add project variable'}
- )
+ );
}
-
}}
diff --git a/src/components/AddVariable/logic.js b/src/components/AddVariable/logic.js
index bb0560d7..c75a7050 100644
--- a/src/components/AddVariable/logic.js
+++ b/src/components/AddVariable/logic.js
@@ -1,25 +1,37 @@
-import compose from "recompose/compose";
-import withState from "recompose/withState";
-import withHandlers from "recompose/withHandlers";
+import compose from 'recompose/compose';
+import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
-const withInputValue = withState("inputValue", "setInputValue", "");
-const withInputName = withState("inputName", "setInputName", "");
-const withInputScope = withState("inputScope", "setInputScope", "");
-const withInputClear = withState("clear", "setClear", "");
+const withInputValue = withState('inputValue', 'setInputValue', '');
+const withInputName = withState('inputName', 'setInputName', '');
+const withInputScope = withState('inputScope', 'setInputScope', '');
+const withInputClear = withState('clear', 'setClear', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => (event) =>
- setInputValue(event.target.value),
- setInputName: ({ setInputName }) => (event) =>
- setInputName(event.target.value),
- setClear: ({ setInputValue, setInputName, setInputScope }) => () =>
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
+ setInputName:
+ ({ setInputName }) =>
+ event =>
+ setInputName(event.target.value),
+ setClear:
+ ({ setInputValue, setInputName, setInputScope }) =>
+ () =>
[setInputValue(''), setInputName(''), setInputScope('')],
});
-const withModalState = withState("open", "setOpen", false);
+const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false),
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
export default compose(
diff --git a/src/components/Alert/StyledAlert.tsx b/src/components/Alert/StyledAlert.tsx
index e629dc4f..53d8e148 100644
--- a/src/components/Alert/StyledAlert.tsx
+++ b/src/components/Alert/StyledAlert.tsx
@@ -1,5 +1,5 @@
+import { color } from 'lib/variables';
import styled, { css } from 'styled-components';
-import { color } from "lib/variables";
const sharedStyles = css`
position: relative;
@@ -32,14 +32,13 @@ export const StyledAlert = styled.div`
cursor: pointer;
transition: 0.3s;
cursor: pointer;
-
+
&.closebtn:hover {
color: black;
}
}
-
`;
export const StyledAlertContent = styled.div`
- ${sharedStyles}
-`;
\ No newline at end of file
+ ${sharedStyles}
+`;
diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js
index b21aa671..c9a4abad 100644
--- a/src/components/Alert/index.js
+++ b/src/components/Alert/index.js
@@ -1,29 +1,27 @@
-import React from "react";
-import {StyledAlert, StyledAlertContent} from './StyledAlert';
+import React from 'react';
-export const Alert = ({
- type, header, message, closeAlert
-}) => {
- const createClassName = () => {
- let className = `${type ? `${type} alert-element` : 'alert-element'}`;
- return className;
- };
+import { StyledAlert, StyledAlertContent } from './StyledAlert';
- const AlertElement =
-
- closeAlert()}>
- ×
+export const Alert = ({ type, header, message, closeAlert }) => {
+ const createClassName = () => {
+ let className = `${type ? `${type} alert-element` : 'alert-element'}`;
+ return className;
+ };
+
+ const AlertElement = (
+
+ closeAlert()}>
+ ×
+
+
+
+ {header} {message}
-
-
- {header} {message}
-
-
-
+
+
+ );
-
-
- return <>{AlertElement};
-}
+ return <>{AlertElement};
+};
-export default Alert;
\ No newline at end of file
+export default Alert;
diff --git a/src/components/Backups/index.stories.tsx b/src/components/Backups/index.stories.tsx
index a2b15e6c..42a882d1 100644
--- a/src/components/Backups/index.stories.tsx
+++ b/src/components/Backups/index.stories.tsx
@@ -1,11 +1,12 @@
import React from 'react';
+
import { faker } from '@faker-js/faker';
import { Meta } from '@storybook/react';
import withButtonOverrides from '../../../.storybook/decorators/withButtonOverrides';
import Backups, { BackupsProps } from './index';
-const meta:Meta
= {
+const meta: Meta = {
component: Backups,
title: 'Components/Backups',
decorators: [withButtonOverrides('.download', 'click', 'Backups button click')],
@@ -14,18 +15,18 @@ const meta:Meta = {
faker.seed(123);
const backupsData = [
{
- id:faker.string.uuid(),
+ id: faker.string.uuid(),
source: 'mariadb',
created: '2019-11-18T08:00:00',
backupId: '40',
restore: {
status: 'completed',
restoreLocation: 'https://example.com/backup',
- restoreSize: 300
+ restoreSize: 300,
},
},
{
- id:faker.string.uuid(),
+ id: faker.string.uuid(),
source: 'mariadb',
created: '2019-11-19T08:00:00',
backupId: '41',
@@ -34,7 +35,7 @@ const backupsData = [
},
},
{
- id:faker.string.uuid(),
+ id: faker.string.uuid(),
source: 'mariadb',
created: '2019-11-19T09:00:00',
backupId: '42',
@@ -42,13 +43,10 @@ const backupsData = [
status: 'pending',
},
},
-] satisfies BackupsProps["backups"];
-
-
+] satisfies BackupsProps['backups'];
export const Default = () => = ({ backups }) => (
-
+
Source
Created
@@ -30,12 +30,12 @@ const Backups: FC = ({ backups }) => (
{!backups.length && No Backups
}
{backups.map(backup => (
-
+
{backup.source}
{moment.utc(backup.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
{backup.backupId}
-
diff --git a/src/components/Breadcrumbs/StyledBreadCrumb.tsx b/src/components/Breadcrumbs/StyledBreadCrumb.tsx
index eb3e3189..fbad1654 100644
--- a/src/components/Breadcrumbs/StyledBreadCrumb.tsx
+++ b/src/components/Breadcrumbs/StyledBreadCrumb.tsx
@@ -48,7 +48,7 @@ export const BreadCrumbLink = styled.a`
export const StyledBreadcrumbsWrapper = styled.div`
padding: 1vw 0.75vw;
- min-height:100px;
+ min-height: 100px;
background-color: ${props => props.theme.backgrounds.breadCrumbs};
border-bottom: ${props =>
props.theme.colorScheme === 'dark' ? `2px solid ${props.theme.borders.box}` : `1px solid ${color.midGrey}`};
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
index 99ae8b9a..cd2e3218 100644
--- a/src/components/Breadcrumbs/index.tsx
+++ b/src/components/Breadcrumbs/index.tsx
@@ -5,7 +5,7 @@ import { StyledBreadcrumbsWrapper } from './StyledBreadCrumb';
/**
* Displays the Project and, optionally, the Environment breadcrumbs.
*/
-const Breadcrumbs = ({ children }: { children: JSX.Element[] | ReactNode}) => (
+const Breadcrumbs = ({ children }: { children: JSX.Element[] | ReactNode }) => (
{children}
diff --git a/src/components/BulkDeployments/StyledBulkDeployments.tsx b/src/components/BulkDeployments/StyledBulkDeployments.tsx
index 35f719e7..e69853dd 100644
--- a/src/components/BulkDeployments/StyledBulkDeployments.tsx
+++ b/src/components/BulkDeployments/StyledBulkDeployments.tsx
@@ -87,9 +87,9 @@ export const BulkDeploymentsDataTable = styled.div`
.priority {
width: 8%;
}
- .buildstep{
- display:flex;
- flex-direction:column;
+ .buildstep {
+ display: flex;
+ flex-direction: column;
}
.status {
@media ${bp.xs_smallOnly} {
diff --git a/src/components/BulkDeployments/index.stories.tsx b/src/components/BulkDeployments/index.stories.tsx
index 52012f25..08613a26 100644
--- a/src/components/BulkDeployments/index.stories.tsx
+++ b/src/components/BulkDeployments/index.stories.tsx
@@ -12,16 +12,13 @@ export default {
title: 'Components/BulkDeployments',
tags: ['autodocs'],
decorators: [withButtonOverrides('button', 'click', 'Deployment button click')],
- argTypes:{
+ argTypes: {
deployments: {
description: 'Deployments array',
},
- }
-
+ },
};
-
-
const data = [
{
...getDeployment(123),
@@ -45,7 +42,6 @@ const data = [
},
];
-
type Story = StoryObj
;
export const Complete: Story = {
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 268de7cb..090a7097 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -12,6 +12,7 @@ interface ButtonProps {
children?: ReactNode;
variant?: string;
icon?: string;
+ testId?: string;
}
const Button: FC = ({
@@ -22,6 +23,7 @@ const Button: FC = ({
children,
variant,
icon,
+ testId,
}) => {
const createClassName = () => {
let className = `${variant ? `btn-${variant}` : 'btn'} ${disabled ? 'btn--disabled' : ''}`;
@@ -40,9 +42,11 @@ const Button: FC = ({
}
};
+ const buttonTestProps = testId ? { ['data-cy']: testId } : {};
+
const ButtonElement = href ? (
- {icon &&
) : (
= ({
className={createClassName()}
onClick={onClick}
disabled={loading || disabled}
+ {...buttonTestProps}
>
{icon && (typeof icon === 'string' ?
+
{success ? afterText || 'Cancellation requested' : beforeText || 'Cancel deployment'}
{error && openNotificationWithIcon(error.message)}
@@ -36,6 +36,7 @@ export const CancelDeploymentButton = ({ action, success, loading, error, before
const CancelDeployment = ({ deployment, beforeText, afterText }) => (
console.error(e)}
mutation={CANCEL_DEPLOYMENT_MUTATION}
variables={{
deploymentId: deployment.id,
diff --git a/src/components/CancelTask/index.tsx b/src/components/CancelTask/index.tsx
index 383a8a10..52c464e5 100644
--- a/src/components/CancelTask/index.tsx
+++ b/src/components/CancelTask/index.tsx
@@ -60,7 +60,7 @@ export const CancelTaskButton: FC = ({
return (
<>
{contextHolder}
-
+
{success ? afterText : beforeText}
diff --git a/src/components/DeleteConfirm/index.js b/src/components/DeleteConfirm/index.js
index dc33bc14..1eec085f 100644
--- a/src/components/DeleteConfirm/index.js
+++ b/src/components/DeleteConfirm/index.js
@@ -21,7 +21,7 @@ export const DeleteConfirm = ({
}) => {
return (
-
+
Delete
@@ -33,11 +33,11 @@ export const DeleteConfirm = ({
Type the name of the {deleteType} to confirm.
-
cancel
-
+
Delete
diff --git a/src/components/DeleteConfirm/index.stories.tsx b/src/components/DeleteConfirm/index.stories.tsx
index e74e787c..18a5d104 100644
--- a/src/components/DeleteConfirm/index.stories.tsx
+++ b/src/components/DeleteConfirm/index.stories.tsx
@@ -1,11 +1,11 @@
import React, { useState } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
import { action } from '@storybook/addon-actions';
import { Meta } from '@storybook/react';
import DeleteConfirm, { DeleteConfirm as DeleteConfirmBaseComponent } from './index';
-
interface Props {
onDeleteFunction: () => void;
setInputValueFunction: () => void;
@@ -42,6 +42,7 @@ export const WithConfirmationBlocked = ({
closeModalFunction,
}: Props) => (
-
- {
- icon ?
-
- Delete
-
- :
-
- Delete
-
- }
-
-
+
+
+ {icon ? (
+
+ Delete
+
+ ) : (
+
+ Delete
+
+ )}
+
+
- This will delete the {deleteType}{' '}
- {deleteName} and cannot be undone. Make sure this is something you
- really want to do!
+ This will delete the {deleteType} {deleteName} and cannot be undone.
+ Make sure this is something you really want to do!
Type the name of the {deleteType} to confirm.
-
+
cancel
@@ -61,12 +56,7 @@ export const DeleteVariable = ({
{(deleteEnvVariableByName, { loading, error, data }) => {
if (error) {
console.error(error);
- return (
-
- Unauthorized: You don't have permission to
- delete this variable.
-
- );
+ return
Unauthorized: You don't have permission to delete this variable.
;
}
if (data) {
@@ -86,7 +76,12 @@ export const DeleteVariable = ({
};
return (
-
+
{loading ? 'Deleting...' : 'Delete'}
);
diff --git a/src/components/DeleteVariable/logic.js b/src/components/DeleteVariable/logic.js
index 9ed4801e..909df960 100644
--- a/src/components/DeleteVariable/logic.js
+++ b/src/components/DeleteVariable/logic.js
@@ -5,23 +5,25 @@ import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
setInputValue:
- ({ setInputValue }) =>
- event =>
- setInputValue(event.target.value),
- setClear: ({ setInputValue }) => () =>
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
+ setClear:
+ ({ setInputValue }) =>
+ () =>
[setInputValue('')],
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
openModal:
- ({ setOpen }) =>
- () =>
- setOpen(true),
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
closeModal:
- ({ setOpen }) =>
- () =>
- setOpen(false),
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/DeployLatest/StyledDeployLatest.js b/src/components/DeployLatest/StyledDeployLatest.js
index 8e474e6d..b72d185d 100644
--- a/src/components/DeployLatest/StyledDeployLatest.js
+++ b/src/components/DeployLatest/StyledDeployLatest.js
@@ -41,7 +41,7 @@ export const NewDeployment = styled.div`
height: 15px;
}
.loader:after {
- content: " ";
+ content: ' ';
display: block;
width: 20px;
height: 20px;
diff --git a/src/components/DeployLatest/index.js b/src/components/DeployLatest/index.js
index 2b1efe68..4391aebc 100644
--- a/src/components/DeployLatest/index.js
+++ b/src/components/DeployLatest/index.js
@@ -61,6 +61,7 @@ const DeployLatest = ({ pageEnvironment: environment, onDeploy, ...rest }) => {
`Start a new deployment from environment ${environment.project.name}-${environment.deployBaseRef}.`}
console.error(e)}
mutation={DEPLOY_ENVIRONMENT_LATEST_MUTATION}
variables={{
environmentId: environment.id,
@@ -74,10 +75,14 @@ const DeployLatest = ({ pageEnvironment: environment, onDeploy, ...rest }) => {
return (
{contextHolder}
-
+
Deploy
- {success && Deployment queued.
}
+ {success && (
+
+ Deployment queued.
+
+ )}
{error && openNotificationWithIcon(error.message)}
);
diff --git a/src/components/DeployLatest/index.stories.tsx b/src/components/DeployLatest/index.stories.tsx
index fca82312..b07855b6 100644
--- a/src/components/DeployLatest/index.stories.tsx
+++ b/src/components/DeployLatest/index.stories.tsx
@@ -1,8 +1,9 @@
import { Meta, StoryObj } from '@storybook/react';
-import { generateEnvironments,seed } from '../../../.storybook/mocks/mocks';
-import DeployLatest from './index';
import withButtonOverrides from '../../../.storybook/decorators/withButtonOverrides';
+import { generateEnvironments, seed } from '../../../.storybook/mocks/mocks';
+import DeployLatest from './index';
+
const meta: Meta = {
component: DeployLatest,
title: 'Components/Deploy Latest',
@@ -16,7 +17,6 @@ seed();
const environment = generateEnvironments({ name: 'master' });
-
/**
* Default
*/
diff --git a/src/components/DeployTargets/DeployTargetsSkeleton.tsx b/src/components/DeployTargets/DeployTargetsSkeleton.tsx
index 1990ce61..8e6d562c 100644
--- a/src/components/DeployTargets/DeployTargetsSkeleton.tsx
+++ b/src/components/DeployTargets/DeployTargetsSkeleton.tsx
@@ -1,20 +1,21 @@
-import React from "react";
-import Skeleton from "react-loading-skeleton";
-import { DeployTargetWrapper } from "./StyledDeployTargets";
+import React from 'react';
+import Skeleton from 'react-loading-skeleton';
+
+import { DeployTargetWrapper } from './StyledDeployTargets';
const DeployTargetSkeleton = () => {
- const numberOfDeployTargetFields = 4
+ const numberOfDeployTargetFields = 4;
const skeletonItem = (
);
@@ -26,11 +27,7 @@ const DeployTargetSkeleton = () => {
Branches enabled
Pull requests enabled
-
- {[...Array(numberOfDeployTargetFields)].map(
- () => skeletonItem
- )}
-
+
{[...Array(numberOfDeployTargetFields)].map(() => skeletonItem)}
);
};
diff --git a/src/components/DeployTargets/StyledDeployTargets.tsx b/src/components/DeployTargets/StyledDeployTargets.tsx
index 902374ee..0ec99087 100644
--- a/src/components/DeployTargets/StyledDeployTargets.tsx
+++ b/src/components/DeployTargets/StyledDeployTargets.tsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { bp, color } from "lib/variables";
+import { bp, color } from 'lib/variables';
+import styled from 'styled-components';
export const DeployTargetWrapper = styled.div`
width: 50%;
diff --git a/src/components/DeployTargets/index.js b/src/components/DeployTargets/index.js
index 00a43b61..f25b6681 100644
--- a/src/components/DeployTargets/index.js
+++ b/src/components/DeployTargets/index.js
@@ -1,5 +1,6 @@
-import React from "react";
-import { DeployTargetWrapper } from "./StyledDeployTargets";
+import React from 'react';
+
+import { DeployTargetWrapper } from './StyledDeployTargets';
const DeployTargets = ({ project }) => {
return (
@@ -10,7 +11,7 @@ const DeployTargets = ({ project }) => {
Pull requests enabled
- {project.deployTargetConfigs.map((depTarget) => (
+ {project.deployTargetConfigs.map(depTarget => (
{depTarget.deployTarget.friendlyName != null
diff --git a/src/components/Deployment/index.js b/src/components/Deployment/index.js
index 01ff023b..85d504de 100644
--- a/src/components/Deployment/index.js
+++ b/src/components/Deployment/index.js
@@ -71,7 +71,9 @@ const Deployment = ({ deployment, checkedParseState, changeState }) => (
Log view
- {checkedParseState ? 'View raw' : 'View parsed'}
+
+ {checkedParseState ? 'View raw' : 'View parsed'}
+
diff --git a/src/components/Deployment/index.stories.tsx b/src/components/Deployment/index.stories.tsx
index da58f59f..f60c80a1 100644
--- a/src/components/Deployment/index.stories.tsx
+++ b/src/components/Deployment/index.stories.tsx
@@ -1,8 +1,8 @@
import React from 'react';
+import withButtonOverrides from '../../../.storybook/decorators/withButtonOverrides';
import { getDeployment } from '../../../.storybook/mocks/mocks';
import Deployment from './index';
-import withButtonOverrides from '../../../.storybook/decorators/withButtonOverrides';
export default {
component: Deployment,
@@ -11,10 +11,8 @@ export default {
decorators: [withButtonOverrides('.btn:not(div.field .btn)', 'click', 'Cancel deployment click')],
};
-
const data = getDeployment(123);
-
export const Complete = () => (
= ({ deployments, environmentSlug, proje
Status
Duration
-
+
{!deployments.length &&
No Deployments
}
{deployments.map(deployment => (
-
+
= ({ deployments, environmentSlug, proje
{moment.utc(deployment.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
-
+
{deployment.status.charAt(0).toUpperCase() + deployment.status.slice(1)}
{!['complete', 'cancelled', 'failed'].includes(deployment.status) && deployment.buildStep && (
@@ -75,7 +75,7 @@ const Deployments: FC = ({ deployments, environmentSlug, proje
-
+
{['new', 'pending', 'queued', 'running'].includes(deployment.status) && (
)}
diff --git a/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js b/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js
index 5d206627..cb71813a 100644
--- a/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js
+++ b/src/components/DeploymentsByFilter/StyledDeploymentsByFilter.js
@@ -156,9 +156,9 @@ export const DeploymentsDataTable = styled.div`
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
- .buildstep{
- display:flex;
- flex-direction:column;
+ .buildstep {
+ display: flex;
+ flex-direction: column;
}
.status {
@media ${bp.smallOnly} {
diff --git a/src/components/DeploymentsByFilter/index.stories.tsx b/src/components/DeploymentsByFilter/index.stories.tsx
index 483bbb5a..81924f1c 100644
--- a/src/components/DeploymentsByFilter/index.stories.tsx
+++ b/src/components/DeploymentsByFilter/index.stories.tsx
@@ -1,10 +1,11 @@
-import { MockAllDeployments } from "../../../.storybook/mocks/api";
-import { StoryObj } from '@storybook/react';
import React from 'react';
+import { StoryObj } from '@storybook/react';
+
+import withButtonOverrides from '../../../.storybook/decorators/withButtonOverrides';
+import { MockAllDeployments } from '../../../.storybook/mocks/api';
+import DeploymentsByFilterSkeleton from './DeploymentsByFilterSkeleton';
import DeploymentsByFilter from './index';
-import DeploymentsByFilterSkeleton from "./DeploymentsByFilterSkeleton";
-import withButtonOverrides from "../../../.storybook/decorators/withButtonOverrides";
export default {
component: DeploymentsByFilter,
@@ -15,12 +16,12 @@ export default {
type Story = StoryObj
;
export const Default: Story = {
- args:{
- deployments: MockAllDeployments(123)
- }
-}
+ args: {
+ deployments: MockAllDeployments(123),
+ },
+};
export const Loading: Story = {
- render: () =>
-
-
-
Environment Type
-
-
+
+
-
-
-
Deployment Type
-
-
+
+
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
+
);
};
diff --git a/src/components/Environment/index.js b/src/components/Environment/index.js
index 70fe6f8a..766046f3 100644
--- a/src/components/Environment/index.js
+++ b/src/components/Environment/index.js
@@ -33,11 +33,11 @@ const Environment = ({ environment }) => {
: '';
return (
-
+
Environment Type
-
+
{environment.environmentType}
{environment.project.productionEnvironment &&
environment.project.standbyProductionEnvironment &&
@@ -55,7 +55,9 @@ const Environment = ({ environment }) => {
Deployment Type
-
{environment.deployType}
+
+ {environment.deployType}
+
@@ -75,7 +77,7 @@ const Environment = ({ environment }) => {
Source
@@ -131,7 +133,7 @@ const Environment = ({ environment }) => {
)}
Routes
-
+
{environment.routes
? environment.routes.split(',').map(route => (
@@ -175,7 +177,7 @@ const Environment = ({ environment }) => {
}}
)}
-
+ console.error(e)}>
{(deleteEnvironment, { loading, called, error, data }) => {
if (error) {
return {error.message}
;
diff --git a/src/components/Environment/index.stories.tsx b/src/components/Environment/index.stories.tsx
index 19637a0a..de32098e 100644
--- a/src/components/Environment/index.stories.tsx
+++ b/src/components/Environment/index.stories.tsx
@@ -1,7 +1,6 @@
import React from 'react';
import { generateEnvironments, generateProjectInfo, seed } from '../../../.storybook/mocks/mocks';
-
import Environment from './index';
export default {
diff --git a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
index 2998202f..d3446623 100644
--- a/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
+++ b/src/components/EnvironmentVariables/EnvironmentVariablesSkeleton.tsx
@@ -1,10 +1,8 @@
-import React from "react";
-import Skeleton from "react-loading-skeleton";
-import {
- StyledEnvironmentVariableDetails,
- StyledProjectVariableTable,
-} from "./StyledEnvironmentVariables";
-import Button from "react-bootstrap/Button";
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Skeleton from 'react-loading-skeleton';
+
+import { StyledEnvironmentVariableDetails, StyledProjectVariableTable } from './StyledEnvironmentVariables';
const EnvironmentVariablesSkeleton = () => {
const numberOfVariableFields = 3;
@@ -12,10 +10,10 @@ const EnvironmentVariablesSkeleton = () => {
const skeletonItem = (
);
@@ -23,10 +21,10 @@ const EnvironmentVariablesSkeleton = () => {
const projectSkeletonItem = (
);
@@ -49,13 +47,9 @@ const EnvironmentVariablesSkeleton = () => {
Scope
-
- {[...Array(numberOfVariableFields)].map(
- () => skeletonItem
- )}
-
+
{[...Array(numberOfVariableFields)].map(() => skeletonItem)}
-
+
Project Variables
@@ -72,11 +66,7 @@ const EnvironmentVariablesSkeleton = () => {
Scope
-
- {[...Array(numberOfVariableFields)].map(
- () => projectSkeletonItem
- )}
-
+
{[...Array(numberOfVariableFields)].map(() => projectSkeletonItem)}
);
diff --git a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
index 42950f53..32334bc9 100644
--- a/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
+++ b/src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { bp, color } from "lib/variables";
+import { bp, color } from 'lib/variables';
+import styled from 'styled-components';
export const VariableActions = styled.div`
display: flex;
@@ -72,7 +72,7 @@ export const StyledEnvironmentVariableDetails = styled.div`
width: 100%;
&::before {
- background-image: url("/static/images/git-lab.svg");
+ background-image: url('/static/images/git-lab.svg');
background-size: 19px 17px;
}
@@ -113,7 +113,7 @@ export const StyledEnvironmentVariableDetails = styled.div`
.header-buttons {
display: flex;
margin: 0 4px;
-
+
.add-variable {
width: 54px;
height: 38px;
@@ -127,14 +127,14 @@ export const StyledEnvironmentVariableDetails = styled.div`
display: inline-block;
width: 36px;
height: 36px;
-
+
&.value-btn {
width: 90px;
height: 17px;
}
}
.loader:after {
- content: " ";
+ content: ' ';
display: block;
width: 24px;
height: 24px;
@@ -236,15 +236,15 @@ export const StyledVariableTable = styled.div`
}
.data-table {
- background-color: ${(props) => props.theme.backgrounds.table};
- border: 1px solid ${(props) => props.theme.borders.tableRow};
+ background-color: ${props => props.theme.backgrounds.table};
+ border: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
}
.data-none {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -252,8 +252,8 @@ export const StyledVariableTable = styled.div`
}
.values-present.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -291,12 +291,12 @@ export const StyledVariableTable = styled.div`
width: 32.5%;
}
& .varUpdate {
- display: flex;
- padding: 0;
+ display: flex;
+ padding: 0;
- button {
- background-color: #fff;
- }
+ button {
+ background-color: #fff;
+ }
}
& .varActions {
width: 20%;
@@ -311,8 +311,8 @@ export const StyledVariableTable = styled.div`
}
.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
align-items: center;
@@ -438,7 +438,7 @@ export const StyledProjectVariableTable = styled.div`
padding-left: 20px;
@media ${bp.tabletDown} {
- width: 30%
+ width: 30%;
}
}
&.scope {
@@ -459,15 +459,15 @@ export const StyledProjectVariableTable = styled.div`
}
.data-table {
- background-color: ${(props) => props.theme.backgrounds.table};
- border: 1px solid ${(props) => props.theme.borders.tableRow};
+ background-color: ${props => props.theme.backgrounds.table};
+ border: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
}
.data-none {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -475,8 +475,8 @@ export const StyledProjectVariableTable = styled.div`
}
.values-present.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -520,8 +520,8 @@ export const StyledProjectVariableTable = styled.div`
}
.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
align-items: center;
diff --git a/src/components/EnvironmentVariables/index.js b/src/components/EnvironmentVariables/index.js
index 2b9c4719..6559f886 100644
--- a/src/components/EnvironmentVariables/index.js
+++ b/src/components/EnvironmentVariables/index.js
@@ -1,38 +1,41 @@
-import React, { Fragment, useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-import EnvironmentProjectByProjectNameWithEnvVarsValueQuery from "../../lib/query/EnvironmentAndProjectByOpenshiftProjectNameWithEnvVarsValue";
-import EnvironmentByProjectNameWithEnvVarsValueQuery from "../../lib/query/EnvironmentByOpenshiftProjectNameWithEnvVarsValue";
-import { useLazyQuery } from "@apollo/react-hooks";
-import DeleteVariable from "components/DeleteVariable";
-import AddVariable from "../AddVariable";
-import ViewVariableValue from "../ViewVariableValue";
-import Button from "react-bootstrap/Button";
-import Collapse from "react-bootstrap/Collapse";
+import React, { Fragment, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Collapse from 'react-bootstrap/Collapse';
+
+import Image from 'next/image';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { useLazyQuery } from '@apollo/react-hooks';
+import { Tag } from 'antd';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Alert from 'components/Alert';
+import Btn from 'components/Button';
import withLogic from 'components/DeleteConfirm/logic';
+import DeleteVariable from 'components/DeleteVariable';
+import ProjectVariablesLink from 'components/link/ProjectVariables';
+
+import EnvironmentProjectByProjectNameWithEnvVarsValueQuery from '../../lib/query/EnvironmentAndProjectByOpenshiftProjectNameWithEnvVarsValue';
+import EnvironmentByProjectNameWithEnvVarsValueQuery from '../../lib/query/EnvironmentByOpenshiftProjectNameWithEnvVarsValue';
+import hide from '../../static/images/hide.svg';
+import show from '../../static/images/show.svg';
+import AddVariable from '../AddVariable';
+import { DeleteVariableButton } from '../DeleteVariable/StyledDeleteVariable';
+import ViewVariableValue from '../ViewVariableValue';
import {
StyledEnvironmentVariableDetails,
StyledProjectVariableTable,
StyledVariableTable,
VariableActions,
-} from "./StyledEnvironmentVariables";
-import Image from "next/image";
-import show from "../../static/images/show.svg";
-import hide from "../../static/images/hide.svg";
-import ProjectVariablesLink from "components/link/ProjectVariables";
-import Alert from 'components/Alert'
-import {Tag} from "antd";
-import Btn from 'components/Button'
-import {DeleteVariableButton} from "../DeleteVariable/StyledDeleteVariable";
-import {LoadingOutlined} from "@ant-design/icons";
+} from './StyledEnvironmentVariables';
/**
* Displays the environment variable information.
*/
-const hashValue = (value) => {
- let hashedVal = "●";
+const hashValue = value => {
+ let hashedVal = '●';
for (let l = 0; l < value.length; l++) {
- hashedVal += "●";
+ hashedVal += '●';
}
return hashedVal;
};
@@ -47,9 +50,9 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
const [prjValueState, setPrjValueState] = useState(initProjectValueState);
const [openEnvVars, setOpenEnvVars] = useState(false);
const [openPrjVars, setOpenPrjVars] = useState(false);
- const [updateVarValue, setUpdateVarValue ] = useState('');
- const [updateVarName, setUpdateVarName ] = useState('');
- const [updateVarScope, setUpdateVarScope ] = useState('');
+ const [updateVarValue, setUpdateVarValue] = useState('');
+ const [updateVarName, setUpdateVarName] = useState('');
+ const [updateVarScope, setUpdateVarScope] = useState('');
const [environmentErrorAlert, setEnvironmentErrorAlert] = useState(false);
const [projectErrorAlert, setProjectErrorAlert] = useState(false);
const [action, setAction] = useState('');
@@ -62,34 +65,34 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
setProjectErrorAlert(false);
};
- const [
- getEnvVarValues,
- { loading: envLoading, error: envError, data: envValues },
- ] = useLazyQuery(EnvironmentByProjectNameWithEnvVarsValueQuery, {
- variables: { openshiftProjectName: environment.openshiftProjectName },
- onError: () => {
- setOpenEnvVars(false);
- setValueState(initValueState);
- setEnvironmentErrorAlert(true);
+ const [getEnvVarValues, { loading: envLoading, error: envError, data: envValues }] = useLazyQuery(
+ EnvironmentByProjectNameWithEnvVarsValueQuery,
+ {
+ variables: { openshiftProjectName: environment.openshiftProjectName },
+ onError: () => {
+ setOpenEnvVars(false);
+ setValueState(initValueState);
+ setEnvironmentErrorAlert(true);
+ },
}
- });
+ );
if (envValues) {
displayVars = envValues.environmentVars.envVariables;
- }
+ };
if (envError) console.error(envError);
- const [
- getPrjEnvVarValues,
- { loading: prjLoading, error: prjError, data: prjEnvValues },
- ] = useLazyQuery(EnvironmentProjectByProjectNameWithEnvVarsValueQuery, {
- variables: { openshiftProjectName: environment.openshiftProjectName },
- onError: () => {
- setOpenPrjVars(!openPrjVars);
- setProjectErrorAlert(true);
+ const [getPrjEnvVarValues, { loading: prjLoading, error: prjError, data: prjEnvValues }] = useLazyQuery(
+ EnvironmentProjectByProjectNameWithEnvVarsValueQuery,
+ {
+ variables: { openshiftProjectName: environment.openshiftProjectName },
+ onError: () => {
+ setOpenPrjVars(!openPrjVars);
+ setProjectErrorAlert(true);
+ },
}
- });
+ );
if (prjEnvValues) {
displayProjectVars = prjEnvValues.environmentVars.project.envVariables;
@@ -97,32 +100,24 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
if (prjError) console.error(prjError);
- const valuesShow = (index) => {
- setValueState((valueState) =>
- valueState.map((el, i) => (i === index ? true : el))
- );
+ const valuesShow = index => {
+ setValueState(valueState => valueState.map((el, i) => (i === index ? true : el)));
};
- const valuesHide = (index) => {
- setValueState((valueState) =>
- valueState.map((el, i) => (i === index ? false : el))
- );
+ const valuesHide = index => {
+ setValueState(valueState => valueState.map((el, i) => (i === index ? false : el)));
};
- const prjValuesShow = (index) => {
- setPrjValueState((prjValueState) =>
- prjValueState.map((el, i) => (i === index ? true : el))
- );
+ const prjValuesShow = index => {
+ setPrjValueState(prjValueState => prjValueState.map((el, i) => (i === index ? true : el)));
};
- const prjValuesHide = (index) => {
- setPrjValueState((prjValueState) =>
- prjValueState.map((el, i) => (i === index ? false : el))
- );
+ const prjValuesHide = index => {
+ setPrjValueState(prjValueState => prjValueState.map((el, i) => (i === index ? false : el)));
};
const showVarValue = () => {
getEnvVarValues();
setOpenEnvVars(!openEnvVars);
setValueState(initValueState);
- setAction("view")
+ setAction('view');
};
const showPrjVarValue = () => {
@@ -135,13 +130,13 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
setUpdateVarValue(rowValue);
setUpdateVarName(rowName);
setUpdateVarScope(rowScope);
- }
+ };
const permissionCheck = (action) => {
getEnvVarValues();
setOpenEnvVars(false);
setAction(action);
- }
+ };
const renderEnvValue = (envVar, index) => {
if (envVar.value.length >= 0 && !valueState[index]) {
@@ -153,7 +148,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
} else {
return envVar.value
}
- }
+ };
const renderPrjValue = (projEnvVar, index) => {
if (projEnvVar.value.length >= 0 && !prjValueState[index]) {
@@ -165,7 +160,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
} else {
return projEnvVar.value
}
- }
+ };
const renderEnvValues = (envVar, index) => {
if (envLoading) {
@@ -184,6 +179,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
@@ -196,7 +192,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
)
}
- }
+ };
const renderPrjValues = (projEnvVar, index) => {
if (prjLoading) {
@@ -215,6 +211,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
@@ -227,7 +224,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
)
}
- }
+ };
return (
@@ -237,15 +234,15 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
type="error"
closeAlert={closeEnvironmentError}
header="Unauthorized:"
- message={`You don't have permission to ${action} environment ${action === "view" ? " variable values" : "variables"}. Contact your administrator to obtain the relevant permissions.`}
+ message={`You don't have permission to ${action} environment ${action === 'view' ? ' variable values' : 'variables'}. Contact your administrator to obtain the relevant permissions.`}
/>
)}
Project Variables
permissionCheck("add")}
- style={{ all: "unset" }}
+ onClick={() => permissionCheck('add')}
+ style={{ all: 'unset' }}
>
{environmentErrorAlert ? Add :
{
showVarValue()}
aria-controls="example-collapse-text"
+ data-cy="hideShowValues"
aria-expanded={openPrjVars}
>
- {!openEnvVars ? "Show values" : "Hide values"}
+ {!openEnvVars ? 'Show values' : 'Hide values'}
)}
@@ -287,7 +285,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
@@ -302,15 +300,11 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
-
+
{displayVars.map((envVar, index) => {
return (
-
+
{envVar.name}
{envVar.scope}
{renderEnvValues(envVar, index)}
@@ -340,12 +334,12 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
permissionCheck("delete", index)}
- style={{ all: "unset" }}
+ style={{ all: 'unset' }}
>
- {envLoading && action === "delete" ?
+ {envLoading && action === 'delete' ?
-
- {valueState[index] ?
+ {valueState[index] ?
:
@@ -372,7 +366,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
)}
{
- displayVars.length !== 0 ?
Project Variables
-
+
{
aria-controls="example-collapse-text"
aria-expanded={openPrjVars}
>
- {!openPrjVars ? "Show values" : "Hide values"}
+ {!openPrjVars ? 'Show values' : 'Hide values'}
)}
@@ -421,7 +415,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
@@ -436,15 +430,11 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
-
+
{displayProjectVars.map((projEnvVar, index) => {
return (
-
+
{projEnvVar.name}
{projEnvVar.scope}
{renderPrjValues(projEnvVar, index)}
diff --git a/src/components/Environments/index.js b/src/components/Environments/index.js
index 7df4853a..16ad5816 100644
--- a/src/components/Environments/index.js
+++ b/src/components/Environments/index.js
@@ -5,8 +5,8 @@ import EnvironmentLink from 'components/link/Environment';
import { makeSafe } from 'lib/util';
import * as R from 'ramda';
+import NewEnvironment from '../NewEnvironment';
import { StyledEnvironments } from './StyledEnvironments';
-import NewEnvironment from "../NewEnvironment";
const bgImages = {
branch: {
@@ -61,7 +61,7 @@ const Environments = ({ environments = [], project, refresh, environmentCount })
)}
Type: {environment.deployType === 'pullrequest' ? 'PR' : environment.deployType}
-
{environment.name}
+
{environment.name}
{environment.openshift.friendlyName != null && (
Cluster: {environment.openshift.friendlyName}
)}
@@ -71,8 +71,8 @@ const Environments = ({ environments = [], project, refresh, environmentCount })
)}
{environment.routes && environment.routes !== 'undefined' ? (
-
-
+
+
{standbyEnvironment || activeEnvironment ? (
);
})}
-
+
-
-
-
-
- Name
-
-
- Source
-
-
- Value
-
-
-
- {[...Array
(factsCount)].map((_, idx) => (
-
-
-
+
+
+
+
+ Name
+
+
+ Source
+
+
+ Value
+
+
+
+ {[...Array
(factsCount)].map((_, idx) => (
+
+ ))}
+
);
};
diff --git a/src/components/Footer/index.stories.tsx b/src/components/Footer/index.stories.tsx
index a0a9f69e..f9a396ed 100644
--- a/src/components/Footer/index.stories.tsx
+++ b/src/components/Footer/index.stories.tsx
@@ -5,11 +5,11 @@ import Footer from './index';
export default {
component: Footer,
title: 'Components/Footer',
- tags:["autodocs"]
+ tags: ['autodocs'],
};
/**
- *
+ *
* versioning depends on publicRuntimeConfig - LAGOON_VERSION env variable
*/
export const Default = () =>
;
diff --git a/src/components/Header/StyledHeader.tsx b/src/components/Header/StyledHeader.tsx
index 4ef0f7b9..14e1bf00 100644
--- a/src/components/Header/StyledHeader.tsx
+++ b/src/components/Header/StyledHeader.tsx
@@ -42,10 +42,7 @@ export const StyledHeader = styled.header<{ isOrganizationsPath: boolean }>`
}
&.navitem {
align-items: center;
- border-left: 1px solid ${props =>
- props.isOrganizationsPath
- ? "transparent"
- : color.blue};
+ border-left: 1px solid ${props => (props.isOrganizationsPath ? 'transparent' : color.blue)};
cursor: pointer;
display: flex;
&::before {
diff --git a/src/components/Header/ThemeToggler.tsx b/src/components/Header/ThemeToggler.tsx
index 2ff6c507..13505761 100644
--- a/src/components/Header/ThemeToggler.tsx
+++ b/src/components/Header/ThemeToggler.tsx
@@ -16,7 +16,7 @@ const ThemeToggler = () => {
const { theme, toggleTheme } = useContext(AppContext) as unknown as AppContextType;
return (
-
+
{
const { asPath } = useRouter();
- const isOrganizationsPath = asPath.includes('/organizations');
+ const isOrganizationsPath = asPath.includes('/organizations');
return (
diff --git a/src/components/HeaderMenu/index.js b/src/components/HeaderMenu/index.js
index 02e6b574..884b6ba1 100644
--- a/src/components/HeaderMenu/index.js
+++ b/src/components/HeaderMenu/index.js
@@ -58,37 +58,37 @@ const HeaderMenu = ({ auth, isOrganizationsPath }) => {
isOrganizationsPath={isOrganizationsPath}
open={open}
trigger={
-
+
{auth.user.username}
}
menu={[
+
Settings
,
+
Your projects
,
+
Your organizations
,
publicRuntimeConfig.LAGOON_UI_YOUR_ACCOUNT_DISABLED == null && (
+
Your account
),
+
Sign out
,
]}
@@ -103,7 +103,7 @@ const Dropdown = ({ open, trigger, menu, isOrganizationsPath }) => {
{trigger}
{open ? (
-
+
{menu.map((menuItem, index) => (
{menuItem}
diff --git a/src/components/HoverTag/styles.tsx b/src/components/HoverTag/styles.tsx
index 1601b6f0..4acc8a2f 100644
--- a/src/components/HoverTag/styles.tsx
+++ b/src/components/HoverTag/styles.tsx
@@ -1,10 +1,10 @@
import styled from 'styled-components';
-export const TooltipText = styled.p<{ maxWidth?: string, textColor?: string }>`
- margin:unset;
- max-width:${props => (props.maxWidth ? props.maxWidth : '150px')};
+export const TooltipText = styled.p<{ maxWidth?: string; textColor?: string }>`
+ margin: unset;
+ max-width: ${props => (props.maxWidth ? props.maxWidth : '150px')};
margin: unset;
overflow: hidden;
text-overflow: ellipsis;
- color:${props => (props.textColor ? props.textColor : '#fff')};
+ color: ${props => (props.textColor ? props.textColor : '#fff')};
`;
diff --git a/src/components/LogViewer/index.js b/src/components/LogViewer/index.js
index 42613b6b..b2ff42e3 100644
--- a/src/components/LogViewer/index.js
+++ b/src/components/LogViewer/index.js
@@ -51,8 +51,8 @@ const logPreprocessor = (logs, status, forceLastSectionOpen = true) => {
// if there are any errors parsing and transforming, we just return the logs as is.
console.log('Error processing logs for display: ' + e);
return (
-
-
+
@@ -86,7 +86,7 @@ const logPreprocessorRenderLogNode = (node, visible = false, errorState = false)
className={classes.join(' ')}
defaultValue={visible}
>
-
+
{node.nodes.map(element => {
return logPreprocessorRenderLogNode(element);
})}
@@ -103,7 +103,7 @@ const logPreprocessorProcessASTToReact = (ast, lastOpen, errorState) => {
}
let lastElement = ast.nodes.length - 1;
return (
-
+
{ast.nodes.map((element, i) => {
if (i != lastElement) {
return logPreprocessorRenderLogNode(element);
@@ -127,7 +127,7 @@ const logPreprocessorProcessParse = (tokens, sectionMetadata) => {
case 'section-opener':
let metadataForSection = sectionMetadata.get(tokens[i].details.trim());
if (metadataForSection == undefined) {
- metadataForSection = ['', false]
+ metadataForSection = ['', false];
}
let node = {
@@ -169,11 +169,11 @@ const logPreprocessorExtractSectionEndDetails = logs => {
let stepDetails = tokens[i].trim();
if (stepName != '' && stepDetails != '') {
let durationArray = stepDetails.match(durationRegexp);
- let hasWarnings = false
+ let hasWarnings = false;
if (stepDetails.match(/.* WithWarnings$/)) {
- hasWarnings = true
+ hasWarnings = true;
}
- let payload = [`Duration: ${durationArray[1]}`, hasWarnings]
+ let payload = [`Duration: ${durationArray[1]}`, hasWarnings];
if (durationArray.length == 2) {
ret.set(stepName, payload);
}
diff --git a/src/components/NavTabs/NavTabsSkeleton.tsx b/src/components/NavTabs/NavTabsSkeleton.tsx
index 73108e7f..f01c1e21 100644
--- a/src/components/NavTabs/NavTabsSkeleton.tsx
+++ b/src/components/NavTabs/NavTabsSkeleton.tsx
@@ -1,12 +1,18 @@
import React, { FC } from 'react';
import Skeleton from 'react-loading-skeleton';
-import { CheckSquareOutlined, ReadOutlined, RocketOutlined, SaveOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import {
+ CheckSquareOutlined,
+ ReadOutlined,
+ RocketOutlined,
+ SaveOutlined,
+ UnorderedListOutlined,
+} from '@ant-design/icons';
import BackupsLink from 'components/link/Backups';
import DeploymentsLink from 'components/link/Deployments';
import EnvironmentLink from 'components/link/Environment';
-import TasksLink from 'components/link/Tasks';
import EnvironmentVariablesLink from 'components/link/EnvironmentVariables';
+import TasksLink from 'components/link/Tasks';
import { StyledNavigation } from './StylednavTabs';
diff --git a/src/components/NavTabs/index.js b/src/components/NavTabs/index.js
index 0931d13e..54228f2c 100644
--- a/src/components/NavTabs/index.js
+++ b/src/components/NavTabs/index.js
@@ -6,11 +6,11 @@ import {
AlertOutlined,
BarChartOutlined,
CheckSquareOutlined,
- UnorderedListOutlined,
ReadOutlined,
RocketOutlined,
SaveOutlined,
TagsOutlined,
+ UnorderedListOutlined,
} from '@ant-design/icons';
import BackupsLink from 'components/link/Backups';
import DeploymentsLink from 'components/link/Deployments';
@@ -27,7 +27,7 @@ const { publicRuntimeConfig } = getConfig();
const NavTabs = ({ activeTab, environment }) => (
-
+
(
-
+
(
-
+
(
-
+
(
{publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
-
+
(
)}
{environment.project.problemsUi == 1 && (
-
+
(
)}
{environment.project.factsUi == 1 && (
-
+
(
)}
{environment.project.factsUi == 1 && (
-
+
= {
component: NavTabs,
title: 'Components/NavTabs',
- tags:["autodocs"],
+ tags: ['autodocs'],
args: {
environment: generateEnvironments(),
},
- argTypes:{
+ argTypes: {
environment: {
description: 'Project environment object',
},
- }
-
+ },
};
type Story = StoryObj;
diff --git a/src/components/NewEnvironment/NewEnvironmentButton/index.js b/src/components/NewEnvironment/NewEnvironmentButton/index.js
index 67a5d565..213ce955 100644
--- a/src/components/NewEnvironment/NewEnvironmentButton/index.js
+++ b/src/components/NewEnvironment/NewEnvironmentButton/index.js
@@ -1,4 +1,5 @@
import React from 'react';
+
import { notification } from 'antd';
import Button from 'components/Button';
@@ -15,30 +16,38 @@ export const NewEnvButton = ({ action, loading, error, disabled, data }) => {
});
};
return (
- <>
- {contextHolder}
-
- {loading ? "Creating" : "Create"}
-
- {error && openNotificationWithIcon(data.deployEnvironmentBranch)}
-
+ <>
+ {contextHolder}
+
+ {loading ? 'Creating' : 'Create'}
+
+ {error && openNotificationWithIcon(data.deployEnvironmentBranch)}
+
);
};
-const NewEnvironmentButton = ({ deployEnvironmentBranch, inputBranchName, inputProjectName, loading, error, disabled, data }) => (
+const NewEnvironmentButton = ({
+ deployEnvironmentBranch,
+ inputBranchName,
+ inputProjectName,
+ loading,
+ error,
+ disabled,
+ data,
+}) => (
{
- deployEnvironmentBranch({
- variables: {
- branch: inputBranchName,
- project: inputProjectName,
- },
- });
- }}
- loading={loading}
- error={error}
- disabled={disabled}
- data={data}
+ action={() => {
+ deployEnvironmentBranch({
+ variables: {
+ branch: inputBranchName,
+ project: inputProjectName,
+ },
+ });
+ }}
+ loading={loading}
+ error={error}
+ disabled={disabled}
+ data={data}
/>
);
diff --git a/src/components/NewEnvironment/StyledNewEnvironment.tsx b/src/components/NewEnvironment/StyledNewEnvironment.tsx
index 051af6fc..d9b5c0f9 100644
--- a/src/components/NewEnvironment/StyledNewEnvironment.tsx
+++ b/src/components/NewEnvironment/StyledNewEnvironment.tsx
@@ -1,43 +1,43 @@
+import { Collapse } from 'antd';
import { bp, color, fontSize } from 'lib/variables';
import styled from 'styled-components';
-import { Collapse } from 'antd';
export const StyledEnvironmentWrapper = styled.div`
- width: 100%;
- align-self: center;
- margin-bottom: 35px;
- @media ${bp.xs_smallUp} {
- margin-left: 48px;
- min-width: calc(50% - 24px);
- width: calc(50% - 24px);
- }
- @media ${bp.xs_small} {
- &:nth-child(2n + 1) {
- margin-left: 0;
- }
- }
- @media ${bp.tabletUp} {
+ width: 100%;
+ align-self: center;
+ margin-bottom: 35px;
+ @media ${bp.xs_smallUp} {
+ margin-left: 48px;
+ min-width: calc(50% - 24px);
+ width: calc(50% - 24px);
+ }
+ @media ${bp.xs_small} {
+ &:nth-child(2n + 1) {
margin-left: 0;
- min-width: 100%;
- width: 100%;
- }
- @media ${bp.desktopUp} {
- margin-left: 48px;
- min-width: calc(50% - 24px);
- width: calc(50% - 24px);
}
- @media ${bp.desktop_extrawide} {
- &:nth-child(2n + 1) {
- margin-left: 0;
- }
+ }
+ @media ${bp.tabletUp} {
+ margin-left: 0;
+ min-width: 100%;
+ width: 100%;
+ }
+ @media ${bp.desktopUp} {
+ margin-left: 48px;
+ min-width: calc(50% - 24px);
+ width: calc(50% - 24px);
+ }
+ @media ${bp.desktop_extrawide} {
+ &:nth-child(2n + 1) {
+ margin-left: 0;
}
- @media ${bp.extraWideUp} {
- min-width: calc((100% / 3) - 32px);
- width: calc((100% / 3) - 32px);
- &:nth-child(3n + 1) {
- margin-left: 0;
- }
+ }
+ @media ${bp.extraWideUp} {
+ min-width: calc((100% / 3) - 32px);
+ width: calc((100% / 3) - 32px);
+ &:nth-child(3n + 1) {
+ margin-left: 0;
}
+ }
`;
export const StyledNewEnvironment = styled.div`
diff --git a/src/components/NewEnvironment/index.js b/src/components/NewEnvironment/index.js
index f68527fd..27aaea1e 100644
--- a/src/components/NewEnvironment/index.js
+++ b/src/components/NewEnvironment/index.js
@@ -1,35 +1,30 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
import { Mutation } from 'react-apollo';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
+import getConfig from 'next/config';
+import Image from 'next/image';
+
+import { CaretRightOutlined } from '@ant-design/icons';
+import { useQuery } from '@apollo/react-hooks';
+import { Collapse } from 'antd';
import Button from 'components/Button';
import Modal from 'components/Modal';
-import gql from 'graphql-tag';
import withLogic from 'components/NewEnvironment/logic';
-import Image from "next/image";
-import show from "../../static/images/show.svg";
-import hide from "../../static/images/hide.svg";
-import { CopyToClipboard } from "react-copy-to-clipboard";
-import {StyledNewEnvironment, StyledEnvironmentWrapper, StyledAntdCollapse} from './StyledNewEnvironment';
-import {useQuery} from "@apollo/react-hooks";
-import ProjectByNameWithDeployKeyQuery from "../../lib/query/ProjectByNameWithDeployKey";
+import gql from 'graphql-tag';
+
+import ProjectByNameWithDeployKeyQuery from '../../lib/query/ProjectByNameWithDeployKey';
+import hide from '../../static/images/hide.svg';
+import show from '../../static/images/show.svg';
import { Footer } from '../Organizations/SharedStyles';
-import getConfig from "next/config";
-import NewEnvironmentButton from "./NewEnvironmentButton";
+import NewEnvironmentButton from './NewEnvironmentButton';
+import { StyledAntdCollapse, StyledEnvironmentWrapper, StyledNewEnvironment } from './StyledNewEnvironment';
+
const { WEBHOOK_URL } = getConfig().publicRuntimeConfig;
-import { CaretRightOutlined } from '@ant-design/icons';
-import { Collapse } from 'antd';
const DEPLOY_ENVIRONMENT_BRANCH_MUTATION = gql`
- mutation (
- $project: String!,
- $branch: String!,
- ) {
- deployEnvironmentBranch(input: {
- project:{
- name: $project
- }
- branchName: $branch
- }
- )
+ mutation ($project: String!, $branch: String!) {
+ deployEnvironmentBranch(input: { project: { name: $project }, branchName: $branch })
}
`;
@@ -39,10 +34,10 @@ const customStyles = {
},
};
-const hashValue = (value) => {
- let hashedVal = "●";
+const hashValue = value => {
+ let hashedVal = '●';
for (let l = 0; l < value.length; l++) {
- hashedVal += "●";
+ hashedVal += '●';
}
return hashedVal;
};
@@ -60,13 +55,17 @@ const NewEnvironment = ({
setClear,
}) => {
const webhookURL = WEBHOOK_URL ? WEBHOOK_URL : 'https://webhook-handler.example.com';
- let dkValue = "●●●●●●●●●●●●●●●●●●●●●●●●●"
+ let dkValue = '●●●●●●●●●●●●●●●●●●●●●●●●●';
const [copiedDK, setCopiedDK] = useState(false);
const [copiedWH, setCopiedWH] = useState(false);
const [showDKField, setShowDKField] = React.useState(false);
const [showEnvType, setShowEnvType] = React.useState(false);
- const { loadingDK, error: dkError, data: deployKeyValue } = useQuery(ProjectByNameWithDeployKeyQuery, {
+ const {
+ loadingDK,
+ error: dkError,
+ data: deployKeyValue,
+ } = useQuery(ProjectByNameWithDeployKeyQuery, {
variables: { name: inputProjectName },
});
@@ -78,36 +77,33 @@ const NewEnvironment = ({
const toggleShowEnvType = () => {
inputBranchName !== '' ? setShowEnvType(true) : setShowEnvType(false);
- }
+ };
- const renderDeploykeyValue = (charLimit) => {
+ const renderDeploykeyValue = charLimit => {
if (loadingDK) {
- return < div className = "loader" > < /div>;
+ return
;
}
if (!showDKField) {
return hashValue(dkValue).substring(0, 25);
}
return dkValue.length > charLimit ? dkValue.substring(0, charLimit) + '...' : dkValue;
- }
+ };
- const renderStep2 = (header) => {
+ const renderStep2 = header => {
return (
- {header ?
Step 2: Add this project's Deploy Key to your Git service.
: null}
+ {header ? (
+
+ Step 2: Add this project's Deploy Key to your Git service.
+
+ ) : null}
-
- { renderDeploykeyValue(80)}
-
-
setShowDKField(!showDKField)}>
- {renderDeploykeyValue(80)}
+ setShowDKField(!showDKField)}>
+
-
+
Copied
-
- {header ?
Step 3: Add the webhook to your Git service
: null}
+ {header ? (
+
+ Step 3: Add the webhook to your Git service
+
+ ) : null}
-
- { webhookURL }
-
+
{webhookURL}
Copied
@@ -168,120 +169,155 @@ const NewEnvironment = ({
-
Please ensure that all these steps have been completed before creating your new environment. Follow the Lagoon Docs for more details.
+
+ Please ensure that all these steps have been completed before creating your new environment. Follow the{' '}
+
+ Lagoon Docs
+ {' '}
+ for more details.
+
- )
- }
+ );
+ };
const items = () => [
{
key: '1',
- label:
Step 2: Add this project's Deploy Key to your Git service.
,
+ label: (
+
+ Step 2: Add this project's Deploy Key to your Git service.
+
+ ),
children: renderStep2(),
},
{
key: '2',
- label:
Step 3: Add the webhook to your Git service
,
+ label: (
+
+ Step 3: Add the webhook to your Git service
+
+ ),
children: renderStep3(),
},
];
return (
-
-
-
+
+
+
+
- Create Environment
+
+ Create Environment
+
-
-
-
-
- console.error(e)}>
- {(deployEnvironmentBranch, { loading, error, data }) => {
- if (error) {
- return {error.message}
;
- }
- const errors = ["Skipped", "Error"]
- const regex = new RegExp(errors.join("|"), "i");
- const err = regex.test(data && data.deployEnvironmentBranch);
- if (data && !err) {
- refresh().then(setClear).then(closeModal);
- }
+
+
+
+ console.error(e)}>
+ {(deployEnvironmentBranch, { loading, error, data }) => {
+ if (error) {
+ return {error.message}
;
+ }
+ const errors = ['Skipped', 'Error'];
+ const regex = new RegExp(errors.join('|'), 'i');
+ const err = regex.test(data && data.deployEnvironmentBranch);
+ if (data && !err) {
+ refresh().then(setClear).then(closeModal);
+ }
- return (
- <>
-
-
- Create an Environment
-
-
-
Step 1: Add the branch you wish to build this environment from. This branch must already exist in your git repository.
-
-
- Branch name: *
-
-
toggleShowEnvType()}
- />
+ return (
+ <>
+
+
+ Create an Environment
+
+
+
+ Step 1: Add the branch you wish to build this environment from. This branch must already
+ exist in your git repository.
+
+
+
+ Branch name: *
+
+
+
+
+ ) : (
+ [renderStep2('header'), renderStep3('header')]
+ )}
+
- { environmentCount > 0 ?
-
-
- :
- [renderStep2("header"), renderStep3("header")]
- }
-
-
-
- );
- }}
-
-
-
-
+
[setClear(), closeModal()]} variant="ghost">
+ Cancel
+
+
+
+
+
+ );
+ }}
+
+
+
+
);
};
diff --git a/src/components/NewEnvironment/logic.js b/src/components/NewEnvironment/logic.js
index 51685d77..e1d54cea 100644
--- a/src/components/NewEnvironment/logic.js
+++ b/src/components/NewEnvironment/logic.js
@@ -1,27 +1,31 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputBranchName', 'setBranchName', '');
-const withInputClear = withState("clear", "setClear", "");
+const withInputClear = withState('clear', 'setClear', '');
const withInputHandlers = withHandlers({
- setBranchName: ({ setBranchName }) => (event) =>
+ setBranchName:
+ ({ setBranchName }) =>
+ event =>
setBranchName(event.target.value),
- setClear: ({ setBranchName }) => () =>
+ setClear:
+ ({ setBranchName }) =>
+ () =>
setBranchName(''),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputClear,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputClear, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/AddGroupToProject/index.js b/src/components/Organizations/AddGroupToProject/index.js
index 29bee614..2ee1d9bf 100644
--- a/src/components/Organizations/AddGroupToProject/index.js
+++ b/src/components/Organizations/AddGroupToProject/index.js
@@ -2,6 +2,7 @@ import React from 'react';
import { Mutation } from 'react-apollo';
import ReactSelect from 'react-select';
+import { Tooltip } from 'antd';
import Button from 'components/Button';
import Modal from 'components/Modal';
// @TODO: add this once the logic exists
@@ -10,7 +11,6 @@ import gql from 'graphql-tag';
import { RoleSelect } from '../AddUserToGroup/Styles';
import { AddButtonContent, Footer, StyledNotification, StyledNotificationWrapper } from '../SharedStyles';
-import { Tooltip } from 'antd';
const ADD_GROUP_PROJECT_MUTATION = gql`
mutation addProjectToGroup($groupName: String!, $projectName: String!) {
@@ -44,7 +44,7 @@ export const AddGroupToProject = ({
<>
-
+
Link Group
@@ -68,6 +68,7 @@ export const AddGroupToProject = ({
({ ...base, zIndex: 9999, color: 'black', fontSize: '16px' }),
@@ -89,6 +90,7 @@ export const AddGroupToProject = ({
{
addGroupProject({
variables: {
@@ -103,7 +105,7 @@ export const AddGroupToProject = ({
Add
- closeModal()}>
+ closeModal()}>
Cancel
diff --git a/src/components/Organizations/AddGroupToProject/logic.js b/src/components/Organizations/AddGroupToProject/logic.js
index 84d6a56d..877bb65f 100644
--- a/src/components/Organizations/AddGroupToProject/logic.js
+++ b/src/components/Organizations/AddGroupToProject/logic.js
@@ -1,26 +1,38 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
const withNewMemberHanders = withHandlers({
- onCompleted: ({ setSelectedTask }) => () => {
- setSelectedTask('Completed');
- },
- onError: ({ setSelectedTask }) => () => {
- setSelectedTask('Error');
- }
+ onCompleted:
+ ({ setSelectedTask }) =>
+ () => {
+ setSelectedTask('Completed');
+ },
+ onError:
+ ({ setSelectedTask }) =>
+ () => {
+ setSelectedTask('Error');
+ },
});
const withSelectedProject = withState('selectedProject', 'setSelectedProject', null);
diff --git a/src/components/Organizations/AddNotificationToProject/index.js b/src/components/Organizations/AddNotificationToProject/index.js
index d2a7348d..0a88adbf 100644
--- a/src/components/Organizations/AddNotificationToProject/index.js
+++ b/src/components/Organizations/AddNotificationToProject/index.js
@@ -50,7 +50,7 @@ export const AddNotificationToProject = ({
<>
-
+
Link Notification
@@ -107,6 +107,7 @@ export const AddNotificationToProject = ({
{
addNotificationToProject({
diff --git a/src/components/Organizations/AddNotificationToProject/logic.js b/src/components/Organizations/AddNotificationToProject/logic.js
index 84d6a56d..877bb65f 100644
--- a/src/components/Organizations/AddNotificationToProject/logic.js
+++ b/src/components/Organizations/AddNotificationToProject/logic.js
@@ -1,26 +1,38 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
const withNewMemberHanders = withHandlers({
- onCompleted: ({ setSelectedTask }) => () => {
- setSelectedTask('Completed');
- },
- onError: ({ setSelectedTask }) => () => {
- setSelectedTask('Error');
- }
+ onCompleted:
+ ({ setSelectedTask }) =>
+ () => {
+ setSelectedTask('Completed');
+ },
+ onError:
+ ({ setSelectedTask }) =>
+ () => {
+ setSelectedTask('Error');
+ },
});
const withSelectedProject = withState('selectedProject', 'setSelectedProject', null);
diff --git a/src/components/Organizations/AddUserToGroup/Styles.tsx b/src/components/Organizations/AddUserToGroup/Styles.tsx
index cc0b84de..e991c4d1 100644
--- a/src/components/Organizations/AddUserToGroup/Styles.tsx
+++ b/src/components/Organizations/AddUserToGroup/Styles.tsx
@@ -16,7 +16,7 @@ export const NewMember = styled.div`
border-color: hsl(0, 0%, 80%);
font-family: 'source-code-pro', sans-serif;
font-size: 16px;
- line-height:24px;
+ line-height: 24px;
color: #000;
padding: 8px;
box-sizing: border-box;
@@ -25,18 +25,17 @@ export const NewMember = styled.div`
input[type='text']:focus {
border: 2px solid ${color.linkBlue};
outline: none;
-
}
input::placeholder {
font-size: 1rem;
- color:#000;
+ color: #000;
}
.select {
font-family: 'source-sans-pro', sans-serif;
line-height: 1.25rem;
- div{
- border-radius:0 !important;
+ div {
+ border-radius: 0 !important;
}
}
.environment-name {
diff --git a/src/components/Organizations/AddUserToGroup/index.js b/src/components/Organizations/AddUserToGroup/index.js
index 75c84373..a25aef07 100644
--- a/src/components/Organizations/AddUserToGroup/index.js
+++ b/src/components/Organizations/AddUserToGroup/index.js
@@ -69,7 +69,6 @@ export const AddUserToGroup = ({
});
}
return (
-
{userAlreadyExists ? 'Update User' : 'Add User'}
@@ -77,6 +76,7 @@ export const AddUserToGroup = ({
User Email:
*
*
{
addGroupMember({
diff --git a/src/components/Organizations/AddUserToGroupSelect/index.tsx b/src/components/Organizations/AddUserToGroupSelect/index.tsx
index 41f7d6ed..046716f0 100644
--- a/src/components/Organizations/AddUserToGroupSelect/index.tsx
+++ b/src/components/Organizations/AddUserToGroupSelect/index.tsx
@@ -90,6 +90,7 @@ const AddUserToGroupSelect: FC = ({ groups, newUserState, setNewUserState
User Email: *
*
= ({ groups, newUserState, setNewUserState
User Role: *
= ({ groups, newUserState, setNewUserState
!!item)}
action={() => {
diff --git a/src/components/Organizations/AddUserToOrganization/Styles.tsx b/src/components/Organizations/AddUserToOrganization/Styles.tsx
index 1831bb9c..b1a683b7 100644
--- a/src/components/Organizations/AddUserToOrganization/Styles.tsx
+++ b/src/components/Organizations/AddUserToOrganization/Styles.tsx
@@ -24,7 +24,7 @@ export const NewUser = styled.div`
border-color: hsl(0, 0%, 80%);
font-family: 'source-code-pro', sans-serif;
font-size: 16px;
- line-height:24px;
+ line-height: 24px;
color: ${props => props.theme.texts.primary};
padding: 8px;
box-sizing: border-box;
diff --git a/src/components/Organizations/AddUserToOrganization/index.js b/src/components/Organizations/AddUserToOrganization/index.js
index be5a6bc3..895415f8 100644
--- a/src/components/Organizations/AddUserToOrganization/index.js
+++ b/src/components/Organizations/AddUserToOrganization/index.js
@@ -51,6 +51,7 @@ export const AddUserToOrganization = ({
User Email: *
*
{
diff --git a/src/components/Organizations/GroupMembers/GroupMembersSkeleton.tsx b/src/components/Organizations/GroupMembers/GroupMembersSkeleton.tsx
index 2a0ce2e6..60fd1392 100644
--- a/src/components/Organizations/GroupMembers/GroupMembersSkeleton.tsx
+++ b/src/components/Organizations/GroupMembers/GroupMembersSkeleton.tsx
@@ -7,7 +7,7 @@ import { StyledGroupMembers } from './Styles';
const GroupMembersSkeleton = () => {
const numberOfFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
- const groupMembers = (key: number) => (
+ const groupMembers = (key: number) => (
@@ -32,11 +32,11 @@ const GroupMembersSkeleton = () => {
- {[...Array(Math.floor(numberOfFields / 2))].map((_,idx) => groupMembers(idx))}
+ {[...Array(Math.floor(numberOfFields / 2))].map((_, idx) => groupMembers(idx))}
- {[...Array(Math.floor(numberOfFields / 2))].map((_,idx) => groupMembers(idx))}
+ {[...Array(Math.floor(numberOfFields / 2))].map((_, idx) => groupMembers(idx))}
);
diff --git a/src/components/Organizations/GroupMembers/Styles.tsx b/src/components/Organizations/GroupMembers/Styles.tsx
index a7994b3b..921cb54e 100644
--- a/src/components/Organizations/GroupMembers/Styles.tsx
+++ b/src/components/Organizations/GroupMembers/Styles.tsx
@@ -16,7 +16,6 @@ export const StyledGroupMembers = styled.section`
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
}
.MAINTAINER-label {
-
color: ${color.white};
background-color: ${color.lightBlue};
margin-left: 10px;
diff --git a/src/components/Organizations/Groups/Styles.tsx b/src/components/Organizations/Groups/Styles.tsx
index 76a486ad..41eda728 100644
--- a/src/components/Organizations/Groups/Styles.tsx
+++ b/src/components/Organizations/Groups/Styles.tsx
@@ -51,7 +51,7 @@ export const StyledGroups = styled.section`
border-color: hsl(0, 0%, 80%);
font-family: 'source-code-pro', sans-serif;
font-size: 16px;
- line-height:24px;
+ line-height: 24px;
color: #5f6f7a;
padding: 8px;
box-sizing: border-box;
@@ -63,8 +63,8 @@ export const StyledGroups = styled.section`
.select {
font-family: 'source-sans-pro', sans-serif;
line-height: 1.25rem;
- div{
- border-radius:0 !important;
+ div {
+ border-radius: 0 !important;
}
}
label {
@@ -90,44 +90,44 @@ export const AddGroupButton = styled.button`
all: unset;
width: 115px;
height: 38px;
- margin-top:42px;
+ margin-top: 42px;
text-align: center;
cursor: pointer;
background: #4578e6;
`;
export const DeleteButton = styled.button`
-all:unset;
-cursor:pointer;
-margin-left:auto;
-background:#4578E6;
-color: #fff;
-border-radius:2px;
-width:96px;
-text-align:center;
-transition:all 0.3s ease;
-&:hover{
- box-shadow: 4px 8px 13px 0px #00000008;
-}
+ all: unset;
+ cursor: pointer;
+ margin-left: auto;
+ background: #4578e6;
+ color: #fff;
+ border-radius: 2px;
+ width: 96px;
+ text-align: center;
+ transition: all 0.3s ease;
+ &:hover {
+ box-shadow: 4px 8px 13px 0px #00000008;
+ }
`;
export const CancelButton = styled.button`
-all:unset;
-cursor:pointer;
-border-radius:2px;
-border:1px solid #4578E6;
-color:#4578E6;
-background:#fff;
-width:81px;
-text-align:center;
-transition:all 0.3s ease;
-&:hover{
- box-shadow: 4px 8px 13px 0px #00000008;
-}
+ all: unset;
+ cursor: pointer;
+ border-radius: 2px;
+ border: 1px solid #4578e6;
+ color: #4578e6;
+ background: #fff;
+ width: 81px;
+ text-align: center;
+ transition: all 0.3s ease;
+ &:hover {
+ box-shadow: 4px 8px 13px 0px #00000008;
+ }
`;
export const ModalFooter = styled.div`
-height:40px;
-display:flex;
-gap:8px;
-`;
\ No newline at end of file
+ height: 40px;
+ display: flex;
+ gap: 8px;
+`;
diff --git a/src/components/Organizations/Groups/index.js b/src/components/Organizations/Groups/index.js
index af87c1e5..2e4ba27c 100644
--- a/src/components/Organizations/Groups/index.js
+++ b/src/components/Organizations/Groups/index.js
@@ -86,7 +86,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
width: '15%',
key: 'members',
render: i => {
- return typeof i.memberCount !== 'undefined' &&
Members: {i.memberCount} ;
+ return typeof i.memberCount !== 'undefined' &&
Members: {i.memberCount} ;
},
},
{
@@ -97,7 +97,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
<>
- modalAction('open', 'addUser', i)} />
+ modalAction('open', 'addUser', i)} />
- modalAction('open', 'deleteGroup', i)} />
+ modalAction('open', 'deleteGroup', i)}
+ />
-
+ console.error(e)}>
{(deleteGroup, { called, error, data }) => {
if (error) {
return {error.message}
;
@@ -157,6 +161,7 @@ const Groups = ({ groups = [], organizationId, organizationName, ableToAddGroup,
return (
event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/Manage/index.js b/src/components/Organizations/Manage/index.js
index d7be2f26..db7a7853 100644
--- a/src/components/Organizations/Manage/index.js
+++ b/src/components/Organizations/Manage/index.js
@@ -155,6 +155,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
Owner: *
{
@@ -220,6 +222,7 @@ const Manage = ({ users = [], organization, organizationName, refetch }) => {
}
return (
{
<>
- setAddUserModalOpen(true)}>
+ setAddUserModalOpen(true)}>
Add user
diff --git a/src/components/Organizations/NavTabs/OrgNavTabsSkeleton.tsx b/src/components/Organizations/NavTabs/OrgNavTabsSkeleton.tsx
index 812054f7..563e10d8 100644
--- a/src/components/Organizations/NavTabs/OrgNavTabsSkeleton.tsx
+++ b/src/components/Organizations/NavTabs/OrgNavTabsSkeleton.tsx
@@ -1,6 +1,13 @@
import React, { FC } from 'react';
-import { BellOutlined, GroupOutlined, ReadOutlined, SettingOutlined, GlobalOutlined, TeamOutlined } from '@ant-design/icons';
+import {
+ BellOutlined,
+ GlobalOutlined,
+ GroupOutlined,
+ ReadOutlined,
+ SettingOutlined,
+ TeamOutlined,
+} from '@ant-design/icons';
import { StyledNavigation } from './StyledNavTabs';
diff --git a/src/components/Organizations/NewGroup/index.js b/src/components/Organizations/NewGroup/index.js
index 6fa44c6b..0bec93f1 100644
--- a/src/components/Organizations/NewGroup/index.js
+++ b/src/components/Organizations/NewGroup/index.js
@@ -95,7 +95,7 @@ export const NewGroup = ({
<>
-
+
Add Group
@@ -103,7 +103,7 @@ export const NewGroup = ({
-
+ console.error(e)}>
{(addGroup, { called, error, data }) => {
if (error) {
return {error.message}
;
@@ -124,6 +124,7 @@ export const NewGroup = ({
Group Name: * {' '}
Please use (a to z) lower case, numbers and - only
event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
const withNewMemberHanders = withHandlers({
- onCompleted: ({ setSelectedTask }) => () => {
+ onCompleted:
+ ({ setSelectedTask }) =>
+ () => {
setSelectedTask('Completed');
},
- onError: ({ setSelectedTask }) => () => {
+ onError:
+ ({ setSelectedTask }) =>
+ () => {
setSelectedTask('Error');
- }
- });
+ },
+});
const withSelectedRole = withState('selectedRole', 'setSelectedRole', null);
diff --git a/src/components/Organizations/NewProject/StyledNewProject.tsx b/src/components/Organizations/NewProject/StyledNewProject.tsx
index e56d5cd8..ace03180 100644
--- a/src/components/Organizations/NewProject/StyledNewProject.tsx
+++ b/src/components/Organizations/NewProject/StyledNewProject.tsx
@@ -1,42 +1,42 @@
-import {color} from 'lib/variables';
+import { color } from 'lib/variables';
import styled from 'styled-components';
export const StyledNewProject = styled.div`
-.environment-modal {
- padding-top: 10px;
-}
-
-input {
- width: 100%;
- line-height: 1.5rem;
-}
+ .environment-modal {
+ padding-top: 10px;
+ }
-.add-project-header {
- font-family: source-code-pro,sans-serif;
- font-weight: bold;
- font-size: 1.5rem;
- margin-bottom: 1rem;
-}
+ input {
+ width: 100%;
+ line-height: 1.5rem;
+ }
-.form-box {
- margin-bottom: 1rem;
-}
+ .add-project-header {
+ font-family: source-code-pro, sans-serif;
+ font-weight: bold;
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+ }
-.docs-link {
- margin: 1.5rem 0;
- border: 1px solid ${props => props.theme.texts.primary};
- padding: 1rem;
- display: flex;
- gap: 12px;
-
- a {
- text-decoration: underline;
- color: ${color.lightBlue};
+ .form-box {
+ margin-bottom: 1rem;
}
- .new-project-info {
- width: 100%;
+
+ .docs-link {
+ margin: 1.5rem 0;
+ border: 1px solid ${props => props.theme.texts.primary};
+ padding: 1rem;
+ display: flex;
+ gap: 12px;
+
+ a {
+ text-decoration: underline;
+ color: ${color.lightBlue};
+ }
+ .new-project-info {
+ width: 100%;
+ }
}
-}
`;
export const Checkbox = styled.div`
diff --git a/src/components/Organizations/NewProject/index.js b/src/components/Organizations/NewProject/index.js
index eff2cdcf..fd38b7ee 100644
--- a/src/components/Organizations/NewProject/index.js
+++ b/src/components/Organizations/NewProject/index.js
@@ -17,7 +17,7 @@ import { AddButtonContent, Footer, StyledNotificationWrapper } from '../SharedSt
import { Checkbox, StyledNewProject } from './StyledNewProject';
const ADD_PROJECT_MUTATION = gql`
- mutation (
+ mutation addProjectToOrganization(
$organization: Int!
$name: String!
$gitUrl: String!
@@ -77,7 +77,7 @@ const OrgNewProject = ({
<>
-
+
Add project
@@ -110,7 +110,8 @@ const OrgNewProject = ({
Project name: *
Production Environment:
*
event =>
- setProjectName(event.target.value)
+ setProjectName:
+ ({ setProjectName }) =>
+ event =>
+ setProjectName(event.target.value),
});
const withInputGitURL = withState('inputGitURL', 'setGitURL', '');
const withInputHandlersGitURL = withHandlers({
- setGitURL: ({ setGitURL }) => event =>
- setGitURL(event.target.value)
+ setGitURL:
+ ({ setGitURL }) =>
+ event =>
+ setGitURL(event.target.value),
});
const withInputProdEnv = withState('inputProdEnv', 'setProdEnv', '');
const withInputHandlersProdEnv = withHandlers({
- setProdEnv: ({ setProdEnv }) => event =>
- setProdEnv(event.target.value)
+ setProdEnv:
+ ({ setProdEnv }) =>
+ event =>
+ setProdEnv(event.target.value),
});
const withInputDeployTarget = withState('inputKubernetes', 'setKubernetes', '');
const withInputHandlersDeployTarget = withHandlers({
- setKubernetes: ({ setKubernetes }) => event =>
- setKubernetes(event.target.value)
+ setKubernetes:
+ ({ setKubernetes }) =>
+ event =>
+ setKubernetes(event.target.value),
});
const withInputBranches = withState('inputBranches', 'setBranches', '');
const withInputHandlersBranches = withHandlers({
- setBranches: ({ setBranches }) => event =>
- setBranches(event.target.value)
+ setBranches:
+ ({ setBranches }) =>
+ event =>
+ setBranches(event.target.value),
});
const withInputPRs = withState('inputPRs', 'setPRs', '');
const withInputHandlersPRs = withHandlers({
- setPRs: ({ setPRs }) => event =>
- setPRs(event.target.value)
+ setPRs:
+ ({ setPRs }) =>
+ event =>
+ setPRs(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
const withNewMemberHanders = withHandlers({
- onCompleted: ({ setSelectedTask }) => () => {
+ onCompleted:
+ ({ setSelectedTask }) =>
+ () => {
setSelectedTask('Completed');
},
- onError: ({ setSelectedTask }) => () => {
+ onError:
+ ({ setSelectedTask }) =>
+ () => {
setSelectedTask('Error');
- }
- });
+ },
+});
const withSelectedDeployTarget = withState('selectedDeployTarget', 'setSelectedDeployTarget', null);
diff --git a/src/components/Organizations/Notifications/AddNotifications.tsx b/src/components/Organizations/Notifications/AddNotifications.tsx
index 97602f73..97c2a9c1 100644
--- a/src/components/Organizations/Notifications/AddNotifications.tsx
+++ b/src/components/Organizations/Notifications/AddNotifications.tsx
@@ -237,7 +237,7 @@ const AddNotification: FC = ({ modalOpen, organizationId, onNotificationA
<>
{children}
= ({ modalOpen, organizationId, onNotificationA
Select service: *
= ({ modalOpen, organizationId, onNotificationA
{renderFields()}
{
const cb = getAction();
@@ -313,7 +315,7 @@ const AddNotification: FC = ({ modalOpen, organizationId, onNotificationA
Add
- closeModal()}>
+ closeModal()}>
Cancel
diff --git a/src/components/Organizations/Notifications/index.js b/src/components/Organizations/Notifications/index.js
index 11f96024..88e64b61 100644
--- a/src/components/Organizations/Notifications/index.js
+++ b/src/components/Organizations/Notifications/index.js
@@ -206,7 +206,7 @@ const OrgNotifications = ({
)}
{filteredSlackNotifications.map(project => (
-
+
{project.name}
@@ -242,6 +242,7 @@ const OrgNotifications = ({
Name:
*
*
console.error(e)}>
{(updateSlack, { called, error, data }) => {
if (error) {
- return
{error.message}
;
+ return
{error.message}
;
}
if (data) {
refresh().then(() => {
@@ -289,6 +291,7 @@ const OrgNotifications = ({
}
return (
))}
{filteredRocketChatNotifications.map(project => (
-
+
{project.name}
@@ -378,6 +381,7 @@ const OrgNotifications = ({
Name:
*
*
console.error(e)}>
{(updateRocketChat, { called, error, data }) => {
if (error) {
- return
{error.message}
;
+ return
{error.message}
;
}
if (data) {
refresh().then(() => {
@@ -425,6 +430,7 @@ const OrgNotifications = ({
}
return (
))}
{filteredEmailNotifications.map(project => (
-
+
{project.name}
@@ -507,6 +513,7 @@ const OrgNotifications = ({
Name:
*
console.error(e)}>
{(updateEmail, { called, error, data }) => {
if (error) {
- return
{error.message}
;
+ return
{error.message}
;
}
if (data) {
refresh().then(() => {
@@ -542,6 +549,7 @@ const OrgNotifications = ({
}
return (
))}
{filteredWebhookNotifications.map(project => (
-
+
{project.name}
@@ -627,6 +635,7 @@ const OrgNotifications = ({
Name:
*
*
console.error(e)}>
{(updateWebhook, { called, error, data }) => {
if (error) {
- return
{error.message}
;
+ return
{error.message}
;
}
if (data) {
refresh().then(() => {
@@ -661,6 +671,7 @@ const OrgNotifications = ({
}
return (
))}
{filteredTeamsNotifications.map(project => (
-
+
{project.name}
@@ -746,6 +757,7 @@ const OrgNotifications = ({
Name:
*
*
console.error(e)}>
{(updateTeams, { called, error, data }) => {
if (error) {
- return
{error.message}
;
+ return
{error.message}
;
}
if (data) {
refresh().then(() => {
@@ -780,6 +793,7 @@ const OrgNotifications = ({
}
return (
<>
- setModalOpen(true)}>
+ setModalOpen(true)}>
Add notification
diff --git a/src/components/Organizations/Organization/index.js b/src/components/Organizations/Organization/index.js
index 45d14bcc..f18c3d78 100644
--- a/src/components/Organizations/Organization/index.js
+++ b/src/components/Organizations/Organization/index.js
@@ -68,13 +68,13 @@ const Organization = ({ organization, refetch }) => {
return (
{pluralName.toUpperCase()}
-
+
{capitalize(quota)} quota: {quotaNumber} of {quotaLimit == '-1' ? 'unlimited' : quotaLimit}
{showLink && (
+
@@ -88,13 +88,15 @@ const Organization = ({ organization, refetch }) => {
return modalName === 'name' ? () => setNameModalOpen(modalAction) : () => setDescModalOpen(modalAction);
};
- const renderEditBtn = type =>
-
+
{organization.friendlyName || organization.name} {renderEditBtn('name')}
{
Organization name: *
{
);
}}
-
+
Cancel
@@ -162,7 +166,7 @@ const Organization = ({ organization, refetch }) => {
Description {!organization.description && renderEditBtn('description')}
-
+
{organization.description} {organization.description && renderEditBtn('description')}
{
Organization description: *
{
);
}}
-
+
Cancel
@@ -275,7 +281,7 @@ const Organization = ({ organization, refetch }) => {
))}
-
+
diff --git a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
index c3065258..2fae3a34 100644
--- a/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
+++ b/src/components/Organizations/Organizations/OrganizationsSkeleton.tsx
@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton';
import Box from 'components/Box';
-import { OrgsHeader, OrganizationsPage, SearchInput, Organization } from './StyledOrganizations';
+import { Organization, OrganizationsPage, OrgsHeader, SearchInput } from './StyledOrganizations';
const OrganizationsSkeleton = () => {
const RenderSkeletonBox = (index: number) => {
@@ -22,14 +22,14 @@ const OrganizationsSkeleton = () => {
return (
-
-
-
-
- <>{[...Array(numberOfItems)].map((_, idx) => RenderSkeletonBox(idx))}
+
+
+
+
+ <>{[...Array(numberOfItems)].map((_, idx) => RenderSkeletonBox(idx))}
);
};
diff --git a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
index b0d38cc5..db6199b8 100644
--- a/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
+++ b/src/components/Organizations/PaginatedTable/PaginatedTable.tsx
@@ -278,7 +278,7 @@ const PaginatedTable: FC = ({
{labelText ? (
-
+
{labelText} {`(${sortedFilteredData.length})`}
) : (
@@ -310,6 +310,7 @@ const PaginatedTable: FC = ({
+
{columns?.map(col => {
return (
diff --git a/src/components/Organizations/ProjectNotifications/index.js b/src/components/Organizations/ProjectNotifications/index.js
index 06ab1744..6647e062 100644
--- a/src/components/Organizations/ProjectNotifications/index.js
+++ b/src/components/Organizations/ProjectNotifications/index.js
@@ -28,7 +28,14 @@ const REMOVE_NOTIFICATION_FROM_PROJECT = gql`
/**
* The primary list of members.
*/
-const ProjectNotifications = ({ notifications = [], organizationSlug ,organizationId, projectName, organization, refresh }) => {
+const ProjectNotifications = ({
+ notifications = [],
+ organizationSlug,
+ organizationId,
+ projectName,
+ organization,
+ refresh,
+}) => {
const [searchInput, setSearchInput] = useState('');
const filteredMembers = notifications.filter(key => {
diff --git a/src/components/Organizations/Projects/OrgProjectsSkeleton.tsx b/src/components/Organizations/Projects/OrgProjectsSkeleton.tsx
index f3db5e5d..49a99a0b 100644
--- a/src/components/Organizations/Projects/OrgProjectsSkeleton.tsx
+++ b/src/components/Organizations/Projects/OrgProjectsSkeleton.tsx
@@ -9,13 +9,13 @@ const OrgProjectsSkeleton = () => {
const projectSkeleton = (key: number) => (
);
diff --git a/src/components/Organizations/Projects/index.js b/src/components/Organizations/Projects/index.js
index 06508772..24927a5b 100644
--- a/src/components/Organizations/Projects/index.js
+++ b/src/components/Organizations/Projects/index.js
@@ -120,6 +120,7 @@ const OrgProjects = ({ projects = [], organizationId, organizationName, refresh,
return (
{info.name} notification.
-
+
Continue
diff --git a/src/components/Organizations/RemoveNotificationConfirm/logic.js b/src/components/Organizations/RemoveNotificationConfirm/logic.js
index f3c6cab8..b592b12a 100644
--- a/src/components/Organizations/RemoveNotificationConfirm/logic.js
+++ b/src/components/Organizations/RemoveNotificationConfirm/logic.js
@@ -1,22 +1,25 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/RemoveProjectGroupConfirm/logic.js b/src/components/Organizations/RemoveProjectGroupConfirm/logic.js
index f3c6cab8..b592b12a 100644
--- a/src/components/Organizations/RemoveProjectGroupConfirm/logic.js
+++ b/src/components/Organizations/RemoveProjectGroupConfirm/logic.js
@@ -1,22 +1,25 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/RemoveUserConfirm/logic.js b/src/components/Organizations/RemoveUserConfirm/logic.js
index f3c6cab8..b592b12a 100644
--- a/src/components/Organizations/RemoveUserConfirm/logic.js
+++ b/src/components/Organizations/RemoveUserConfirm/logic.js
@@ -1,22 +1,25 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValue', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/User/Styles.tsx b/src/components/Organizations/User/Styles.tsx
index a80ffc86..d1d5544f 100644
--- a/src/components/Organizations/User/Styles.tsx
+++ b/src/components/Organizations/User/Styles.tsx
@@ -53,11 +53,11 @@ export const StyledUser = styled.section`
padding: 0;
width: 5%;
}
- .role{
- background:#9747FF;
- padding:5px 8px;
- border-radius:5px;
- color:#fff;
+ .role {
+ background: #9747ff;
+ padding: 5px 8px;
+ border-radius: 5px;
+ color: #fff;
}
.remove {
display: flex;
@@ -65,7 +65,8 @@ export const StyledUser = styled.section`
padding: 0;
width: 5%;
}
- .groups, .projects {
+ .groups,
+ .projects {
font-family: 'source-code-pro', sans-serif;
font-size: 0.8125rem;
padding: 5px 10px 5px 10px;
@@ -84,7 +85,7 @@ export const StyledUser = styled.section`
border-color: hsl(0, 0%, 80%);
font-family: 'source-code-pro', sans-serif;
font-size: 16px;
- line-height:24px;
+ line-height: 24px;
color: #5f6f7a;
padding: 8px;
box-sizing: border-box;
@@ -117,36 +118,36 @@ export const Header = styled.div`
display: flex;
.button-sort {
- color: #5f6f7a;
- position: relative;
- font-family: 'source-code-pro', sans-serif;
- font-size: 13px;
- font-size: 0.8125rem;
- line-height: 1.4;
- text-transform: uppercase;
- padding-left: 20px;
- border: none;
- background: none;
- cursor: pointer;
- width: 10%;
+ color: #5f6f7a;
+ position: relative;
+ font-family: 'source-code-pro', sans-serif;
+ font-size: 13px;
+ font-size: 0.8125rem;
+ line-height: 1.4;
+ text-transform: uppercase;
+ padding-left: 20px;
+ border: none;
+ background: none;
+ cursor: pointer;
+ width: 10%;
- &:after {
- position: absolute;
- top: 0;
- width: 20px;
- height: 20px;
- }
+ &:after {
+ position: absolute;
+ top: 0;
+ width: 20px;
+ height: 20px;
+ }
- &.ascending:after {
- content: ' \\25B2';
- }
+ &.ascending:after {
+ content: ' \\25B2';
+ }
- &.descending:after {
- content: ' \\25BC';
- }
+ &.descending:after {
+ content: ' \\25BC';
+ }
- &:first-child {
- padding-left: 0;
- }
+ &:first-child {
+ padding-left: 0;
}
-`;
\ No newline at end of file
+ }
+`;
diff --git a/src/components/Organizations/User/logic.js b/src/components/Organizations/User/logic.js
index 30cac857..18c6dcac 100644
--- a/src/components/Organizations/User/logic.js
+++ b/src/components/Organizations/User/logic.js
@@ -1,21 +1,24 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValueGroup', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Organizations/Users/UsersSkeleton.tsx b/src/components/Organizations/Users/UsersSkeleton.tsx
index 4b2e30a5..9b4054ae 100644
--- a/src/components/Organizations/Users/UsersSkeleton.tsx
+++ b/src/components/Organizations/Users/UsersSkeleton.tsx
@@ -12,10 +12,7 @@ const UsersSkeleton: FC = ({ title }) => {
const numberOfFields = typeof window !== 'undefined' ? Math.floor((window.innerHeight * 8) / 10 / 65) : 10;
const usersSkeleton = (index: number) => (
-
+
diff --git a/src/components/Organizations/Users/index.js b/src/components/Organizations/Users/index.js
index 740dc591..2c7a1a3e 100644
--- a/src/components/Organizations/Users/index.js
+++ b/src/components/Organizations/Users/index.js
@@ -162,6 +162,7 @@ const Users = ({ users = [], organization, organizationId, organizationName, ref
}
return (
<>
- setAddUserModalOpen(true)}>
+ setAddUserModalOpen(true)}>
Add user
diff --git a/src/components/Organizations/Users/logic.js b/src/components/Organizations/Users/logic.js
index 30cac857..18c6dcac 100644
--- a/src/components/Organizations/Users/logic.js
+++ b/src/components/Organizations/Users/logic.js
@@ -1,21 +1,24 @@
import compose from 'recompose/compose';
-import withState from 'recompose/withState';
import withHandlers from 'recompose/withHandlers';
+import withState from 'recompose/withState';
const withInputValue = withState('inputValueGroup', 'setInputValue', '');
const withInputHandlers = withHandlers({
- setInputValue: ({ setInputValue }) => event =>
- setInputValue(event.target.value)
+ setInputValue:
+ ({ setInputValue }) =>
+ event =>
+ setInputValue(event.target.value),
});
const withModalState = withState('open', 'setOpen', false);
const withModalHandlers = withHandlers({
- openModal: ({ setOpen }) => () => setOpen(true),
- closeModal: ({ setOpen }) => () => setOpen(false)
+ openModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(true),
+ closeModal:
+ ({ setOpen }) =>
+ () =>
+ setOpen(false),
});
-export default compose(
- withInputValue,
- withInputHandlers,
- withModalState,
- withModalHandlers
-);
+export default compose(withInputValue, withInputHandlers, withModalState, withModalHandlers);
diff --git a/src/components/Problems/index.js b/src/components/Problems/index.js
index 9812a67c..ac46e3fb 100644
--- a/src/components/Problems/index.js
+++ b/src/components/Problems/index.js
@@ -31,10 +31,9 @@ const reduceProblemsDuplicatedByService = problems => {
}
}
return Array.from(reduceProblemsByService.values());
-}
+};
const Problems = ({ problems }) => {
-
const reducedProblems = reduceProblemsDuplicatedByService(problems);
const { sortedItems, requestSort, getClassNamesFor } = useSortableProblemsData(reducedProblems);
@@ -50,7 +49,6 @@ const Problems = ({ problems }) => {
const sources = getOptionsFromProblems(problems, 'source');
const services = getOptionsFromProblems(problems, 'service');
-
// Handlers
const handleSort = key => requestSort(key);
@@ -95,40 +93,40 @@ const Problems = ({ problems }) => {
const matchesSeveritySelector = item => {
return severitySelected.length > 0
? Object.keys(item).some(key => {
- if (item[key] !== null) {
- return severitySelected.indexOf(item['severity'].toString()) > -1;
- }
- })
+ if (item[key] !== null) {
+ return severitySelected.indexOf(item['severity'].toString()) > -1;
+ }
+ })
: true;
};
const matchesSourceSelector = item => {
return sourceSelected.length > 0
? Object.keys(item).some(key => {
- if (item[key] !== null) {
- return sourceSelected.indexOf(item['source'].toString()) > -1;
- }
- })
+ if (item[key] !== null) {
+ return sourceSelected.indexOf(item['source'].toString()) > -1;
+ }
+ })
: true;
};
const matchesServiceSelector = item => {
return servicesSelected.length > 0
? Object.keys(item).some(key => {
- if (item[key] !== null) {
- return servicesSelected.indexOf(item['service'].toString()) > -1;
- }
- })
+ if (item[key] !== null) {
+ return servicesSelected.indexOf(item['service'].toString()) > -1;
+ }
+ })
: true;
};
const matchesTextFilter = item => {
return problemTerm != null || problemTerm !== ''
? Object.keys(item).some(key => {
- if (item[key] !== null) {
- return item[key].toString().toLowerCase().includes(problemTerm.toLowerCase());
- }
- })
+ if (item[key] !== null) {
+ return item[key].toString().toLowerCase().includes(problemTerm.toLowerCase());
+ }
+ })
: true;
};
@@ -141,7 +139,6 @@ const Problems = ({ problems }) => {
);
};
-
useEffect(() => {
let stats = {
critical: sortedItems.filter(p => p.severity === 'CRITICAL').length,
diff --git a/src/components/Problems/index.stories.tsx b/src/components/Problems/index.stories.tsx
index 36be5944..96101c37 100644
--- a/src/components/Problems/index.stories.tsx
+++ b/src/components/Problems/index.stories.tsx
@@ -17,7 +17,7 @@ const problemData = Array.from({
min: 1,
max: 10,
}),
-}).map((_,idx) => {
+}).map((_, idx) => {
return ProblemIdentifier(idx);
})[0].problems;
diff --git a/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx b/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx
index e24941d4..d49d0058 100644
--- a/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx
+++ b/src/components/ProblemsByIdentifier/StyledProblemsByIdentifier.tsx
@@ -116,7 +116,7 @@ export const StyledProblemsByIdentifier = styled.div`
.data-none {
border: 1px solid ${props => props.theme.borders.tableRow};
border-bottom: 1px solid ${props => props.theme.borders.tableRow};
- background:${props => props.theme.backgrounds.primary} !important;
+ background: ${props => props.theme.backgrounds.primary} !important;
border-radius: 3px;
line-height: 1.5rem;
padding: 8px 0 7px 0;
diff --git a/src/components/ProblemsByIdentifier/index.stories.tsx b/src/components/ProblemsByIdentifier/index.stories.tsx
index 1d5ba159..913ff860 100644
--- a/src/components/ProblemsByIdentifier/index.stories.tsx
+++ b/src/components/ProblemsByIdentifier/index.stories.tsx
@@ -19,11 +19,10 @@ export const Default = () => (
min: 1,
max: 10,
}),
- }).map((_,idx) => {
+ }).map((_, idx) => {
return ProblemIdentifier(idx);
})}
/>
);
-
export const NoProblems = () =>
Created
-
{moment.utc(project.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+
+ {moment.utc(project.created).local().format('DD MMM YYYY, HH:mm:ss (Z)')}
+
{gitLink ? (
@@ -36,7 +39,7 @@ const ProjectDetailsSidebar = ({ project }) => {
Origin
@@ -53,6 +56,7 @@ const ProjectDetailsSidebar = ({ project }) => {
Copied
{
setCopied(true);
@@ -70,7 +74,9 @@ const ProjectDetailsSidebar = ({ project }) => {
Branches enabled
-
{project.branches}
+
+ {project.branches}
+
)}
@@ -78,14 +84,16 @@ const ProjectDetailsSidebar = ({ project }) => {
Pull requests enabled
-
{project.pullrequests}
+
+ {project.pullrequests}
+
)}
Development environments in use
-
+
{developEnvironmentCount} of {R.defaultTo('unlimited', project.developmentEnvironmentsLimit)}
@@ -96,7 +104,7 @@ const ProjectDetailsSidebar = ({ project }) => {
Deploy Targets
diff --git a/src/components/ProjectDetailsSidebar/index.stories.tsx b/src/components/ProjectDetailsSidebar/index.stories.tsx
index f1934c83..2c1b51dd 100644
--- a/src/components/ProjectDetailsSidebar/index.stories.tsx
+++ b/src/components/ProjectDetailsSidebar/index.stories.tsx
@@ -12,7 +12,7 @@ import ProjectDetailsSidebar from './index';
const meta: Meta = {
component: ProjectDetailsSidebar,
title: 'Components/ProjectDetailsSidebar',
- tags:["autodocs"],
+ tags: ['autodocs'],
};
type Story = StoryObj;
diff --git a/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx b/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
index 9d18fc2b..f69cd672 100644
--- a/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
+++ b/src/components/ProjectNavTabs/ProjectNavTabsSkeleton.tsx
@@ -1,7 +1,7 @@
import React, { FC } from 'react';
import Skeleton from 'react-loading-skeleton';
-import { DeploymentUnitOutlined, UnorderedListOutlined, ReadOutlined } from '@ant-design/icons';
+import { DeploymentUnitOutlined, ReadOutlined, UnorderedListOutlined } from '@ant-design/icons';
import DeployTargetsLink from 'components/link/DeployTargets';
import ProjectLink from 'components/link/Project';
import ProjectChildPageLink from 'components/link/ProjectChildPageLink';
diff --git a/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx b/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
index a939c108..76871ee1 100644
--- a/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
+++ b/src/components/ProjectNavTabs/StyledProjectNavTabs.tsx
@@ -1,3 +1,3 @@
-import { StyledNavigation as Nav } from "components/Organizations/NavTabs/StyledNavTabs";
+import { StyledNavigation as Nav } from 'components/Organizations/NavTabs/StyledNavTabs';
-export const StyledProjectNavTabs = Nav;
\ No newline at end of file
+export const StyledProjectNavTabs = Nav;
diff --git a/src/components/ProjectNavTabs/index.js b/src/components/ProjectNavTabs/index.js
index a507890b..459e19da 100644
--- a/src/components/ProjectNavTabs/index.js
+++ b/src/components/ProjectNavTabs/index.js
@@ -2,7 +2,7 @@ import React from 'react';
import getConfig from 'next/config';
-import { DeploymentUnitOutlined, UnorderedListOutlined, ReadOutlined } from '@ant-design/icons';
+import { DeploymentUnitOutlined, ReadOutlined, UnorderedListOutlined } from '@ant-design/icons';
import DeployTargetsLink from 'components/link/DeployTargets';
import ProjectLink from 'components/link/Project';
import ProjectVariablesLink from 'components/link/ProjectVariables';
@@ -21,7 +21,7 @@ const ProjectNavTabs = ({ activeTab, project }) => {
{publicRuntimeConfig.LAGOON_UI_VIEW_ENV_VARIABLES == null && (
-
+
Variables
diff --git a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
index 365c0729..8bbb2117 100644
--- a/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
+++ b/src/components/ProjectVariables/ProjectVariablesSkeleton.tsx
@@ -1,10 +1,8 @@
-import React from "react";
-import Skeleton from "react-loading-skeleton";
-import {
- StyledProjectVariablesDetails,
- StyledProjectVariableTable,
-} from "./StyledProjectVariables";
-import Button from "react-bootstrap/Button";
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Skeleton from 'react-loading-skeleton';
+
+import { StyledProjectVariableTable, StyledProjectVariablesDetails } from './StyledProjectVariables';
const ProjectVariablesSkeleton = () => {
const numberOfVariableFields = 3;
@@ -12,10 +10,10 @@ const ProjectVariablesSkeleton = () => {
const skeletonItem = (
);
@@ -38,11 +36,7 @@ const ProjectVariablesSkeleton = () => {
Scope
-
- {[...Array(numberOfVariableFields)].map(
- () => skeletonItem
- )}
-
+ {[...Array(numberOfVariableFields)].map(() => skeletonItem)}
);
diff --git a/src/components/ProjectVariables/StyledProjectVariables.tsx b/src/components/ProjectVariables/StyledProjectVariables.tsx
index d8dcec48..fadc0443 100644
--- a/src/components/ProjectVariables/StyledProjectVariables.tsx
+++ b/src/components/ProjectVariables/StyledProjectVariables.tsx
@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { bp, color } from "lib/variables";
+import { bp, color } from 'lib/variables';
+import styled from 'styled-components';
export const VariableActions = styled.div`
display: flex;
@@ -66,7 +66,7 @@ export const StyledProjectVariablesDetails = styled.div`
width: 100%;
&::before {
- background-image: url("/static/images/git-lab.svg");
+ background-image: url('/static/images/git-lab.svg');
background-size: 19px 17px;
}
@@ -107,7 +107,7 @@ export const StyledProjectVariablesDetails = styled.div`
.header-buttons {
display: flex;
margin: 0 4px;
-
+
.add-variable {
width: 54px;
height: 38px;
@@ -121,14 +121,14 @@ export const StyledProjectVariablesDetails = styled.div`
display: inline-block;
width: 36px;
height: 36px;
-
+
&.value-btn {
width: 90px;
height: 17px;
}
}
.loader:after {
- content: " ";
+ content: ' ';
display: block;
width: 24px;
height: 24px;
@@ -230,15 +230,15 @@ export const StyledProjectVariableTable = styled.div`
}
.data-table {
- background-color: ${(props) => props.theme.backgrounds.table};
- border: 1px solid ${(props) => props.theme.borders.tableRow};
+ background-color: ${props => props.theme.backgrounds.table};
+ border: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.03);
}
.data-none {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 3px;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -246,8 +246,8 @@ export const StyledProjectVariableTable = styled.div`
}
.values-present.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
padding: 8px 0 7px 0;
@@ -285,12 +285,12 @@ export const StyledProjectVariableTable = styled.div`
width: 32.5%;
}
& .varUpdate {
- display: flex;
- padding: 0;
+ display: flex;
+ padding: 0;
- button {
- background-color: #fff;
- }
+ button {
+ background-color: #fff;
+ }
}
& .varActions {
width: 20%;
@@ -305,8 +305,8 @@ export const StyledProjectVariableTable = styled.div`
}
.data-row {
- border: 1px solid ${(props) => props.theme.borders.tableRow};
- border-bottom: 1px solid ${(props) => props.theme.borders.tableRow};
+ border: 1px solid ${props => props.theme.borders.tableRow};
+ border-bottom: 1px solid ${props => props.theme.borders.tableRow};
border-radius: 0;
line-height: 1.5rem;
align-items: center;
@@ -331,9 +331,9 @@ export const StyledProjectVariableTable = styled.div`
width: 65%;
padding-left: 20px;
- @media ${bp.tabletDown} {
- width: 45%;
- }
+ @media ${bp.tabletDown} {
+ width: 45%;
+ }
}
& .varScope {
width: 30%;
diff --git a/src/components/ProjectVariables/index.js b/src/components/ProjectVariables/index.js
index 48bfa510..cafc475b 100644
--- a/src/components/ProjectVariables/index.js
+++ b/src/components/ProjectVariables/index.js
@@ -1,35 +1,34 @@
-import React, { Fragment, useState } from "react";
-import "bootstrap/dist/css/bootstrap.min.css";
-import ProjectByNameWithEnvVarsValueQuery from "../../lib/query/ProjectByNameWithEnvVarsValue";
-import { useLazyQuery } from "@apollo/react-hooks";
-import AddVariable from "../AddVariable";
-import ViewVariableValue from "../ViewVariableValue";
-import Button from "react-bootstrap/Button";
-import Btn from 'components/Button'
-import Collapse from "react-bootstrap/Collapse";
+import React, { Fragment, useState } from 'react';
+import Button from 'react-bootstrap/Button';
+import Collapse from 'react-bootstrap/Collapse';
+
+import Image from 'next/image';
+
+import { LoadingOutlined } from '@ant-design/icons';
+import { useLazyQuery } from '@apollo/react-hooks';
+import { Tag } from 'antd';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import Alert from 'components/Alert';
+import Btn from 'components/Button';
import withLogic from 'components/DeleteConfirm/logic';
-import Image from "next/image";
-import show from "../../static/images/show.svg";
-import hide from "../../static/images/hide.svg";
-import {
- StyledProjectVariablesDetails,
- StyledProjectVariableTable,
- VariableActions,
-} from "./StyledProjectVariables";
-import DeleteVariable from "components/DeleteVariable";
-import Alert from 'components/Alert'
-import {Tag} from "antd";
-import {LoadingOutlined} from "@ant-design/icons";
-import {DeleteVariableButton} from "../DeleteVariable/StyledDeleteVariable";
+import DeleteVariable from 'components/DeleteVariable';
+
+import ProjectByNameWithEnvVarsValueQuery from '../../lib/query/ProjectByNameWithEnvVarsValue';
+import hide from '../../static/images/hide.svg';
+import show from '../../static/images/show.svg';
+import AddVariable from '../AddVariable';
+import { DeleteVariableButton } from '../DeleteVariable/StyledDeleteVariable';
+import ViewVariableValue from '../ViewVariableValue';
+import { StyledProjectVariableTable, StyledProjectVariablesDetails, VariableActions } from './StyledProjectVariables';
/**
* Displays the projects variable information.
*/
-const hashValue = (value) => {
- let hashedVal = "●";
+const hashValue = value => {
+ let hashedVal = '●';
for (let l = 0; l < value.length; l++) {
- hashedVal += "●";
+ hashedVal += '●';
}
return hashedVal;
};
@@ -40,9 +39,9 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
const [valueState, setValueState] = useState(initValueState);
const [openPrjVars, setOpenPrjVars] = useState(false);
- const [updateVarValue, setUpdateVarValue ] = useState('');
- const [updateVarName, setUpdateVarName ] = useState('');
- const [updateVarScope, setUpdateVarScope ] = useState('');
+ const [updateVarValue, setUpdateVarValue] = useState('');
+ const [updateVarName, setUpdateVarName] = useState('');
+ const [updateVarScope, setUpdateVarScope] = useState('');
const [projectErrorAlert, setProjectErrorAlert] = useState(false);
const [action, setAction] = useState('');
@@ -50,18 +49,17 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
setProjectErrorAlert(false);
};
-
- const [
- getPrjEnvVarValues,
- { loading: prjLoading, error: prjError, data: prjEnvValues },
- ] = useLazyQuery(ProjectByNameWithEnvVarsValueQuery, {
- variables: { name: project.name },
- onError: () => {
- setOpenPrjVars(false);
- setValueState(initValueState);
- setProjectErrorAlert(true);
+ const [getPrjEnvVarValues, { loading: prjLoading, error: prjError, data: prjEnvValues }] = useLazyQuery(
+ ProjectByNameWithEnvVarsValueQuery,
+ {
+ variables: { name: project.name },
+ onError: () => {
+ setOpenPrjVars(false);
+ setValueState(initValueState);
+ setProjectErrorAlert(true);
+ },
}
- });
+ );
if (prjEnvValues) {
displayVars = prjEnvValues.project.envVariables;
@@ -69,36 +67,32 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
if (prjError) console.error(prjError);
- const valuesShow = (index) => {
- setValueState((valueState) =>
- valueState.map((el, i) => (i === index ? true : el))
- );
+ const valuesShow = index => {
+ setValueState(valueState => valueState.map((el, i) => (i === index ? true : el)));
};
- const valuesHide = (index) => {
- setValueState((valueState) =>
- valueState.map((el, i) => (i === index ? false : el))
- );
+ const valuesHide = index => {
+ setValueState(valueState => valueState.map((el, i) => (i === index ? false : el)));
};
const showVarValue = () => {
getPrjEnvVarValues();
setOpenPrjVars(!openPrjVars);
setValueState(initValueState);
- setAction("view")
+ setAction('view');
};
const setUpdateValue = (rowValue, rowName, rowScope) => {
setUpdateVarValue(rowValue);
- setUpdateVarName(rowName)
- setUpdateVarScope(rowScope)
- }
+ setUpdateVarName(rowName);
+ setUpdateVarScope(rowScope);
+ };
const permissionCheck = (action) => {
getPrjEnvVarValues();
setOpenPrjVars(false);
setAction(action);
- }
+ };
const renderValue = (projEnvVar, index) => {
if (projEnvVar.value.length >= 0 && !valueState[index]) {
@@ -110,7 +104,7 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
} else {
return projEnvVar.value
}
- }
+ };
const renderValues = (projEnvVar, index) => {
if (prjLoading) {
@@ -129,6 +123,7 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
)}
- }
+ };
return (
@@ -150,16 +145,13 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
type="error"
closeAlert={closeProjectError}
header="Unauthorized:"
- message={`You don't have permission to ${action} project ${action === "view" ? " variable values" : "variables"}. Contact your administrator to obtain the relevant permissions.`}
+ message={`You don't have permission to ${action} project ${action === 'view' ? ' variable values' : 'variables'}. Contact your administrator to obtain the relevant permissions.`}
/>
)}
Project Variables
-
permissionCheck("add")}
- style={{ all: "unset" }}
- >
+ permissionCheck('add')} style={{ all: 'unset' }}>
{projectErrorAlert ? Add :
{
onClick={() => showVarValue()}
aria-controls="example-collapse-text"
aria-expanded={openPrjVars}
+ data-cy="hideShowValues"
>
- {!openPrjVars ? "Show values" : "Hide values"}
+ {!openPrjVars ? 'Show values' : 'Hide values'}
)}
@@ -197,11 +190,7 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
{ displayVars.length > 0 && (
-
+
Name
@@ -214,15 +203,11 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
+
{displayVars.map((projEnvVar, index) => {
return (
-
+
{projEnvVar.name}
{projEnvVar.scope}
{renderValues(projEnvVar, index)}
@@ -231,8 +216,8 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
- style={{ all: 'unset'}}
+ onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
+ style={{ all: 'unset' }}
>
{
-
-
permissionCheck("delete", index)}
- style={{ all: "unset" }}
- >
- {prjLoading && action === "delete" ?
+
+ permissionCheck('delete', index)} style={{ all: 'unset' }}>
+ {prjLoading && action === 'delete' ? (
-
- {valueState[index] ?
+ {valueState[index] ?
- :
+ ) : (
{
icon="bin"
refresh={onVariableAdded}
/>
- }
+ )}
diff --git a/src/components/Projects/index.js b/src/components/Projects/index.js
index 16668755..c9fd19d2 100644
--- a/src/components/Projects/index.js
+++ b/src/components/Projects/index.js
@@ -40,11 +40,12 @@ const Projects = ({ projects = [], initialSearch }) => {
return (
-
+
{filteredProjects.length <= 1 ? `${filteredProjects.length} Project` : `${filteredProjects.length} Projects`}
{
{!projects.length && (
-
+
No projects
)}
{searchInput && !filteredProjects.length && (
-
+
No projects matching "{searchInput}"
@@ -76,7 +77,7 @@ const Projects = ({ projects = [], initialSearch }) => {
-
+
{project.environments.map((environment, index) => (
(
-
+ console.error(e)}>
{(addRestore, { loading, called, error, data }) => {
if (error) {
return Retrieve failed ;
@@ -23,7 +23,11 @@ const Prepare = ({ backupId }) => (
return Retrieving ... ;
}
- return Retrieve ;
+ return (
+
+ Retrieve
+
+ );
}}
);
diff --git a/src/components/ResultsLimited/index.js b/src/components/ResultsLimited/index.js
index 2f10a400..2b8f9f11 100644
--- a/src/components/ResultsLimited/index.js
+++ b/src/components/ResultsLimited/index.js
@@ -41,15 +41,16 @@ const ResultsLimited = ({ limit, changeLimit, message, disableHandler }) => {
{limit && (
-
+
Number of results displayed is limited to {limit}
{message}
)}
-