cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

[2/n][project settings ui] AddEnvironmentVariableRowProps (#24)

Browse Source
This commit is contained in:
Vivian Phung 2024-05-14 15:42:51 -04:00 committed by GitHub
commit e1d2b789a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 29 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/components/projects/project/settings/AddEnvironmentVariableRow.tsx
View File

@ -1,12 +1,10 @@
import { UseFormRegister } from 'react-hook-form'; import { UseFormRegister } from 'react-hook-form';
import { import { Input } from 'components/shared/Input';
Typography,
Input,
IconButton,
} from '@snowballtools/material-tailwind-react-fork';
import { EnvironmentVariablesFormValues } from '../../../../types/types'; import { EnvironmentVariablesFormValues } from '../../../../types';
import { Button } from 'components/shared/Button';
import { TrashIcon } from 'components/shared/CustomIcon';
interface AddEnvironmentVariableRowProps { interface AddEnvironmentVariableRowProps {
onDelete: () => void; onDelete: () => void;
@ -24,29 +22,32 @@ const AddEnvironmentVariableRow = ({
return ( return (
<div className="flex gap-1 p-2"> <div className="flex gap-1 p-2">
<div> <div>
<Typography variant="small">Key</Typography>
<Input <Input
label="key"
size="sm"
{...register(`variables.${index}.key`, { {...register(`variables.${index}.key`, {
required: 'Key field cannot be empty', required: 'Key field cannot be empty',
})} })}
/> />
</div> </div>
<div> <div>
<Typography variant="small">Value</Typography>
<Input <Input
size="sm"
label="value"
{...register(`variables.${index}.value`, { {...register(`variables.${index}.value`, {
required: 'Value field cannot be empty', required: 'Value field cannot be empty',
})} })}
/> />
</div> </div>
<div className="self-end"> <div className="self-end">
<IconButton <Button
size="sm" size="sm"
iconOnly
onClick={() => onDelete()} onClick={() => onDelete()}
disabled={isDeleteDisabled} disabled={isDeleteDisabled}
> >
{'>'} <TrashIcon />
</IconButton> </Button>
</div> </div>
</div> </div>
); );

33
packages/frontend/src/pages/org-slug/projects/id/settings/EnvironmentVariables.tsx
View File

@ -5,19 +5,19 @@ import { useParams } from 'react-router-dom';
import { Environment, EnvironmentVariable } from 'gql-client'; import { Environment, EnvironmentVariable } from 'gql-client';
import { import {
Typography,
Collapse, Collapse,
Card, Card,
Button,
Checkbox,
Chip, Chip,
} from '@snowballtools/material-tailwind-react-fork'; } from '@snowballtools/material-tailwind-react-fork';
import AddEnvironmentVariableRow from '../../../../../components/projects/project/settings/AddEnvironmentVariableRow';
import DisplayEnvironmentVariables from '../../../../../components/projects/project/settings/DisplayEnvironmentVariables';
import HorizontalLine from '../../../../../components/HorizontalLine';
import { useGQLClient } from '../../../../../context/GQLClientContext'; import { useGQLClient } from '../../../../../context/GQLClientContext';
import { EnvironmentVariablesFormValues } from '../../../../../types/types'; import { EnvironmentVariablesFormValues } from '../../../../../types';
import AddEnvironmentVariableRow from 'components/projects/project/settings/AddEnvironmentVariableRow';
import DisplayEnvironmentVariables from 'components/projects/project/settings/DisplayEnvironmentVariables';
import HorizontalLine from 'components/HorizontalLine';
import { Heading } from 'components/shared/Heading';
import { Button } from 'components/shared/Button';
import { Checkbox } from 'components/shared/Checkbox';
export const EnvironmentVariablesTabPanel = () => { export const EnvironmentVariablesTabPanel = () => {
const { id } = useParams(); const { id } = useParams();
@ -132,11 +132,13 @@ export const EnvironmentVariablesTabPanel = () => {
); );
return ( return (
<> <div className="space-y-3 px-2">
<Typography variant="h6">Environment variables</Typography> <Heading className="text-sky-950 text-lg font-medium leading-normal">
<Typography variant="small" className="font-medium text-gray-800"> Environment variables
</Heading>
<p className="text-slate-600 text-sm font-normal leading-tight">
A new deployment is required for your changes to take effect. A new deployment is required for your changes to take effect.
</Typography> </p>
<div className="bg-gray-300 rounded-lg p-2"> <div className="bg-gray-300 rounded-lg p-2">
<div <div
className="text-black" className="text-black"
@ -160,7 +162,6 @@ export const EnvironmentVariablesTabPanel = () => {
})} })}
<div className="flex gap-1 p-2"> <div className="flex gap-1 p-2">
<Button <Button
variant="outlined"
size="sm" size="sm"
onClick={() => onClick={() =>
append({ append({
@ -172,8 +173,8 @@ export const EnvironmentVariablesTabPanel = () => {
+ Add variable + Add variable
</Button> </Button>
{/* TODO: Implement import environment varible functionality */} {/* TODO: Implement import environment varible functionality */}
<Button variant="outlined" size="sm" disabled> <Button size="sm" disabled>
^ Import .env Import .env
</Button> </Button>
</div> </div>
{isFieldEmpty && ( {isFieldEmpty && (
@ -202,7 +203,7 @@ export const EnvironmentVariablesTabPanel = () => {
/> />
</div> </div>
<div className="p-2"> <div className="p-2">
<Button size="lg" color="blue" type="submit"> <Button size="md" type="submit">
Save changes Save changes
</Button> </Button>
</div> </div>
@ -235,6 +236,6 @@ export const EnvironmentVariablesTabPanel = () => {
}} }}
/> />
</div> </div>
</> </div>
); );
}; };