Skip to content

Commit

Permalink
feat(ui): live manifest viewer from warehouse details (#2175)
Browse files Browse the repository at this point in the history
Signed-off-by: Remington Breeze <remington@breeze.software>
rbreeze authored Jun 18, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 12edef6 commit 2fce9b0
Showing 4 changed files with 57 additions and 54 deletions.
11 changes: 9 additions & 2 deletions ui/src/features/common/code-editor/yaml-editor-lazy.tsx
Original file line number Diff line number Diff line change
@@ -22,6 +22,7 @@ export interface YamlEditorProps {
isLoading?: boolean;
isHideManagedFieldsDisplayed?: boolean;
label?: string;
toolbar?: React.ReactNode;
}

const YamlEditor: FC<YamlEditorProps> = (props) => {
@@ -37,7 +38,8 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {
placeholder,
isLoading,
isHideManagedFieldsDisplayed,
label
label,
toolbar
} = props;
const [hideManagedFields, setHideManagedFields] = React.useState(!!isHideManagedFieldsDisplayed);
const [managedFieldsValue, setManagedFieldsValue] = React.useState<object | null>(null);
@@ -109,7 +111,11 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {

return (
<>
<Flex justify='space-between' className={isHideManagedFieldsDisplayed || label ? 'my-1' : ''}>
<Flex
justify='end'
align='center'
className={isHideManagedFieldsDisplayed || label ? 'mb-2 mt-1' : ''}
>
<div>{label}</div>
{isHideManagedFieldsDisplayed && (
<label>
@@ -121,6 +127,7 @@ const YamlEditor: FC<YamlEditorProps> = (props) => {
Hide Managed Fields
</label>
)}
{toolbar && <div className='ml-4'>{toolbar}</div>}
</Flex>
<div
style={{ border: '1px solid #d9d9d9', height, overflow: 'hidden' }}
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import { useMutation, useQuery } from '@connectrpc/connect-query';
import { faCancel, faPencil, faSave } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { zodResolver } from '@hookform/resolvers/zod';
import { Button, Modal, Space, Typography } from 'antd';
import { Button } from 'antd';
import type { JSONSchema4 } from 'json-schema';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';

import { YamlEditor } from '@ui/features/common/code-editor/yaml-editor';
import { FieldContainer } from '@ui/features/common/form/field-container';
import { ModalComponentProps } from '@ui/features/common/modal/modal-context';
import schema from '@ui/gen/schema/warehouses.kargo.akuity.io_v1alpha1.json';
import {
getWarehouse,
@@ -19,24 +21,25 @@ import { zodValidators } from '@ui/utils/validators';

import { getWarehouseYAMLExample } from '../utils/warehouse-yaml-example';

type Props = ModalComponentProps & {
projectName: string;
warehouseName: string;
type Props = {
projectName?: string;
warehouseName?: string;
};

const formSchema = z.object({
value: zodValidators.requiredString
});

export const EditWarehouseModal = ({ visible, hide, projectName, warehouseName }: Props) => {
export const EditWarehouse = ({ projectName, warehouseName }: Props) => {
const [editing, setEditing] = useState(false);
const { data, isLoading } = useQuery(getWarehouse, {
project: projectName,
name: warehouseName,
format: RawFormat.YAML
});

const { mutateAsync, isPending } = useMutation(updateResource, {
onSuccess: () => hide()
onSuccess: () => setEditing(false)
});

const { control, handleSubmit } = useForm({
@@ -54,43 +57,43 @@ export const EditWarehouseModal = ({ visible, hide, projectName, warehouseName }
});

return (
<Modal
destroyOnClose
open={visible}
title='Edit Warehouse'
closable={false}
width={680}
footer={
<div className='flex items-center justify-between'>
<Typography.Link
href='https://kargo.akuity.io/concepts#what-is-a-warehouse'
target='_blank'
>
Documentation
</Typography.Link>
<Space>
<Button onClick={hide}>Cancel</Button>
<Button type='primary' onClick={onSubmit} loading={isPending}>
Update
</Button>
</Space>
</div>
}
>
<div>
<FieldContainer name='value' control={control}>
{({ field: { value, onChange } }) => (
<YamlEditor
value={value}
onChange={(e) => onChange(e || '')}
height='500px'
schema={schema as JSONSchema4}
placeholder={getWarehouseYAMLExample(projectName)}
placeholder={getWarehouseYAMLExample(projectName || '')}
isLoading={isLoading}
isHideManagedFieldsDisplayed
label='YAML'
disabled={!editing}
toolbar={
<>
{editing && (
<Button
type='primary'
onClick={onSubmit}
loading={isPending}
className='mr-2'
icon={<FontAwesomeIcon icon={faSave} />}
>
Save
</Button>
)}
<Button
type='default'
icon={<FontAwesomeIcon icon={editing ? faCancel : faPencil} size='1x' />}
onClick={() => setEditing(!editing)}
>
{editing ? 'Cancel' : 'Edit'}
</Button>
</>
}
/>
)}
</FieldContainer>
</Modal>
</div>
);
};
21 changes: 3 additions & 18 deletions ui/src/features/project/pipelines/warehouse/warehouse-actions.tsx
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
import { createConnectQueryKey, useMutation } from '@connectrpc/connect-query';
import { faPen, faTrash } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useQueryClient } from '@tanstack/react-query';
import { Button, Space } from 'antd';
import { generatePath, useNavigate, useParams } from 'react-router-dom';

import { paths } from '@ui/config/paths';
import { useConfirmModal } from '@ui/features/common/confirm-modal/use-confirm-modal';
import { useModal } from '@ui/features/common/modal/use-modal';
import {
deleteWarehouse,
listWarehouses
} from '@ui/gen/service/v1alpha1/service-KargoService_connectquery';
import { Warehouse } from '@ui/gen/v1alpha1/generated_pb';

import { EditWarehouseModal } from './edit-warehouse-modal';

export const WarehouseActions = ({ warehouse }: { warehouse: Warehouse }) => {
const { name: projectName, warehouseName } = useParams();
const { name: projectName } = useParams();
const navigate = useNavigate();
const confirm = useConfirmModal();
const queryClient = useQueryClient();
@@ -35,25 +32,13 @@ export const WarehouseActions = ({ warehouse }: { warehouse: Warehouse }) => {
mutate({ name: warehouse.metadata?.name, project: projectName });
onClose();
},
hide: () => {},
title: 'Are you sure you want to delete Warehouse?'
});
};

const { show: showEditWarehouseModal } = useModal((p) =>
warehouseName && projectName ? (
<EditWarehouseModal {...p} warehouseName={warehouseName} projectName={projectName} />
) : null
);

return (
<Space size={16}>
<Button
type='default'
icon={<FontAwesomeIcon icon={faPen} size='1x' />}
onClick={() => showEditWarehouseModal()}
>
Edit
</Button>
<Button
danger
type='text'
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { faArrowDownShortWide, faTools } from '@fortawesome/free-solid-svg-icons';
import { faArrowDownShortWide, faFileLines, faTools } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Drawer, Tabs, Typography } from 'antd';
import { generatePath, useNavigate, useParams } from 'react-router-dom';
@@ -7,6 +7,7 @@ import { paths } from '@ui/config/paths';
import { CreateFreight } from '@ui/features/create-freight/create-freight';
import { Warehouse } from '@ui/gen/v1alpha1/generated_pb';

import { EditWarehouse } from './edit-warehouse';
import { RepoSubscriptions } from './repo-subscriptions';
import { WarehouseActions } from './warehouse-actions';

@@ -73,6 +74,13 @@ export const WarehouseDetails = ({
}}
/>
</Tabs.TabPane>
<Tabs.TabPane
key='live-manifest'
tab='Live Manifest'
icon={<FontAwesomeIcon icon={faFileLines} />}
>
<EditWarehouse projectName={projectName} warehouseName={warehouse.metadata?.name} />
</Tabs.TabPane>
</Tabs>
</div>
)}

0 comments on commit 2fce9b0

Please sign in to comment.