Merge branch 'develop' into feature/1072-nodedetails-sidepanel

.github/workflows/hacktoberfest-comment.yml

@@ -0,0 +1,20 @@
+on:
+  pull_request:
+    types: [closed]
+
+jobs:
+  comment:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Comment on PR
+        if: ${{ github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'hacktoberfest-accepted') }}
+        uses: peter-evans/create-or-update-comment@v1
+        with:
+          token: ${{ secrets.GH_ACTIONS }}
+          issue-number: ${{ github.event.pull_request.number }}
+          body: |
+            A heartfelt thank you, @${{ github.event.pull_request.user.login }}, for your enthusiastic involvement in Hacktoberfest! To express our gratitude, we've crafted a special virtual badge just for you. Don't hesitate to showcase it on your social media profiles and share the love by mentioning Komiser in your posts. Your contribution means the world to us!
+            ![Image](docs/images/hacktoberfest-badge.svg)

dashboard/components/explorer/DependencyGraph.tsx

@@ -173,32 +173,6 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
 
   return (
     <div className="relative h-full flex-1 bg-dependency-graph bg-[length:40px_40px]">
-      <CytoscapeComponent
-        className="h-full w-full"
-        elements={CytoscapeComponent.normalizeElements({
-          nodes: data.nodes,
-          edges: data.edges
-        })}
-        // forEach={(data.nodes, node => {console.log(node)})}
-        maxZoom={maxZoom}
-        minZoom={minZoom}
-        layout={graphLayoutConfig}
-        stylesheet={[
-          {
-            selector: 'node',
-            style: nodeStyeConfig
-          },
-          {
-            selector: 'edge',
-            style: edgeStyleConfig
-          },
-          {
-            selector: '.leaf',
-            style: leafStyleConfig
-          }
-        ]}
-        cy={(cy: Cytoscape.Core) => cyActionHandlers(cy)}
-      />
       {dataIsEmpty ? (
         <>
           <div className="translate-y-[201px]">
@@ -244,7 +218,8 @@ const DependencyGraph = ({ data }: DependencyGraphProps) => {
           <div className="relative">
             <WarningIcon className="peer" height="16" width="16" />
             <Tooltip bottom="xs" align="left" width="lg">
-              Only AWS resources are currently supported on the explorer.
+              Only AWS and Civo resources are currently supported on the
+              explorer.
             </Tooltip>
           </div>
         )}

dashboard/components/explorer/config.ts

@@ -64,10 +64,16 @@ export const nodeStyeConfig = {
   'text-opacity': 1,
   'font-size': 17,
   'background-color': 'white',
-  'background-image': node =>
-    node.data('provider') === 'AWS'
-      ? '/assets/img/dependency-graph/aws-node.svg'
-      : '',
+  'background-image': node => {
+    switch (node.data('provider')) {
+      case 'AWS':
+        return '/assets/img/dependency-graph/aws-node.svg';
+      case 'Civo':
+        return '/assets/img/dependency-graph/civo-node.svg';
+      default:
+        return '';
+    }
+  },
   'background-height': 20,
   'background-width': 20,
   'border-color': '#EDEBEE',