Skip to content

Commit

Permalink
Merge pull request #242 from uselagoon/fix_variable-delete-btn
Browse files Browse the repository at this point in the history 
Fix: Fixes variable deletion btn & updates the delete modal btn text to confirm successful deletion
  • Loading branch information
@tobybellwood
tobybellwood authored May 16, 2024
2 parents 3cb5e54 + 19698ee commit 67d9718
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 108 deletions.
27 changes: 20 additions & 7 deletions src/components/DeleteVariable/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { Mutation } from 'react-apollo';
import ButtonBootstrap from 'react-bootstrap/Button';

import { LoadingOutlined } from '@ant-design/icons';
import withLogic from 'components/AddVariable/logic';
import Button from 'components/Button';
import Modal from 'components/Modal';
Expand All @@ -26,18 +27,30 @@ export const DeleteVariable = ({
open,
openModal,
closeModal,
envValues,
prjEnvValues,
loading,
valueState,
}) => {
const handlePermissionCheck = () => {
let waitForGQL = setTimeout(() => {
openModal();
}, [1000]);
if (prjEnvValues || envValues) {
clearTimeout(waitForGQL);
openModal();
}
};

return (
<React.Fragment>
<DeleteVariableButton>
{icon ? (
<Button variant="red" icon={icon} action={openModal}>
Delete
</Button>
) : (
{loading && valueState ? (
<Button variant="red" action={openModal}>
Delete
<LoadingOutlined />
</Button>
) : (
<Button variant="red" icon={icon} action={handlePermissionCheck}></Button>
)}
</DeleteVariableButton>
<Modal isOpen={open} onRequestClose={closeModal} contentLabel={`Confirm`} variant={'large'}>
Expand Down Expand Up @@ -82,7 +95,7 @@ export const DeleteVariable = ({
className="btn-danger"
onClick={deleteEnvVariableByNameHandler}
>
{loading ? 'Deleting...' : 'Delete'}
{loading ? 'Deleting...' : data ? 'Success' : 'Delete'}
</ButtonBootstrap>
);
}}
Expand Down
6 changes: 6 additions & 0 deletions src/components/EnvironmentVariables/StyledEnvironmentVariables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ export const StyledEnvironmentVariableDetails = styled.div`
height: 38px;
}
@media ${bp.xs_smallUp} {
.show-value-btn {
min-width: 116px;
}
}
button {
margin-right: 4px;
}
Expand Down
125 changes: 67 additions & 58 deletions src/components/EnvironmentVariables/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,10 +133,13 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
setUpdateVarScope(rowScope);
};

const permissionCheck = action => {
const permissionCheck = (action, index = null) => {
getEnvVarValues();
setOpenEnvVars(false);
setAction(action);
if (action === 'delete') {
valuesShow(index);
}
};

const renderEnvValue = (envVar, index) => {
Expand Down Expand Up @@ -164,10 +167,6 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
};

const renderEnvValues = (envVar, index) => {
if (envLoading) {
return <div className="loader"></div>;
}

if (envVar.value !== undefined) {
return (
<Collapse in={openEnvVars}>
Expand All @@ -194,10 +193,6 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
};

const renderPrjValues = (projEnvVar, index) => {
if (prjLoading) {
return <div className="loader"></div>;
}

if (projEnvVar.value !== undefined) {
return (
<Collapse in={openPrjVars}>
Expand Down Expand Up @@ -252,7 +247,7 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
refresh={onVariableAdded}
setEnvironmentErrorAlert={setEnvironmentErrorAlert}
action="add"
loading={prjLoading && action === 'add'}
loading={envLoading && action === 'add'}
envValues={envValues}
/>
)}
Expand All @@ -262,9 +257,10 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
onClick={() => showVarValue()}
aria-controls="example-collapse-text"
data-cy="hideShowValues"
aria-expanded={openPrjVars}
aria-expanded={openEnvVars}
className="show-value-btn"
>
{!openEnvVars ? 'Show values' : 'Hide values'}
{!openEnvVars ? 'Show values' : envLoading ? <LoadingOutlined /> : 'Hide values'}
</Button>
)}
</div>
Expand All @@ -281,65 +277,69 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
{displayVars.length > 0 && (
<div className="field-wrapper env-vars">
<StyledVariableTable>
<div className={openEnvVars ? 'values-present table-header' : 'table-header'}>
<div className={!envLoading && openEnvVars ? 'values-present table-header' : 'table-header'}>
<div className="name">
<label>Name</label>
</div>
<div className="scope">
<label>Scope</label>
</div>
<Collapse in={openEnvVars}>
<div className="value">
<label>Value</label>
</div>
</Collapse>
{!envLoading && (
<Collapse in={openEnvVars}>
<div className="value">
<label>Value</label>
</div>
</Collapse>
)}
</div>
<div className="data-table" data-cy="environment-table">
{displayVars.map((envVar, index) => {
return (
<Fragment key={index}>
<div className={openEnvVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
<div
className={!envLoading && openEnvVars ? 'values-present data-row' : 'data-row'}
data-cy="environment-row"
>
<div className="varName">{envVar.name}</div>
<div className="varScope">{envVar.scope}</div>
{renderEnvValues(envVar, index)}
<div className="varActions">
<VariableActions>
<Collapse in={openEnvVars}>
<div className="varUpdate">
<Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
<Button
onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
style={{ all: 'unset' }}
{!envLoading && (
<Collapse in={openEnvVars}>
<div className="varUpdate">
<Tooltip
overlayClassName="componentTooltip"
title="Update Variable"
placement="bottom"
>
<AddVariable
varProject={environment.project.name}
varEnvironment={environment.name}
varValues={displayVars}
varTarget="Environment"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
action="edit"
/>
</Button>
</Tooltip>
</div>
</Collapse>
<Button
onClick={() => setUpdateValue(envVar.value, envVar.name, envVar.scope)}
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"
action="edit"
/>
</Button>
</Tooltip>
</div>
</Collapse>
)}
<div className="varDelete">
<Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
<Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
{envLoading && action === 'delete' ? (
{environmentErrorAlert ? (
<DeleteVariableButton>
<Btn
index={index}
variant="red"
icon={!valueState[index] ? 'bin' : ''}
className="delete-btn"
>
{valueState[index] ? <LoadingOutlined /> : 'Delete'}
</Btn>
<Btn index={index} variant="red" icon="bin" className="delete-btn"></Btn>
</DeleteVariableButton>
) : (
<DeleteVariable
Expand All @@ -349,6 +349,9 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
varEnvironment={environment.name}
icon="bin"
refresh={onVariableAdded}
envValues={envValues}
loading={envLoading && action === 'delete'}
valueState={valueState[index]}
/>
)}
</Button>
Expand Down Expand Up @@ -390,8 +393,9 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
onClick={() => showPrjVarValue()}
aria-controls="example-collapse-text"
aria-expanded={openPrjVars}
className="show-value-btn"
>
{!openPrjVars ? 'Show values' : 'Hide values'}
{!openPrjVars ? 'Show values' : prjLoading ? <LoadingOutlined /> : 'Hide values'}
</Button>
)}
</div>
Expand All @@ -408,24 +412,29 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
{displayProjectVars.length > 0 && (
<div className="field-wrapper env-vars">
<StyledProjectVariableTable>
<div className={openPrjVars ? 'values-present table-header' : 'table-header'}>
<div className={!prjLoading && openPrjVars ? 'values-present table-header' : 'table-header'}>
<div className="name">
<label>Name</label>
</div>
<div className="scope">
<label>Scope</label>
</div>
<Collapse in={openPrjVars}>
<div className="value">
<label>Value</label>
</div>
</Collapse>
{!prjLoading && (
<Collapse in={openPrjVars}>
<div className="value">
<label>Value</label>
</div>
</Collapse>
)}
</div>
<div className="data-table" data-cy="environment-table">
{displayProjectVars.map((projEnvVar, index) => {
return (
<Fragment key={index}>
<div className={openPrjVars ? 'values-present data-row' : 'data-row'} data-cy="environment-row">
<div
className={!prjLoading && openPrjVars ? 'values-present data-row' : 'data-row'}
data-cy="environment-row"
>
<div className="varName">{projEnvVar.name}</div>
<div className="varScope">{projEnvVar.scope}</div>
{renderPrjValues(projEnvVar, index)}
Expand Down
6 changes: 6 additions & 0 deletions src/components/ProjectVariables/StyledProjectVariables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,12 @@ export const StyledProjectVariablesDetails = styled.div`
height: 38px;
}
@media ${bp.xs_smallUp} {
.show-value-btn {
min-width: 116px;
}
}
button {
margin-right: 4px;
}
Expand Down
Loading

0 comments on commit 67d9718

Please sign in to comment.