Fix: Update link classes (#1902)

microsoftgraph · Jul 12, 2022 · 5eb2074 · 5eb2074
1 parent dd1300b
commit 5eb2074
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
@@ -42,9 +42,6 @@ export const appStyles = (theme: ITheme) => {
     separator: {
       borderBottom: '1px solid ' + theme.palette.neutralLight
     },
-    links: {
-      color: `${theme.palette.blueMid} !important`
-    },
     sidebarToggle: {
       marginBottom: theme.spacing.s1,
       marginTop: theme.spacing.s1

diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -442,7 +442,7 @@ class App extends Component<IAppProps, IAppState> {
               </Resizable>
             )}
             {graphExplorerMode === Mode.TryIt &&
-              headerMessaging(classes, query)}
+              headerMessaging(query)}
 
             {displayContent && (
               <Resizable

diff --git a/src/app/views/app-sections/HeaderMessaging.tsx b/src/app/views/app-sections/HeaderMessaging.tsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import { getLoginType } from '../../../modules/authentication/authUtils';
 import { LoginType } from '../../../types/enums';
 
-export function headerMessaging(classes: any, query: string): React.ReactNode {
+export function headerMessaging(query: string): React.ReactNode {
   const loginType = getLoginType();
 
   return (
@@ -14,7 +14,7 @@ export function headerMessaging(classes: any, query: string): React.ReactNode {
         <MessageBar messageBarType={MessageBarType.info} isMultiline={true}>
           <p>
             <FormattedMessage id='To try the full features' />,
-            <a className={classes.links} tabIndex={0} href={query} target='_blank' rel='noopener noreferrer'>
+            <a className={'ms-Link'} tabIndex={0} href={query} target='_blank' rel='noopener noreferrer'>
               <FormattedMessage id='full Graph Explorer' />.
             </a>
           </p>
@@ -28,7 +28,7 @@ export function headerMessaging(classes: any, query: string): React.ReactNode {
         <p>
           <FormattedMessage id='To try operations other than GET' />,
 
-          <a className={classes.links} tabIndex={0} href={query} target='_blank' rel='noopener noreferrer'>
+          <a className={'ms-Link'} tabIndex={0} href={query} target='_blank' rel='noopener noreferrer'>
             <FormattedMessage id='sign in' />.
           </a>
         </p>

diff --git a/src/app/views/app-sections/StatusMessages.tsx b/src/app/views/app-sections/StatusMessages.tsx
@@ -31,9 +31,9 @@ const StatusMessages = () => {
         const link = urls[part];
         if (link) {
           if (link.includes(GRAPH_URL)) {
-            return <Link onClick={() => setQuery(link)}>{link}</Link>;
+            return <Link className={'ms-Link'} onClick={() => setQuery(link)}>{link}</Link>;
           }
-          return <Link target="_blank" href={link}>{link}</Link>;
+          return <Link className={'ms-Link'} target="_blank" href={link}>{link}</Link>;
         }
       };
       return (

diff --git a/src/app/views/app-sections/TermsOfUseMessage.tsx b/src/app/views/app-sections/TermsOfUseMessage.tsx
@@ -7,15 +7,13 @@ import { geLocale } from '../../../appLocale';
 import { componentNames, telemetry } from '../../../telemetry';
 import { IRootState } from '../../../types/root';
 import { clearTermsOfUse } from '../../services/actions/terms-of-use-action-creator';
-import { classNames } from '../classnames';
 import { appStyles } from '../App.styles';
 
-const styledTermsOfUseMessage = (props: any) => {
+const styledTermsOfUseMessage = () => {
 
   const { termsOfUse } =
     useSelector((state: IRootState) => state);
 
-  const classes = classNames(props);
   const dispatch = useDispatch();
   if (termsOfUse) {
     return <MessageBar messageBarType={MessageBarType.info}
@@ -27,14 +25,14 @@ const styledTermsOfUseMessage = (props: any) => {
       <a
         onClick={(e) =>
           telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_APIS_TERMS_OF_USE_LINK)}
-        className={classes.links} href={'https://docs.microsoft.com/' + geLocale +
+        className={'ms-Link'} href={'https://docs.microsoft.com/' + geLocale +
           '/legal/microsoft-apis/terms-of-use?context=graph/context'} target='_blank' rel='noopener noreferrer'>
         <FormattedMessage id='Terms of use' /></a>.
       <FormattedMessage id='View the' />
       <a
         onClick={(e) =>
           telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.MICROSOFT_PRIVACY_STATEMENT_LINK)}
-        className={classes.links} href={'https://privacy.microsoft.com/' + geLocale + '/privacystatement'}
+        className={'ms-Link'} href={'https://privacy.microsoft.com/' + geLocale + '/privacystatement'}
         target='_blank' rel='noopener noreferrer'>
         <FormattedMessage id='Microsoft Privacy Statement' /></a>.
     </MessageBar>;

diff --git a/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx b/src/app/views/query-response/adaptive-cards/AdaptiveCard.tsx
@@ -140,7 +140,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
                     target='_blank'
                     rel='noopener noreferrer'
                     tabIndex={0}
-                    className={classes.link}
+                    className={'ms-Link'}
                   >
                     <FormattedMessage id='Adaptive Cards Templating SDK' />
                   </a>
@@ -149,7 +149,7 @@ class AdaptiveCard extends Component<IAdaptiveCardProps> {
                     target='_blank'
                     rel='noopener noreferrer'
                     tabIndex={0}
-                    className={classes.link}
+                    className={'ms-Link'}
                   >
                     <FormattedMessage id='Adaptive Cards designer' />
                   </a>

diff --git a/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx b/src/app/views/query-response/graph-toolkit/GraphToolkit.tsx
@@ -13,7 +13,6 @@ import {
 } from '@fluentui/react';
 import { lookupToolkitUrl } from '../../../utils/graph-toolkit-lookup';
 import { componentNames, telemetry } from '../../../../telemetry';
-import { classNames } from '../../classnames';
 import { queryResponseStyles } from '../queryResponse.styles';
 import { IRootState } from '../../../../types/root';
 import { translateMessage } from '../../../utils/translate-messages';
@@ -29,7 +28,6 @@ class GraphToolkit extends Component<any> {
   public render() {
     const { sampleQuery } = this.props;
     const { toolkitUrl, exampleUrl } = lookupToolkitUrl(sampleQuery);
-    const classes = classNames(this.props);
 
     if (toolkitUrl && exampleUrl) {
       return (
@@ -40,7 +38,7 @@ class GraphToolkit extends Component<any> {
               onClick={(e) =>
                 telemetry.trackLinkClickEvent(e.currentTarget.href, componentNames.GRAPH_TOOLKIT_PLAYGROUND_LINK)}
               tabIndex={0} href={exampleUrl} target='_blank' rel='noopener noreferrer'
-              className={classes.link}>
+              className={'ms-Link'}>
               <FormattedMessage id='graph toolkit playground' />
             </a>
             .
@@ -55,7 +53,7 @@ class GraphToolkit extends Component<any> {
         <FormattedMessage id='We did not find a Graph toolkit for this query' />
         &nbsp;
         <a
-          className={classes.link}
+          className={'ms-Link'}
           tabIndex={0}
           href='https://aka.ms/mgt'
           rel='noopener noreferrer'

diff --git a/src/app/views/query-response/response/ResponseMessages.tsx b/src/app/views/query-response/response/ResponseMessages.tsx
@@ -55,7 +55,7 @@ export function responseMessages(
     return (
       <MessageBar messageBarType={MessageBarType.info}>
         <FormattedMessage id={'This response contains an @odata property.'} />: @odata.{odataLink.name}
-        <Link onClick={() => setQuery()}>
+        <Link className={'ms-Link'} onClick={() => setQuery()}>
           &nbsp;<FormattedMessage id='Click here to follow the link' />
         </Link>
       </MessageBar>
@@ -68,7 +68,7 @@ export function responseMessages(
       <div>
         <MessageBar messageBarType={MessageBarType.warning}>
           <FormattedMessage id={'This response contains unviewable content'} />
-          <Link href={body?.contentDownloadUrl} download>
+          <Link className={'ms-Link'} href={body?.contentDownloadUrl} download>
             <FormattedMessage id={'Click to download file'} />
           </Link>&nbsp;
         </MessageBar>
@@ -82,7 +82,7 @@ export function responseMessages(
       <div>
         <MessageBar messageBarType={MessageBarType.warning}>
           <FormattedMessage id={'Response content not available due to CORS policy'} />
-          <Link target='_blank' href={MOZILLA_CORS_DOCUMENTATION_LINK}>
+          <Link className={'ms-Link'} target='_blank' href={MOZILLA_CORS_DOCUMENTATION_LINK}>
             <FormattedMessage id={'here'} />
           </Link>.
         </MessageBar>

diff --git a/src/app/views/query-runner/request/permissions/TabList.tsx b/src/app/views/query-runner/request/permissions/TabList.tsx
@@ -32,7 +32,7 @@ const TabList = ({ columns, classes, renderItemColumn, renderDetailsHeader, maxH
   const displayNoPermissionsFoundMessage = () : JSX.Element => {
     return (<Label className={classes.permissionLabel}>
       <FormattedMessage id='permissions not found in permissions tab' />
-      <Link onClick={openPermissionsPanel}>
+      <Link className={'ms-Link'} onClick={openPermissionsPanel}>
         <FormattedMessage id='open permissions panel' />
       </Link>
       <FormattedMessage id='permissions list' />

diff --git a/src/app/views/sidebar/sample-queries/SampleQueries.tsx b/src/app/views/sidebar/sample-queries/SampleQueries.tsx
@@ -345,7 +345,7 @@ const unstyledSampleQueries = (sampleProps?: ISampleQueriesProps): JSX.Element =
         <a
           target='_blank'
           rel="noopener noreferrer"
-          className={classes.links}
+          className={'ms-Link'}
           onClick={(e) => telemetry.trackLinkClickEvent(e.currentTarget.href,
             componentNames.MICROSOFT_GRAPH_API_REFERENCE_DOCS_LINK)}
           href={`https://docs.microsoft.com/${geLocale}/graph/api/overview?view=graph-rest-1.0`}