@@ -21,7 +23,8 @@ export function ProjectEdgeNodeTooltip({
{source} → {target}
- {type !== 'implicit' ? (
+ {description ?
: null}
+ {type !== 'implicit' && fileDependencies?.length > 0 ? (
Files
@@ -43,5 +46,3 @@ export function ProjectEdgeNodeTooltip({
);
}
-
-export default ProjectEdgeNodeTooltip;
diff --git a/graph/client/src/app/ui-tooltips/project-node-tooltip.stories.tsx b/graph/ui-tooltips/src/lib/project-node-tooltip.stories.tsx
similarity index 100%
rename from graph/client/src/app/ui-tooltips/project-node-tooltip.stories.tsx
rename to graph/ui-tooltips/src/lib/project-node-tooltip.stories.tsx
diff --git a/graph/ui-tooltips/src/lib/project-node-tooltip.tsx b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
new file mode 100644
index 00000000000000..2570dd63326cba
--- /dev/null
+++ b/graph/ui-tooltips/src/lib/project-node-tooltip.tsx
@@ -0,0 +1,37 @@
+import { Tag } from '@nrwl/graph/ui-components';
+import { ReactNode } from 'react';
+
+export interface ProjectNodeToolTipProps {
+ type: 'app' | 'lib' | 'e2e';
+ id: string;
+ tags: string[];
+ description?: string;
+
+ children?: ReactNode | ReactNode[];
+}
+
+export function ProjectNodeToolTip({
+ type,
+ id,
+ tags,
+ children,
+ description,
+}: ProjectNodeToolTipProps) {
+ return (
+
+
+ {type}
+ {id}
+
+ {tags.length > 0 ? (
+
+ tags
+
+ {tags.join(', ')}
+
+ ) : null}
+ {description ?
{description}
: null}
+ {children}
+
+ );
+}
diff --git a/graph/client/src/app/ui-tooltips/task-node-tooltip.stories.tsx b/graph/ui-tooltips/src/lib/task-node-tooltip.stories.tsx
similarity index 100%
rename from graph/client/src/app/ui-tooltips/task-node-tooltip.stories.tsx
rename to graph/ui-tooltips/src/lib/task-node-tooltip.stories.tsx
diff --git a/graph/ui-tooltips/src/lib/task-node-tooltip.tsx b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
new file mode 100644
index 00000000000000..0e5bf829064d22
--- /dev/null
+++ b/graph/ui-tooltips/src/lib/task-node-tooltip.tsx
@@ -0,0 +1,23 @@
+import { Tag } from '@nrwl/graph/ui-components';
+
+export interface TaskNodeTooltipProps {
+ id: string;
+ executor: string;
+ description?: string;
+}
+
+export function TaskNodeTooltip({
+ id,
+ executor,
+ description,
+}: TaskNodeTooltipProps) {
+ return (
+
+
+ {executor}
+ {id}
+
+ {description ?
{description}
: null}
+
+ );
+}
diff --git a/graph/client/src/app/ui-tooltips/tooltip-button.tsx b/graph/ui-tooltips/src/lib/tooltip-button.tsx
similarity index 100%
rename from graph/client/src/app/ui-tooltips/tooltip-button.tsx
rename to graph/ui-tooltips/src/lib/tooltip-button.tsx
diff --git a/graph/client/src/app/ui-tooltips/tooltip.tsx b/graph/ui-tooltips/src/lib/tooltip.tsx
similarity index 93%
rename from graph/client/src/app/ui-tooltips/tooltip.tsx
rename to graph/ui-tooltips/src/lib/tooltip.tsx
index 312a465f71a864..e141d13bb693d8 100644
--- a/graph/client/src/app/ui-tooltips/tooltip.tsx
+++ b/graph/ui-tooltips/src/lib/tooltip.tsx
@@ -55,12 +55,13 @@ export function Tooltip({
],
});
- const staticSide = {
- top: 'bottom',
- right: 'left',
- bottom: 'top',
- left: 'right',
- }[finalPlacement.split('-')[0]];
+ const staticSide: string =
+ {
+ top: 'bottom',
+ right: 'left',
+ bottom: 'top',
+ left: 'right',
+ }[finalPlacement.split('-')[0]] || 'bottom';
useLayoutEffect(() => {
if (!!externalReference) {
diff --git a/graph/ui-tooltips/tailwind.config.js b/graph/ui-tooltips/tailwind.config.js
new file mode 100644
index 00000000000000..4adab6ebdac9cd
--- /dev/null
+++ b/graph/ui-tooltips/tailwind.config.js
@@ -0,0 +1,38 @@
+const path = require('path');
+const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
+
+module.exports = {
+ content: [
+ path.join(__dirname, 'src/**/*.{js,ts,jsx,tsx,html}'),
+ ...createGlobPatternsForDependencies(__dirname),
+ ],
+ darkMode: 'class', // or 'media' or 'class'
+ theme: {
+ extend: {
+ typography: {
+ DEFAULT: {
+ css: {
+ 'code::before': {
+ content: '',
+ },
+ 'code::after': {
+ content: '',
+ },
+ 'blockquote p:first-of-type::before': {
+ content: '',
+ },
+ 'blockquote p:last-of-type::after': {
+ content: '',
+ },
+ },
+ },
+ },
+ },
+ },
+ variants: {
+ extend: {
+ translate: ['group-hover'],
+ },
+ },
+ plugins: [require('@tailwindcss/typography')],
+};
diff --git a/graph/ui-tooltips/tsconfig.json b/graph/ui-tooltips/tsconfig.json
new file mode 100644
index 00000000000000..c9c11726914cbd
--- /dev/null
+++ b/graph/ui-tooltips/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "allowJs": false,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.lib.json"
+ },
+ {
+ "path": "./tsconfig.spec.json"
+ },
+ {
+ "path": "./.storybook/tsconfig.json"
+ }
+ ],
+ "extends": "../../tsconfig.base.json"
+}
diff --git a/graph/ui-tooltips/tsconfig.lib.json b/graph/ui-tooltips/tsconfig.lib.json
new file mode 100644
index 00000000000000..f73f9413ef49a2
--- /dev/null
+++ b/graph/ui-tooltips/tsconfig.lib.json
@@ -0,0 +1,27 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "types": ["node"]
+ },
+ "files": [
+ "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+ "../../node_modules/@nrwl/react/typings/image.d.ts"
+ ],
+ "exclude": [
+ "jest.config.ts",
+ "src/**/*.spec.ts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.js",
+ "src/**/*.test.js",
+ "src/**/*.spec.jsx",
+ "src/**/*.test.jsx",
+ "**/*.stories.ts",
+ "**/*.stories.js",
+ "**/*.stories.jsx",
+ "**/*.stories.tsx"
+ ],
+ "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/graph/ui-tooltips/tsconfig.spec.json b/graph/ui-tooltips/tsconfig.spec.json
new file mode 100644
index 00000000000000..26ef046ac5e544
--- /dev/null
+++ b/graph/ui-tooltips/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../dist/out-tsc",
+ "module": "commonjs",
+ "types": ["jest", "node"]
+ },
+ "include": [
+ "jest.config.ts",
+ "src/**/*.test.ts",
+ "src/**/*.spec.ts",
+ "src/**/*.test.tsx",
+ "src/**/*.spec.tsx",
+ "src/**/*.test.js",
+ "src/**/*.spec.js",
+ "src/**/*.test.jsx",
+ "src/**/*.spec.jsx",
+ "src/**/*.d.ts"
+ ]
+}
diff --git a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
index 0682e9404080af..4f6ab852d7ca86 100644
--- a/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
+++ b/nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
@@ -100,6 +100,7 @@ export function Graph({
workspaceLayout={parsedProps.workspaceLayout}
dependencies={parsedProps.dependencies}
affectedProjectIds={parsedProps.affectedProjectIds}
+ enableTooltips={parsedProps.enableTooltips}
/>
) : (
)}
diff --git a/package.json b/package.json
index 05e711dcd41cb5..678b9d372874f2 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
"@angular/router": "~15.0.1",
"@babel/core": "^7.15.0",
"@babel/helper-create-regexp-features-plugin": "^7.14.5",
+ "@babel/preset-react": "^7.14.5",
"@babel/preset-typescript": "^7.15.0",
"@cypress/react": "^6.0.0",
"@cypress/webpack-preprocessor": "^5.12.0",
@@ -145,7 +146,7 @@
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "2.26.0",
- "eslint-plugin-jsx-a11y": "6.5.1",
+ "eslint-plugin-jsx-a11y": "6.6.1",
"eslint-plugin-react": "7.31.11",
"eslint-plugin-react-hooks": "4.6.0",
"express": "^4.18.1",
diff --git a/packages/nx/src/config/project-graph.ts b/packages/nx/src/config/project-graph.ts
index c25bf950b44102..4f280d1d572045 100644
--- a/packages/nx/src/config/project-graph.ts
+++ b/packages/nx/src/config/project-graph.ts
@@ -102,6 +102,8 @@ export interface ProjectGraphProjectNode