feat(graph): build ui for displaying task inputs with placeholder content

graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx

@@ -7,6 +7,7 @@ import {
   Tooltip,
 } from '@nx/graph/ui-tooltips';
 import { ProjectNodeActions } from './project-node-actions';
+import { TaskNodeActions } from './task-node-actions';
 
 const tooltipService = getTooltipService();
 
@@ -29,7 +30,11 @@ export function TooltipDisplay() {
         tooltipToRender = <ProjectEdgeNodeTooltip {...currentTooltip.props} />;
         break;
       case 'taskNode':
-        tooltipToRender = <TaskNodeTooltip {...currentTooltip.props} />;
+        tooltipToRender = (
+          <TaskNodeTooltip {...currentTooltip.props}>
+            <TaskNodeActions {...currentTooltip.props} />
+          </TaskNodeTooltip>
+        );
         break;
     }
   }

graph/client/src/app/ui-tooltips/task-node-actions.tsx

@@ -0,0 +1,76 @@
+import { TaskNodeTooltipProps } from '@nx/graph/ui-tooltips';
+import { useState } from 'react';
+
+export function TaskNodeActions(props: TaskNodeTooltipProps) {
+  const files = [
+    'apps/nx-docs/src/app/app.module.ts',
+    'apps/nx-docs/src/app/app.component.ts',
+    'apps/nx-docs/src/app/app.component.html',
+    'apps/nx-docs/src/app/app.component.spec.ts',
+    'apps/nx-docs/src/app/app.component.css',
+    'apps/nx-docs/src/app/app-routing.module.ts',
+    'apps/nx-docs/src/app/home/home.module.ts',
+    'apps/nx-docs/src/app/home/home.component.ts',
+    'apps/nx-docs/src/app/home/home.component.html',
+    'apps/nx-docs/src/app/home/home.component.spec.ts',
+    'apps/nx-docs/src/app/home/home.component.css',
+    'apps/nx-docs/src/app/home/home-routing.module.ts',
+    'apps/nx-docs/src/app/shared/shared.module.ts',
+    'apps/nx-docs/src/app/shared/header/header.component.ts',
+    'apps/nx-docs/src/app/shared/header/header.component.html',
+    'apps/nx-docs/src/app/shared/header/header.component.spec.ts',
+    'apps/nx-docs/src/app/shared/header/header.component.css',
+    'apps/nx-docs/src/app/shared/footer/footer.component.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.component.html',
+    'apps/nx-docs/src/app/shared/footer/footer.component.spec.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.component.css',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer.module.ts',
+    'apps/nx-docs/src/app/shared/footer/footer-routing.module.ts',
+  ];
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div
+      className="overflow-hidden rounded-md border border-slate-200 dark:border-slate-800 w-full"
+      onClick={() => setIsOpen(!isOpen)}
+    >
+      <div className="flex justify-between items-center w-full bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400">
+        <span>Inputs</span>
+        <span
+          className={`transform transition-transform duration-300 ${
+            isOpen ? 'rotate-180' : ''
+          }`}
+        >
+          ▲
+        </span>
+      </div>
+      <ul
+        className={`max-h-[300px] divide-y divide-slate-200 overflow-auto dark:divide-slate-800 ${
+          !isOpen && 'invisible relative h-0 overflow-hidden p-0 m-0'
+        }`}
+      >
+        {files.map((fileDep) => (
+          <li
+            key={fileDep}
+            className="whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
+          >
+            <span className="block truncate font-normal">{fileDep}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

graph/client/tailwind.config.js

@@ -36,5 +36,10 @@ module.exports = {
       translate: ['group-hover'],
     },
   },
-  plugins: [require('@tailwindcss/typography')],
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms')({
+      strategy: 'class',
+    }),
+  ],
 };

graph/ui-components/src/lib/dropdown.tsx

@@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
   const { className, children, ...rest } = props;
   return (
     <select
-      className={`flex items-center rounded-md rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
+      className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
       {...rest}
     >
       {children}

graph/ui-tooltips/src/lib/task-node-tooltip.tsx

@@ -1,23 +1,28 @@
 import { Tag } from '@nx/graph/ui-components';
+import { ReactNode } from 'react';
 
 export interface TaskNodeTooltipProps {
   id: string;
   executor: string;
   description?: string;
+
+  children?: ReactNode | ReactNode[];
 }
 
 export function TaskNodeTooltip({
   id,
   executor,
   description,
+  children,
 }: TaskNodeTooltipProps) {
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400">
-      <h4>
+      <h4 className="mb-3">
         <Tag className="mr-3">{executor}</Tag>
         <span className="font-mono">{id}</span>
       </h4>
       {description ? <p className="mt-4">{description}</p> : null}
+      {children}
     </div>
   );
 }

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -5823,7 +5823,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.14:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
@@ -6911,42 +6910,6 @@ packages:
       - typescript
     dev: true
 
-  /@nrwl/js@15.8.0(@swc-node/register@1.5.4)(@swc/core@1.3.51)(nx@15.8.0)(prettier@2.7.1)(typescript@5.1.3):
-    resolution: {integrity: sha512-l2Q7oFpzx6ul7G0nKpMkrvnIEaOY+X8fc2g2Db5WqpnnBdfkrtWXZPg/O4DQ1p9O6BXrZ+Q2AK9bfgnliiwyEg==}
-    dependencies:
-      '@babel/core': 7.22.5
-      '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.5)
-      '@babel/plugin-proposal-decorators': 7.21.0(@babel/core@7.22.5)
-      '@babel/plugin-transform-runtime': 7.22.5(@babel/core@7.22.5)
-      '@babel/preset-env': 7.22.5(@babel/core@7.22.5)
-      '@babel/preset-typescript': 7.21.4(@babel/core@7.22.5)
-      '@babel/runtime': 7.22.5
-      '@nrwl/devkit': 15.8.0(nx@15.8.0)(typescript@5.1.3)
-      '@nrwl/workspace': 15.8.0(@swc-node/register@1.5.4)(@swc/core@1.3.51)(eslint@8.15.0)(prettier@2.7.1)(typescript@5.1.3)
-      '@phenomnomnominal/tsquery': 4.1.1(typescript@5.1.3)
-      babel-plugin-const-enum: 1.2.0(@babel/core@7.22.5)
-      babel-plugin-macros: 2.8.0
-      babel-plugin-transform-typescript-metadata: 0.3.2(@babel/core@7.22.5)
-      chalk: 4.1.2
-      fast-glob: 3.2.7
-      fs-extra: 11.1.1
-      ignore: 5.2.0
-      js-tokens: 4.0.0
-      minimatch: 3.0.5
-      source-map-support: 0.5.19
-      tree-kill: 1.2.2
-      tslib: 2.5.3
-    transitivePeerDependencies:
-      - '@babel/traverse'
-      - '@swc-node/register'
-      - '@swc/core'
-      - debug
-      - nx
-      - prettier
-      - supports-color
-      - typescript
-    dev: true
-
   /@nrwl/js@16.6.0-beta.2(@swc-node/register@1.5.4)(@swc/core@1.3.51)(@types/node@18.16.9)(nx@16.6.0-beta.2)(typescript@5.1.3)(verdaccio@5.15.4):
     resolution: {integrity: sha512-NdXMqmd5MDcw3/EzNbcKTTiVAXVZMIGCtFsEsO+0DwHWnHLlqYtqDIGVHnsamnUKLZS2WuMSijrqnoxvvln4FQ==}
     dependencies:
@@ -6973,7 +6936,7 @@ packages:
         optional: true
     dependencies:
       '@nrwl/devkit': 15.8.0(nx@15.8.0)(typescript@5.1.3)
-      '@nrwl/js': 15.8.0(@swc-node/register@1.5.4)(@swc/core@1.3.51)(nx@15.8.0)(prettier@2.7.1)(typescript@5.1.3)
+      '@nrwl/js': 15.8.0(@swc-node/register@1.5.4)(@swc/core@1.3.51)(eslint@8.15.0)(nx@16.6.0-beta.2)(prettier@2.7.1)(typescript@5.1.3)
       '@phenomnomnominal/tsquery': 4.1.1(typescript@5.1.3)
       eslint: 8.15.0
       tmp: 0.2.1
@@ -12919,7 +12882,6 @@ packages:
 
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
-    dev: true
 
   /buffer-indexof-polyfill@1.0.2:
     resolution: {integrity: sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==}
@@ -13500,7 +13462,6 @@ packages:
 
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
-    dev: true
 
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
@@ -24314,7 +24275,6 @@ packages:
       chokidar: 3.5.3
       immutable: 4.1.0
       source-map-js: 1.0.2
-    dev: true
 
   /sax@1.2.4:
     resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==}
@@ -24911,7 +24871,6 @@ packages:
     dependencies:
       buffer-from: 1.1.2
       source-map: 0.6.1
-    dev: true
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -25796,7 +25755,6 @@ packages:
       acorn: 8.8.2
       commander: 2.20.3
       source-map-support: 0.5.21
-    dev: true
 
   /terser@5.18.0:
     resolution: {integrity: sha512-pdL757Ig5a0I+owA42l6tIuEycRuM7FPY4n62h44mRLRfnOxJkkOHd6i89dOpwZlpF6JXBwaAHF6yWzFrt+QyA==}
@@ -26897,7 +26855,7 @@ packages:
       mlly: 1.2.0
       pathe: 1.1.0
       picocolors: 1.0.0
-      vite: 4.3.9(@types/node@18.16.9)(less@4.1.3)(sass@1.55.0)(stylus@0.59.0)
+      vite: 4.3.9(@types/node@18.16.9)(less@4.1.3)(sass@1.63.2)(stylus@0.59.0)(terser@5.17.7)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -26943,42 +26901,6 @@ packages:
     optionalDependencies:
       fsevents: 2.3.2
 
-  /vite@4.3.9(@types/node@18.16.9)(less@4.1.3)(sass@1.55.0)(stylus@0.59.0):
-    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 18.16.9
-      esbuild: 0.17.19
-      less: 4.1.3
-      postcss: 8.4.24
-      rollup: 3.21.0
-      sass: 1.55.0
-      stylus: 0.59.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: false
-
   /vite@4.3.9(@types/node@18.16.9)(less@4.1.3)(sass@1.63.2)(stylus@0.59.0)(terser@5.17.7):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -27014,7 +26936,6 @@ packages:
       terser: 5.17.7
     optionalDependencies:
       fsevents: 2.3.2
-    dev: true
 
   /vitest@0.32.0(less@4.1.3)(sass@1.55.0)(stylus@0.59.0):
     resolution: {integrity: sha512-SW83o629gCqnV3BqBnTxhB10DAwzwEx3z+rqYZESehUB+eWsJxwcBQx7CKy0otuGMJTYh7qCVuUX23HkftGl/Q==}