Diff improvements (#49)

noodle-graph · Mar 19, 2023 · f9c3c46 · f9c3c46
1 parent c7baf78
commit f9c3c46
Show file tree

Hide file tree

Showing 7 changed files with 221 additions and 107 deletions.
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
@@ -7,8 +7,8 @@ import './App.css';
 import { Button } from './Button';
 import { Details } from './Details';
 import { Filter } from './Filter';
+import { NewResourceModal } from './NewResourceModal';
 import { Pill } from './Pill';
-import { ResourceEditModal } from './ResourceEditModal';
 import { Select } from './Select';
 import { Toggle } from './Toggle';
 import { VisNetwork } from './VisNetwork';
@@ -64,21 +64,35 @@ export function App() {
     }
 
     function handleNewResource(resource: Resource): void {
-        scanOutputStore.addResource(resource);
+        const extendedResource = scanOutputStore.addResource(resource);
+        VisNetwork.addResource(extendedResource);
         syncWithStore();
         closeResourceEditModal();
     }
 
     function handleRemoveResource(resourceId: string): void {
-        scanOutputStore.removeResource(resourceId);
+        const resource = scanOutputStore.removeResource(resourceId);
+        if (resource) {
+            VisNetwork.updateResource(resource);
+            for (const relationship of resource.relationships ?? []) {
+                if ((relationship.diff ?? resource.diff) === '+') {
+                    resource.relationships = resource.relationships?.filter((r) => r.resourceId !== relationship.resourceId);
+                    VisNetwork.removeRelationship(resourceId, relationship.resourceId);
+                } else {
+                    VisNetwork.updateRelationship(resource, relationship);
+                }
+            }
+        } else VisNetwork.removeResource(resourceId);
         syncWithStore();
     }
 
     function handleAddRelationship(resourceId: string, relationshipResourceId: string): void {
         const resource = scanOutputStore.scanOutput.resources.find((r) => r.id === resourceId);
         if (!resource) throw new Error('Invalid resource');
+        const relationship = produceNewRelationship({ resourceId: relationshipResourceId });
         resource.relationships ??= [];
-        resource.relationships.push(produceNewRelationship({ resourceId: relationshipResourceId }));
+        resource.relationships.push(relationship);
+        VisNetwork.addRelationship(resource, relationship);
         syncWithStore();
     }
 
@@ -90,8 +104,10 @@ export function App() {
         if (!relationship) throw new Error('Invalid relationship');
         if ((relationship.diff ?? resource.diff) === '+') {
             resource.relationships = resource.relationships?.filter((r) => r.resourceId !== relationshipResourceId);
+            VisNetwork.removeRelationship(resourceId, relationshipResourceId);
         } else {
             relationship.diff = '-';
+            VisNetwork.updateRelationship(resource, relationship);
         }
         syncWithStore();
     }
@@ -141,7 +157,7 @@ export function App() {
                     />
                 )}
             </div>
-            <ResourceEditModal isOpen={isResourceEditOpen} close={closeResourceEditModal} save={handleNewResource} />
+            <NewResourceModal isOpen={isResourceEditOpen} close={closeResourceEditModal} save={handleNewResource} />
         </div>
     );
 }
diff --git a/packages/ui/src/Details.tsx b/packages/ui/src/Details.tsx
@@ -1,4 +1,4 @@
-import { TrashIcon } from '@heroicons/react/20/solid';
+import { MinusIcon, TrashIcon } from '@heroicons/react/20/solid';
 import type { ReactElement } from 'react';
 import React from 'react';
 
@@ -77,9 +77,13 @@ export function Details(props: DetailProps) {
                     )}
                     {relationship.url && <div className="mt-1">{relationshipLink(relationship.url)}</div>}
                 </div>
-                <div className="group-hover:opacity-100 opacity-0 transition-opacity">
-                    <Button icon={TrashIcon} onClick={() => props.removeRelationship(props.resource.id, relationship.resourceId)} danger={true} background={false} />
-                </div>
+
+                {(props.resource.diff === '-' || relationship.diff === '-') && <MinusIcon width={25} className="text-danger rounded" />}
+                {props.resource.diff !== '-' && relationship.diff !== '-' && (
+                    <div className="group-hover:opacity-100 opacity-0 transition-opacity">
+                        <Button icon={TrashIcon} onClick={() => props.removeRelationship(props.resource.id, relationship.resourceId)} danger={true} background={false} />
+                    </div>
+                )}
             </div>
         );
     }
@@ -89,9 +93,10 @@ export function Details(props: DetailProps) {
             <div className="flex flex-col gap-5">
                 <div className="flex items-center gap-3">
                     {props.resource.type && <img src={getTypeImagePath(props.resource.type)} className="max-h-7" />}
-                    <div className="text-xl font-bold">{props.resource.name}</div>
+                    <div className="text-xl font-bold">{props.resource.name ?? props.resource.id}</div>
                     <div className="h-0.5 bg-secondary flex-1"></div>
-                    <Button icon={TrashIcon} onClick={() => props.removeResource(props.resource.id)} danger={true} background={false} />
+                    {props.resource.diff === '-' && <MinusIcon width={25} className="text-danger rounded" />}
+                    {props.resource.diff !== '-' && <Button icon={TrashIcon} onClick={() => props.removeResource(props.resource.id)} danger={true} background={false} />}
                 </div>
                 {props.resource.description && <div className="text-secondary text-sm font-bold">{props.resource.description}</div>}
                 {detail('ID', props.resource.id)}
@@ -101,15 +106,15 @@ export function Details(props: DetailProps) {
                     'Relationships',
                     props.resource.relationships && (
                         <div className="flex flex-col gap-2">
-                            {props.resource.relationships
-                                ?.filter((r) => r.diff !== '-')
-                                .map((r, i) => (
-                                    <div key={`details-relationship-${i}`}>{relationship(r)}</div>
-                                ))}
+                            {props.resource.relationships.map((r, i) => (
+                                <div key={`details-relationship-${i}`}>{relationship(r)}</div>
+                            ))}
                         </div>
                     )
                 )}
-                <Select title="Add relationship" options={resourceIdOptions} onChange={(resourceId) => props.addRelationship(props.resource.id, resourceId)} />
+                {props.resource.diff !== '-' && (
+                    <Select title="Add relationship" options={resourceIdOptions} onChange={(resourceId) => props.addRelationship(props.resource.id, resourceId)} />
+                )}
                 {detail(
                     'Tags',
                     !!props.resource.tags?.length && (

diff --git a/packages/ui/src/ResourceEditModal.tsx → packages/ui/src/NewResourceModal.tsx b/packages/ui/src/ResourceEditModal.tsx → packages/ui/src/NewResourceModal.tsx
@@ -9,8 +9,7 @@ import { scanOutputStore } from './scanOutputStore';
 import type { FilterOption, ResourceExtended } from './types';
 import { produceNewRelationship } from './utils';
 
-interface ResourceEditModalProps {
-    resource?: ResourceExtended;
+interface NewResourceModalProps {
     isOpen: boolean;
     close: () => void;
     save: (resource: ResourceExtended) => void;
@@ -21,8 +20,8 @@ function isValidResource(resource: Partial<ResourceExtended>): resource is Resou
     return !!(resource.id && /[a-z0-9-]+/.test(resource.id));
 }
 
-export function ResourceEditModal(props: ResourceEditModalProps) {
-    const [resource, setResource] = useState<Partial<ResourceExtended>>({ ...(props.resource ?? {}) });
+export function NewResourceModal(props: NewResourceModalProps) {
+    const [resource, setResource] = useState<Partial<ResourceExtended>>({});
 
     const resourceIdOptions: FilterOption<string>[] = scanOutputStore.scanOutput.resources.map((r) => ({
         key: r.id,
@@ -32,8 +31,8 @@ export function ResourceEditModal(props: ResourceEditModalProps) {
     }));
 
     useEffect(() => {
-        setResource({ ...(props.resource ?? {}) });
-    }, [props.resource]);
+        setResource({});
+    }, [props.isOpen]);
 
     function handleSave() {
         if (isValidResource(resource)) props.save(resource);
@@ -59,7 +58,7 @@ export function ResourceEditModal(props: ResourceEditModalProps) {
     }
 
     return (
-        <Modal isOpen={props.isOpen} close={handleClose} title={props.resource?.name ?? props.resource?.id ?? 'New resource'}>
+        <Modal isOpen={props.isOpen} close={handleClose} title={'New resource'}>
             <div className="flex gap-6 flex-col">
                 <div className="flex gap-2 flex-wrap">
                     <Input label="ID" id="edit-resource-id" value={resource.id} onChange={(value) => setResource({ ...resource, id: value })} />
@@ -77,7 +76,7 @@ export function ResourceEditModal(props: ResourceEditModalProps) {
                     <Filter title="Add relationship" options={resourceIdOptions} onChange={handleRelationshipsChanged} />
                 </div>
                 <div>
-                    <Button label={props.resource ? 'Save' : 'Add'} onClick={handleSave} />
+                    <Button label={'Add'} onClick={handleSave} />
                 </div>
             </div>
         </Modal>