Feature: clickable links on message bar #835

thewahome · 2021-02-09T12:29:36Z

Overview

Makes links available in the samples clickable

Fixes #862
Fixes #705

Demo

Has clickable link:

Notes

Some tip messages will not be shown when the user is not signed in

Testing Instructions

Scenario 1 - External link

Click the list Azure AD gallery apps example from the sidebar
A tip message with a clickable link should be displayed
The click should open a new tab to the feedback survey

Scenario 2 - Graph API link

Run the get ediscovery case example from the sidebar
A tip message with a clickable link should be displayed
The click should populate the query input area with the clicked url

ElinorW · 2021-02-09T14:52:28Z

package.json

@@ -81,7 +81,7 @@
  "scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js && node versioned-build.js",
-    "test": "node scripts/test.js --no-watch --testPathIgnorePatterns=src/tests/accessibility",
+    "test": "node scripts/test.js --watch --testPathIgnorePatterns=src/tests/accessibility",


why did you change this part?
won't it look for the accessibility test, which is a separate job?

the --watch flag makes the tests watch for changes as you work. So if you change a file, as long as you had ran npm run test you would see the results of the tests immediately without running it again. with the --no-watch you need to run the tests command again

The --testPathIgnorePatterns flag is a different parameter that helps the runner know which file to ignore

jobala

Why is the filename status.util.ts and not status.ts?

jobala · 2021-02-10T06:56:53Z

src/app/utils/status.util.ts

@@ -0,0 +1,46 @@
+export function replaceLinks(message: string): string {
+  if (linkExists(message)) {
+    const urls = extractUrl(message);


It is possible to avoid the implementation of linkExists by checking the result of extractUrl.

const urls = extractUrl(message) // instead of if linkExists(message) if (urls.length > 0) { ... }

jobala · 2021-02-10T06:58:51Z

src/app/utils/status.util.ts

+  return exists;
+}
+
+export function extractUrl(value: string): any {


The return type here should be an array of strings or an empty array

jobala · 2021-02-10T07:01:19Z

src/app/utils/status.util.ts

+export function extractUrl(value: string): any {
+  const matches = value.match(/\bhttps?:\/\/\S+/gi);
+  if (matches) {
+    return matches;


You can achieve the same with

return value.match(...)

jobala · 2021-02-10T07:03:23Z

src/tests/utils/url-to-html.spec.ts

@@ -0,0 +1,36 @@
+import { linkExists, extractUrl, replaceLinks, convertArrayToObject } from "../../app/utils/status.util";
+
+describe('url should', () => {


It's a best practise to put the test suit name here, something like URL TestSuite

github-actions · 2021-02-10T09:18:38Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-835.centralus.azurestaticapps.net

github-actions · 2021-02-10T09:30:09Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://jolly-sand-0ac78c710-835.centralus.azurestaticapps.net

* Fix: support different content types (#814) * Feature: Add Adaptive cards JSON Schema code (#828) * Feature: samples testing (#833) * Feature: Adds 'Report an Issue' menu option (#834) * Feature: clickable links on message bar (#835) * fix: intermittent create page error (#837) * Fix: Add 'Maximize sidebar' aria-label (#842) * Task: upgrade technologies (#844) * Fix: expand maxWidth allow more humanName chars (#764) * Fix: autocomplete options not displaying (#847) * fix: adaptive cards destroy (#848) * Fix: Graph Explorer link colors (#846) * Fix: Adaptive cards instrumentation (#849) * Fix: adjust column width (#850) * Task: prevent storing access token (#851) Co-authored-by: jobala <japhethobalak@gmail.com> Co-authored-by: Charles Wahome <thewahome.cw@gmail.com> Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Millicent Achieng <achieng.milli@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com> Co-authored-by: Vincent Biret <vibiret@microsoft.com> Co-authored-by: Joseph Ngugi <jngugi88@gmail.com> Co-authored-by: Maggie Kimani <maggiekim42@gmail.com>

* Fix: support different content types (#814) * Feature: Add Adaptive cards JSON Schema code (#828) * Feature: samples testing (#833) * Feature: Adds 'Report an Issue' menu option (#834) * Feature: clickable links on message bar (#835) * fix: intermittent create page error (#837) * HB of localized GE.jsons (#830) * Fix: Add 'Maximize sidebar' aria-label (#842) * Task: upgrade technologies (#844) * Fix: expand maxWidth allow more humanName chars (#764) * Fix: autocomplete options not displaying (#847) * fix: adaptive cards destroy (#848) * Fix: Graph Explorer link colors (#846) * Fix: Adaptive cards instrumentation (#849) * Fix: adjust column width (#850) * Task: prevent storing access token (#851) * HB of localized GE.jsons (#854) * chore(release): 4.3.0 (#857) * Fix: rename component name (#859) * chore(release): 4.4.0 Co-authored-by: jobala <japhethobalak@gmail.com> Co-authored-by: Charles Wahome <thewahome.cw@gmail.com> Co-authored-by: OfficeGlobal <47977325+OfficeGlobal@users.noreply.github.com> Co-authored-by: OfficeGlobal <OfficeGlobal@microsoft.com> Co-authored-by: Azure Static Web Apps <opensource@microsoft.com> Co-authored-by: Millicent Achieng <achieng.milli@gmail.com> Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com> Co-authored-by: Ezrqn Kemboi <ezrqnkemboi@gmail.com> Co-authored-by: Vincent Biret <vibiret@microsoft.com> Co-authored-by: Joseph Ngugi <jngugi88@gmail.com> Co-authored-by: Maggie Kimani <maggiekim42@gmail.com>

thewahome added 6 commits February 8, 2021 16:13

create function to replace url with html

42529a5

display links as clickable links

53cc9a8

add dollar sign to prevent number conversions

8599c3b

use convert array function

2757cbd

change to regex when extracting urls

4f367d0

redirect when external, set sample query when graph

dee4f91

thewahome requested a review from ElinorW February 9, 2021 12:29

thewahome changed the title ~~Feature/clickable links on message bar~~ Feature: clickable links on message bar Feb 9, 2021

ElinorW reviewed Feb 9, 2021

View reviewed changes

ElinorW approved these changes Feb 10, 2021

View reviewed changes

jobala suggested changes Feb 10, 2021

View reviewed changes

jobala reviewed Feb 10, 2021

View reviewed changes

thewahome added 3 commits February 10, 2021 10:44

take tests back to --no-watch

cad8acf

change url presence check to regex

cc5755a

reuse extract function as exist check

bfaa7c6

fix failing numerical value check

4e88a97

jobala approved these changes Feb 10, 2021

View reviewed changes

thewahome merged commit 4ab6fe9 into dev Feb 10, 2021

thewahome deleted the feature/clickable-links-on-message-bar branch February 17, 2021 11:36

thewahome linked an issue Feb 24, 2021 that may be closed by this pull request

Clickable message bar links #862

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature: clickable links on message bar #835

Feature: clickable links on message bar #835

thewahome commented Feb 9, 2021 •

edited

Loading

ElinorW Feb 9, 2021

thewahome Feb 9, 2021

jobala left a comment

jobala Feb 10, 2021

jobala Feb 10, 2021

jobala Feb 10, 2021

jobala Feb 10, 2021

github-actions bot commented Feb 10, 2021

github-actions bot commented Feb 10, 2021

		@@ -0,0 +1,36 @@
		import { linkExists, extractUrl, replaceLinks, convertArrayToObject } from "../../app/utils/status.util";

		describe('url should', () => {

Feature: clickable links on message bar #835

Feature: clickable links on message bar #835

Conversation

thewahome commented Feb 9, 2021 • edited Loading

Overview

Demo

Notes

Testing Instructions

Scenario 1 - External link

Scenario 2 - Graph API link

ElinorW Feb 9, 2021

Choose a reason for hiding this comment

thewahome Feb 9, 2021

Choose a reason for hiding this comment

jobala left a comment

Choose a reason for hiding this comment

jobala Feb 10, 2021

Choose a reason for hiding this comment

jobala Feb 10, 2021

Choose a reason for hiding this comment

jobala Feb 10, 2021

Choose a reason for hiding this comment

jobala Feb 10, 2021

Choose a reason for hiding this comment

github-actions bot commented Feb 10, 2021

github-actions bot commented Feb 10, 2021

thewahome commented Feb 9, 2021 •

edited

Loading