feat(misc): hide unpublished links in project details view (nrwl#21362)

SimeonC · Jan 26, 2024 · b4029e0 · b4029e0
1 parent 4ed74a4
commit b4029e0
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 41 deletions.
diff --git a/graph/ui-project-details/src/lib/target-configuration-details/source-info.tsx b/graph/ui-project-details/src/lib/target-configuration-details/source-info.tsx
@@ -20,6 +20,10 @@ export function SourceInfo(props: {
         content={
           (
             <SourcemapInfoToolTip
+              showLink={
+                /* TODO(v18): remove this link show/hide logic once docs are published */
+                false
+              }
               propertyKey={props.propertyKey}
               plugin={props.data?.[1]}
               file={props.data?.[0]}

diff --git a/graph/ui-tooltips/src/lib/property-info-tooltip.tsx b/graph/ui-tooltips/src/lib/property-info-tooltip.tsx
@@ -1,4 +1,5 @@
 import { ExternalLink } from './external-link';
+import { twMerge } from 'tailwind-merge';
 
 type PropertyInfoTooltipType =
   | 'targets'
@@ -12,7 +13,7 @@ type PropertyInfoTooltipType =
   | 'release';
 
 type PropertyInfoTooltipTypeOptions = {
-  docsUrl: string;
+  docsUrl?: string;
   docsLinkText?: string;
   heading: string;
   description: string;
@@ -64,12 +65,14 @@ const PROPERTY_INFO_TOOLTIP_TYPE_OPTIONS: Record<
       'This is a list of other tasks which must be completed before running this task.',
   },
   options: {
-    docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
+    // TODO(v18): re-enable link once docs are published
+    // docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
     heading: 'Options',
     description: 'Options modify the behaviour of the task.',
   },
   configurations: {
-    docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
+    // TODO(v18): re-enable link once docs are published
+    // docsUrl: 'https://nx.dev/concepts/executors-and-configurations',
     heading: 'Configurations',
     description:
       'Configurations are sets of Options to allow a Target to be used in different scenarios.',
@@ -90,22 +93,31 @@ export function PropertyInfoTooltip({ type }: PropertyInfoTooltipProps) {
       <h4 className="flex justify-between items-center border-b border-slate-200 dark:border-slate-700/60 text-base">
         <span className="font-mono">{propertyInfo.heading}</span>
       </h4>
-      <div className="flex flex-col font-mono border-b border-slate-200 dark:border-slate-700/60 py-2">
+      <div
+        className={twMerge(
+          `flex flex-col font-mono py-2`,
+          propertyInfo.docsUrl
+            ? 'border-b border-slate-200 dark:border-slate-700/60'
+            : ''
+        )}
+      >
         <p className="flex grow items-center gap-2 whitespace-pre-wrap">
           {propertyInfo.description}
         </p>
       </div>
-      <div className="flex py-2">
-        <p className="pr-4 flex items-center">
-          <ExternalLink
-            text={
-              propertyInfo.docsLinkText ??
-              `Learn more about ${propertyInfo.heading}`
-            }
-            href={propertyInfo.docsUrl}
-          />
-        </p>
-      </div>
+      {propertyInfo.docsUrl ? (
+        <div className="flex py-2">
+          <p className="pr-4 flex items-center">
+            <ExternalLink
+              text={
+                propertyInfo.docsLinkText ??
+                `Learn more about ${propertyInfo.heading}`
+              }
+              href={propertyInfo.docsUrl}
+            />
+          </p>
+        </div>
+      ) : null}
     </div>
   );
 }
diff --git a/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx b/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx
@@ -1,18 +1,20 @@
 import { type ReactNode } from 'react';
 import { ExternalLink } from './external-link';
+import { twMerge } from 'tailwind-merge';
 
 export interface SourcemapInfoToolTipProps {
   propertyKey: string;
   plugin: string;
   file: string;
   children?: ReactNode | ReactNode[];
+  showLink?: boolean;
 }
 
 export function SourcemapInfoToolTip({
   propertyKey,
   plugin,
   file,
-  children,
+  showLink,
 }: SourcemapInfoToolTipProps) {
   // Target property key is in the form `target.${targetName}`
   // Every other property within in the target has the form `target.${targetName}.${propertyName}
@@ -22,34 +24,47 @@ export function SourcemapInfoToolTip({
     ? plugin.replace('@nx/', '').split('/')[0]
     : undefined;
 
+  const tooltipContent = (
+    <>
+      <p className="flex grow items-center gap-2">
+        <span className="font-bold">{isTarget ? 'Created' : 'Set'} by:</span>
+        <span className="inline-flex grow justify-between items-center">
+          {docsUrlSlug ? (
+            <ExternalLink
+              text={plugin}
+              href={`https://nx.dev/nx-api/${docsUrlSlug}`}
+            />
+          ) : (
+            `${plugin}`
+          )}
+        </span>
+      </p>
+      <p>
+        <span className="font-bold">From:</span> {file}
+      </p>
+    </>
+  );
+
   return (
     <div className="text-sm text-slate-700 dark:text-slate-400 max-w-md sm:max-w-full">
-      <div className="flex flex-col font-mono border-b border-slate-200 dark:border-slate-700/60 py-2">
-        <p className="flex grow items-center gap-2">
-          <span className="font-bold">{isTarget ? 'Created' : 'Set'} by:</span>
-          <span className="inline-flex grow justify-between items-center">
-            {docsUrlSlug ? (
-              <ExternalLink
-                text={plugin}
-                href={`https://nx.dev/nx-api/${docsUrlSlug}`}
-              />
-            ) : (
-              `${plugin}`
-            )}
-          </span>
-        </p>
-        <p>
-          <span className="font-bold">From:</span> {file}
-        </p>
-      </div>
-      <div className="flex py-2">
-        <p className={`flex flex-col gap-1`}>
-          <ExternalLink
-            text="Learn more about how projects are configured"
-            href="https://nx.dev/concepts/inferred-tasks"
-          />
-        </p>
+      <div
+        className={twMerge(
+          `flex flex-col font-mono py-2`,
+          showLink ? 'border-b border-slate-200 dark:border-slate-700/60' : ''
+        )}
+      >
+        {tooltipContent}
       </div>
+      {showLink && (
+        <div className="flex py-2">
+          <p className={`flex flex-col gap-1`}>
+            <ExternalLink
+              text="Learn more about how projects are configured"
+              href="https://nx.dev/concepts/inferred-tasks"
+            />
+          </p>
+        </div>
+      )}
     </div>
   );
 }