From f9c3c469c6e31081be47ebf8c2a82d1fc15d9c39 Mon Sep 17 00:00:00 2001
From: Dor Meiri <37194716+dormeiri@users.noreply.github.com>
Date: Mon, 20 Mar 2023 00:35:08 +0200
Subject: [PATCH] Diff improvements (#49)
---
packages/ui/src/App.tsx | 26 +-
packages/ui/src/Details.tsx | 29 ++-
...urceEditModal.tsx => NewResourceModal.tsx} | 15 +-
packages/ui/src/VisNetwork.tsx | 241 ++++++++++++------
packages/ui/src/scanOutputStore.ts | 14 +-
packages/ui/src/types.ts | 2 +-
packages/ui/tailwind.config.js | 1 +
7 files changed, 221 insertions(+), 107 deletions(-)
rename packages/ui/src/{ResourceEditModal.tsx => NewResourceModal.tsx} (88%)
diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index e1840ee..31d1484 100644
--- 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() {
/>
)}
-
+
);
}
diff --git a/packages/ui/src/Details.tsx b/packages/ui/src/Details.tsx
index b9f276b..7a03784 100644
--- 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 &&
{relationshipLink(relationship.url)}
}
-
-
+
+ {(props.resource.diff === '-' || relationship.diff === '-') && }
+ {props.resource.diff !== '-' && relationship.diff !== '-' && (
+
+
+ )}
);
}
@@ -89,9 +93,10 @@ export function Details(props: DetailProps) {
{props.resource.type &&
}
-
{props.resource.name}
+
{props.resource.name ?? props.resource.id}
-
{props.resource.description &&
{props.resource.description}
}
{detail('ID', props.resource.id)}
@@ -101,15 +106,15 @@ export function Details(props: DetailProps) {
'Relationships',
props.resource.relationships && (
- {props.resource.relationships
- ?.filter((r) => r.diff !== '-')
- .map((r, i) => (
-
{relationship(r)}
- ))}
+ {props.resource.relationships.map((r, i) => (
+
{relationship(r)}
+ ))}
)
)}
-