Skip to content

Commit

Permalink
Merge pull request #220 from uselagoon/add-var-tooltips
Browse files Browse the repository at this point in the history 
Adds the antd tooltips to Variable Components
  • Loading branch information
@tobybellwood
tobybellwood authored Mar 5, 2024
2 parents 6d2a25a + 53c662a commit 1198cbf
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 79 deletions.
85 changes: 45 additions & 40 deletions src/components/EnvironmentVariables/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Image from 'next/image';
import { LoadingOutlined } from '@ant-design/icons';
import { useLazyQuery } from '@apollo/react-hooks';
import { Tag } from 'antd';
import { Tooltip } from 'antd';
import 'bootstrap/dist/css/bootstrap.min.css';
import Alert from 'components/Alert';
import Btn from 'components/Button';
Expand Down Expand Up @@ -305,49 +306,53 @@ const EnvironmentVariables = ({ environment, onVariableAdded }) => {
<VariableActions>
<Collapse in={openEnvVars}>
<div className="varUpdate">
<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 overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
<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">
<Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
{envLoading && action === 'delete' ? (
<DeleteVariableButton>
<Btn
index={index}
variant="red"
icon={!valueState[index] ? 'bin' : ''}
className="delete-btn"
>
{valueState[index] ? <LoadingOutlined /> : 'Delete'}
</Btn>
</DeleteVariableButton>
) : (
<DeleteVariable
deleteType="Environment variable"
deleteName={envVar.name}
varProject={environment.project.name}
varEnvironment={environment.name}
icon="bin"
refresh={onVariableAdded}
/>
)}
</Button>
<Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
<Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
{envLoading && action === 'delete' ? (
<DeleteVariableButton>
<Btn
index={index}
variant="red"
icon={!valueState[index] ? 'bin' : ''}
className="delete-btn"
>
{valueState[index] ? <LoadingOutlined /> : 'Delete'}
</Btn>
</DeleteVariableButton>
) : (
<DeleteVariable
deleteType="Environment variable"
deleteName={envVar.name}
varProject={environment.project.name}
varEnvironment={environment.name}
icon="bin"
refresh={onVariableAdded}
/>
)}
</Button>
</Tooltip>
</div>
</VariableActions>
</div>
Expand Down
81 changes: 43 additions & 38 deletions src/components/ProjectVariables/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Image from 'next/image';
import { LoadingOutlined } from '@ant-design/icons';
import { useLazyQuery } from '@apollo/react-hooks';
import { Tag } from 'antd';
import { Tooltip } from 'antd';
import 'bootstrap/dist/css/bootstrap.min.css';
import Alert from 'components/Alert';
import Btn from 'components/Button';
Expand Down Expand Up @@ -218,47 +219,51 @@ const ProjectVariables = ({ project, onVariableAdded }) => {
<VariableActions>
<Collapse in={openPrjVars}>
<div className="varUpdate">
<Button
onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
style={{ all: 'unset' }}
>
<AddVariable
varProject={project.name}
varValues={displayVars}
varTarget="Project"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
action="edit"
/>
</Button>
<Tooltip overlayClassName="componentTooltip" title="Update Variable" placement="bottom">
<Button
onClick={() => setUpdateValue(projEnvVar.value, projEnvVar.name, projEnvVar.scope)}
style={{ all: 'unset' }}
>
<AddVariable
varProject={project.name}
varValues={displayVars}
varTarget="Project"
varName={updateVarName}
varValue={updateVarValue}
varScope={updateVarScope}
refresh={onVariableAdded}
icon="edit"
action="edit"
/>
</Button>
</Tooltip>
</div>
</Collapse>
<div className="varDelete" data-cy="varDelete">
<Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
{prjLoading && action === 'delete' ? (
<DeleteVariableButton>
<Btn
index={index}
variant="red"
icon={!valueState[index] ? 'bin' : ''}
className="delete-btn"
>
{valueState[index] ? <LoadingOutlined /> : 'Delete'}
</Btn>
</DeleteVariableButton>
) : (
<DeleteVariable
deleteType="Project variable"
deleteName={projEnvVar.name}
varProject={project.name}
icon="bin"
refresh={onVariableAdded}
/>
)}
</Button>
<Tooltip overlayClassName="componentTooltip" title="Delete Variable" placement="bottom">
<Button onClick={() => permissionCheck('delete', index)} style={{ all: 'unset' }}>
{prjLoading && action === 'delete' ? (
<DeleteVariableButton>
<Btn
index={index}
variant="red"
icon={!valueState[index] ? 'bin' : ''}
className="delete-btn"
>
{valueState[index] ? <LoadingOutlined /> : 'Delete'}
</Btn>
</DeleteVariableButton>
) : (
<DeleteVariable
deleteType="Project variable"
deleteName={projEnvVar.name}
varProject={project.name}
icon="bin"
refresh={onVariableAdded}
/>
)}
</Button>
</Tooltip>
</div>
</VariableActions>
</div>
Expand Down
10 changes: 9 additions & 1 deletion src/layouts/GlobalStyles/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,15 @@ body {
color: ${props => (props.theme.colorScheme === 'dark' ? '#000' : '#fff')};
background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
}
}
.componentTooltip {
.ant-tooltip-arrow:before{
background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
}
.ant-tooltip-content .ant-tooltip-inner{
color: ${props => (props.theme.colorScheme === 'dark' ? '#000' : '#fff')};
background: ${props => (props.theme.colorScheme === 'dark' ? '#fff' : '#000')};
}
}
#__next {
Expand Down

0 comments on commit 1198cbf

Please sign in to comment.