Feature/markdown (#5)

* update packages * add mardown in help + fix info icon * update change log * rename 1/2 * rename 2/2
c4rth · Apr 17, 2022 · 38732d2 · 38732d2
1 parent 0d74b79
commit 38732d2
Show file tree

Hide file tree

Showing 9 changed files with 2,049 additions and 346 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,8 +2,10 @@
 All notable changes to the "ado-task-viewer" extension will be documented in this file.
 
 ## Version 0.2.4
-- Update packages + group
-- 
+- Update packages
+- HelpMarkDown : support URL
+- Fix : info icon always visible
+
 ## Version 0.2.3
 - Update packages
 

diff --git a/app/components/App.tsx b/app/components/App.tsx
@@ -1,7 +1,7 @@
 import { IconButton, IIconProps, Label, Stack, ITextFieldStyles, ThemeProvider } from "@fluentui/react";
 import React from "react";
 import { Convert } from "../../src/models/AzureDevOpsTask";
-import { ReloadMessage } from '../../src/views/messages/messageTypes';
+import { ReloadMessage } from '../../src/views/messages/MessageTypes';
 import './App.css';
 import { InputsPanel } from "./InputsPanel";
 import { convertToAdoTask } from "./models/AdoTask";

diff --git a/app/components/ui/LabelInfo.tsx b/app/components/ui/LabelInfo.tsx
@@ -1,12 +1,14 @@
 import { Callout, IconButton, ILabelProps, IStackStyles, IStackTokens, Label, Stack } from "@fluentui/react";
-import { useBoolean, useId } from '@fluentui/react-hooks';
-import React from "react";
+import { useBoolean, useId } from "@fluentui/react-hooks";
+import React, { ReactElement, SyntheticEvent } from "react";
+import ReactMarkdown from "react-markdown";
+import { OpenUrlMessage } from "../../../src/views/messages/MessageTypes";
 
 const stackTokens: IStackTokens = {
   maxWidth: 359,
 };
 
-const labelCalloutStackStyles: Partial<IStackStyles> = { root: { padding: 10 } };
+const labelCalloutStackStyles: Partial<IStackStyles> = { root: { paddingLeft: 7, paddingRight: 7 } };
 
 export interface LabelInfoProps extends ILabelProps {
   label: string | undefined;
@@ -15,55 +17,49 @@ export interface LabelInfoProps extends ILabelProps {
 
 export const LabelInfo = (props: LabelInfoProps): JSX.Element => {
   const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
-  const descriptionId: string = useId('description');
-  const iconButtonId: string = useId('iconButton');
+  const descriptionId: string = useId("description");
+  const iconButtonId: string = useId("iconButton");
+
+  function clickLink(event: SyntheticEvent) {
+    event.preventDefault();
+    const anchor = event.target as HTMLAnchorElement;
+    vscode.postMessage<OpenUrlMessage>({ type: "OPENURL", payload: anchor.href });
+    toggleIsCalloutVisible();
+  }
+
+  function renderLink(node: any, linkProps: any): ReactElement {
+    return <a onClick={clickLink} {...linkProps} />;
+  }
 
   return (
     <>
       <Stack horizontal verticalAlign="center">
         <Label id={props.id} required={props.required} className={props.className} styles={props.styles} onClick={props.onClick}>{props.label}</Label>
-        <IconButton
-          id={iconButtonId}
-          iconProps={{ iconName: 'Info' }}
-          title="Info"
-          onClick={toggleIsCalloutVisible}
-        />
+        {props.description?.length > 0 && (
+          <IconButton
+            id={iconButtonId}
+            iconProps={{ iconName: "Info" }}
+            title="Info"
+            onClick={toggleIsCalloutVisible}
+          />
+        )}
       </Stack>
       {isCalloutVisible && (
         <Callout
-          target={'#' + iconButtonId}
+          target={"#" + iconButtonId}
           setInitialFocus
           onDismiss={toggleIsCalloutVisible}
           ariaDescribedBy={descriptionId}
           role="alertdialog" >
           <Stack tokens={stackTokens} horizontalAlign="start" styles={labelCalloutStackStyles}>
-            <span id={descriptionId}>{props.description}</span> 
+            <span id={descriptionId}>
+              <ReactMarkdown components={{
+                a: ({ node, ...props }) => renderLink(node, props)
+              }}>{props.description}</ReactMarkdown>
+            </span>
           </Stack>
         </Callout>
       )}
     </>
   );
-};
-
-
-/*
-
-const [isCalloutVisible, { toggle: toggleIsCalloutVisible }] = useBoolean(false);
-const iconButtonId: string = useId('iconButton');
-const descriptionId: string = useId('description');
-
-
-    {isCalloutVisible && (
-    <Callout
-        target={'#' + iconButtonId}
-        setInitialFocus
-        onDismiss={toggleIsCalloutVisible}
-        ariaDescribedBy={descriptionId}
-        role="alertdialog">
-        <Stack horizontalAlign="start" styles={LabelInfo.labelCalloutStackStyles}>
-            <span id={descriptionId}>The custom label includes an IconButton that displays this Callout on click.</span>
-        </Stack>
-    </Callout>
-)
-}
-*/
+};
diff --git a/app/global.d.ts b/app/global.d.ts
@@ -1,4 +1,4 @@
-type Message = import('../src/views/messages/messageTypes').Message;
+type Message = import('../src/views/messages/MessageTypes').Message;
 
 type VSCode = {
   postMessage<T extends Message = Message>(message: T): void;