Skip to content

Commit

Permalink
Change: Allow for empty variable values (#196)
Browse files Browse the repository at this point in the history
  • Loading branch information
@CGoodwin90
CGoodwin90 authored Nov 27, 2023
1 parent 8e53085 commit c1c77ec
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 55 deletions.
105 changes: 76 additions & 29 deletions src/components/AddVariable/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ 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, custom } from "./StyledAddVariable";
import { NewVariable, NewVariableModal } from "./StyledAddVariable";
import { Popconfirm } from 'antd';

/**
* Adds a Variable.
Expand Down Expand Up @@ -44,24 +45,32 @@ export const AddVariable = ({
openModal,
closeModal,
setClear,
action,
}) => {
const [updateName, setUpdateName] = useState(varName);
const [updateValue, setUpdateValue] = useState(varValue);
const [updateScope, setUpdateScope] = useState(varScope);
const [openPop, setOpenPop] = useState(false);
const handleUpdateValue = (event) => {setUpdateValue(event.target.value)};
const handlePopCancel = () => {
setOpenPop(false);
};
const showPopconfirm = () => {
setOpenPop(true);
};
useEffect(() => {
setUpdateValue(varValue);
setUpdateName(varName);
setUpdateScope(varScope);
}, [varValue]);
}, [varName, varValue]);

return (
<NewVariable>
{
icon ?
<Button variant='white' icon={icon} action={openModal}>
Update
</Button>
<Button variant='white' icon={icon} action={openModal}>
Update
</Button>
:
<ButtonBootstrap onClick={openModal}>
{
Expand Down Expand Up @@ -93,7 +102,7 @@ export const AddVariable = ({
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)
: (selectedOption) => setInputScope(selectedOption.value)
}
options={scopeOptions}
required
Expand Down Expand Up @@ -128,7 +137,7 @@ export const AddVariable = ({
cancel
</a>
<Mutation mutation={addOrUpdateEnvVariableMutation}>
{(addOrUpdateEnvVariableByName, { called, error, data }) => {
{(addOrUpdateEnvVariableByName, { called, error, data, loading }) => {
let updateVar = varValues.map((varName) => {
return varName.name;
});
Expand All @@ -147,10 +156,12 @@ export const AddVariable = ({
refresh().then(setClear).then(closeModal);
}

if (updateVar && called || updateName && called ) {
return <div>Updating variable</div>;
} else if (called) {
return <div>Adding variable</div>;
if (action === "add" && inputValue !== '' || action === "edit" && updateValue !== '' || action === "edit" && inputValue !== '') {
if (action === "edit" && called ) {
return <div>Updating variable</div>;
} else if (action === "add" && called) {
return <div>Adding variable</div>;
}
}

const addOrUpdateEnvVariableHandler = () => {
Expand All @@ -165,26 +176,62 @@ export const AddVariable = ({
},
},
});
setTimeout(() => {
setOpenPop(false);
}, 1000);
};

return (
<ButtonBootstrap
disabled={ updateName ?
updateName === "" || updateValue === "" || updateScope === ""
:
inputName === "" || inputValue === "" || inputScope === ""
}
onClick={addOrUpdateEnvVariableHandler}
>
{varTarget == "Environment"
? updateVar || varName
? "Update environment variable"
: "Add environment variable"
: updateVar || varName
? "Update project variable"
: "Add project variable"}
</ButtonBootstrap>
);
if (action === "add" && inputValue === '' || action === "edit" && updateValue === '' && inputValue === '') {
return (
<Popconfirm
title="No value set for this variable."
description="Are you sure you want to continue?"
open={openPop}
onConfirm={addOrUpdateEnvVariableHandler}
okButtonProps={{
loading: loading,
}}
onCancel={handlePopCancel}
>
<ButtonBootstrap
disabled={ updateName ?
updateName === "" || updateScope === ""
:
inputName === "" || inputScope === ""
}
onClick={showPopconfirm}
>
{varTarget === "Environment"
? updateVar || varName
? "Update environment variable"
: "Add environment variable"
: updateVar || varName
? "Update project variable"
: "Add project variable"}
</ButtonBootstrap>
</Popconfirm>
);
} else {
return (
<ButtonBootstrap
disabled={ updateName ?
updateName === "" || updateScope === ""
:
inputName === "" || inputScope === ""
}
onClick={addOrUpdateEnvVariableHandler}
>
{varTarget === "Environment"
? updateVar || varName
? "Update environment variable"
: "Add environment variable"
: updateVar || varName
? "Update project variable"
: "Add project variable"}
</ButtonBootstrap>
)
}

}}
</Mutation>
</div>
Expand Down
62 changes: 46 additions & 16 deletions src/components/EnvironmentVariables/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ 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";

/**
* Displays the environment variable information.
Expand Down Expand Up @@ -142,6 +143,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
varTarget="Environment"
noVars="Add"
refresh={onVariableAdded}
action="add"
/>
</div>
<hr style={{ margin: "30px 0" }} />
Expand All @@ -153,14 +155,14 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
<>
{
environmentErrorAlert && (
<Alert
<Alert
type="error"
closeAlert={closeEnvironmentError}
header="Unauthorized:"
message="You don't have permission to view environment variable values. Contact your administrator to obtain the relevant permissions."
/>
)
}
}
<div className="header">
<label>Environment Variables</label>
<div className="header-buttons">
Expand All @@ -174,6 +176,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
varValues={displayVars}
varTarget="Environment"
refresh={onVariableAdded}
action="add"
/>
</Button>
<Button
Expand Down Expand Up @@ -221,10 +224,23 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
<div className="loader"></div>
</div>
</Collapse>
) : envVar.value ? (
) : envVar.value !== undefined ? (
<Collapse in={openEnvVars}>
<div className="varValue" id={index}>
{envVar.value.length <= 100 &&
{envVar.value.length === 0 &&
valueState[index] ? (
<div className="showHideContainer">
<Tag color="#4578e6">Empty</Tag>
<span onClick={() => valuesHide(index)}>
<Image
src={hide}
className="showHide"
style={{ all: "unset" }}
alt=""
/>
</span>
</div>
) : envVar.value.length <= 100 &&
!valueState[index] ? (
<div className="showHideContainer">
{hashValue(envVar.value).substring(0, 25)}
Expand Down Expand Up @@ -301,15 +317,16 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
style={{ all: 'unset'}}
>
<AddVariable
varProject={environment.project.name}
varEnvironment={environment.name}
varValues={displayVars}
varTarget="Environment"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
varProject={environment.project.name}
varEnvironment={environment.name}
varValues={displayVars}
varTarget="Environment"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
action="edit"
/>
</Button>
</div>
Expand Down Expand Up @@ -359,7 +376,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
<hr style={{ margin: "30px 0" }} />
{
projectErrorAlert && (
<Alert
<Alert
type="error"
closeAlert={closeProjectError}
header="Unauthorized:"
Expand Down Expand Up @@ -423,10 +440,23 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
<div className="loader"></div>
</div>
</Collapse>
) : projEnvVar.value ? (
) : projEnvVar.value !== undefined ? (
<Collapse in={openPrjVars}>
<div className="varValue" id={index}>
{projEnvVar.value.length <= 100 &&
{projEnvVar.value.length == 0 &&
prjValueState[index] ? (
<div className="showHideContainer">
<Tag color="#4578e6">Empty</Tag>
<span onClick={() => prjValuesHide(index)}>
<Image
src={hide}
className="showHide"
style={{ all: "unset" }}
alt=""
/>
</span>
</div>
) : projEnvVar.value.length <= 100 &&
!prjValueState[index] ? (
<div className="showHideContainer">
{hashValue(projEnvVar.value).substring(0, 25)}
Expand Down
37 changes: 27 additions & 10 deletions src/components/ProjectVariables/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
} from "./StyledProjectVariables";
import DeleteVariable from "components/DeleteVariable";
import Alert from 'components/Alert'
import {Tag} from "antd";

/**
* Displays the projects variable information.
Expand Down Expand Up @@ -97,6 +98,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
varValues={displayVars}
varTarget="Project"
refresh={onVariableAdded}
action="add"
/>
</div>
<hr style={{ margin: "30px 0" }} />
Expand Down Expand Up @@ -129,6 +131,7 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
varValues={displayVars}
varTarget="Project"
refresh={onVariableAdded}
action="add"
/>
</Button>
<Button
Expand Down Expand Up @@ -176,10 +179,23 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
<div className="loader"></div>
</div>
</Collapse>
) : projEnvVar.value ? (
) : projEnvVar.value !== undefined ? (
<Collapse in={openPrjVars}>
<div className="varValue" id={index}>
{projEnvVar.value.length <= 100 &&
{projEnvVar.value.length === 0 &&
valueState[index] ? (
<div className="showHideContainer">
<Tag color="#4578e6">Empty</Tag>
<span onClick={() => valuesHide(index)}>
<Image
src={hide}
className="showHide"
style={{ all: "unset" }}
alt=""
/>
</span>
</div>
) : projEnvVar.value.length <= 100 &&
!valueState[index] ? (
<div className="showHideContainer">
{hashValue(projEnvVar.value).substring(0, 25)}
Expand Down Expand Up @@ -259,14 +275,15 @@ const ProjectVariables = ({ project, onVariableAdded, closeModal }) => {
style={{ all: 'unset'}}
>
<AddVariable
varProject={project.name}
varValues={displayVars}
varTarget="Project"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
varProject={project.name}
varValues={displayVars}
varTarget="Project"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
action="edit"
/>
</Button>
</div>
Expand Down

0 comments on commit c1c77ec

Please sign in to comment.