Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make external links more obvious #543

Merged
merged 7 commits into from
Aug 11, 2022
Merged

Make external links more obvious #543

merged 7 commits into from
Aug 11, 2022

Conversation

tuckerzp
Copy link
Contributor

@tuckerzp tuckerzp commented Aug 5, 2022

Closes #83

tuckerzp
tuckerzp commented Aug 5, 2022
View reviewed changes
example/src/App.css Outdated Show resolved Hide resolved
@tuckerzp tuckerzp force-pushed the feature/add-external-icon branch 2 times, most recently from 2611f01 to afdf89b Compare August 8, 2022 15:32
@tuckerzp tuckerzp marked this pull request as ready for review August 8, 2022 15:32
@easy-dynamics-oscal-automation easy-dynamics-oscal-automation bot requested a review from a team August 8, 2022 15:32
@tuckerzp tuckerzp force-pushed the feature/add-external-icon branch 2 times, most recently from 6395660 to 0d0b8fc Compare August 8, 2022 15:40
@easy-dynamics-oscal-automation easy-dynamics-oscal-automation bot requested a review from a team August 8, 2022 16:22
kylelaker
kylelaker suggested changes Aug 8, 2022
View reviewed changes
Copy link
Contributor

@kylelaker kylelaker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will only impact links in the Back Matter. What about external links that may appear elsewhere such as in markup-multiline typed fields?

tuckerzp
tuckerzp commented Aug 8, 2022
View reviewed changes
src/components/OSCALMarkdownProse.js Outdated
@@ -1,12 +1,23 @@
import React from "react";
import ReactMarkdown from "react-markdown";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";

const components = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

react-markdown allows for you to change things that come from markdown.

https://github.com/remarkjs/react-markdown#appendix-b-components

We rewrite the <a> tag to display the external link icon.

Bronstrom
Bronstrom requested changes Aug 8, 2022
View reviewed changes
Copy link
Contributor

@Bronstrom Bronstrom left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like there is also an external link for Categorization ID in OSCALSystemCharacteristics

@tuckerzp
Copy link
Contributor Author

tuckerzp commented Aug 8, 2022

To make the inevitable conflict a bit easier to deal with, tests will fail until #548 is in. It should be a simple change to get them to pass again.

@tuckerzp tuckerzp mentioned this pull request Aug 9, 2022
Merged
@tuckerzp
Make external links more obvious
2a2dffd
@tuckerzp
Display external link using icon tag
fdf7485 
Using a css solution was not versatile enough to actually display the
mui icon. Instead the `icon` tag will contain a OpenInNewIcon icon if
the absolute url points to an external source.
@tuckerzp
Test that icon is displayed within a button
81c29bc
@tuckerzp
Make external link open in new tab
413d735
@tuckerzp
Display system categorization external link icon
86bfe7e
@tuckerzp tuckerzp requested a review from a team August 10, 2022 19:32
kylelaker
kylelaker reviewed Aug 10, 2022
View reviewed changes
src/components/OSCALMarkupProse.js Outdated
/**
* Renders a string of markdown to React elements
* @param {String} props.text
* @returns a React element from the markdown
*/

export function OSCALMarkupMultiLine(props) {
components.p = props.paragraphComponent ?? "p";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes the base components object in a way that I am not especially comfortable with.

<ReactMarkdown
  components = {{
    ...components,
    p: props.paragraphComponent ?? "p",
  }}
>
  {props.children}
</ReactMarkdown>

src/components/OSCALMarkupProse.js Outdated
Comment on lines 6 to 15
const components = {
a: ({ ...props }) =>
props.href.startsWith("http") ? (
<a target="_blank" {...props}>
<OpenInNewIcon /> {props.children}
</a>
) : (
<a {...props}>{props.children}</a>
),
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to name this something a little more descriptive like baseComponents or something like that.

src/components/OSCALMarkupProse.js Outdated
const components = {
a: ({ ...props }) =>
props.href.startsWith("http") ? (
<a target="_blank" {...props}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why <a> and not <Link> from MUI?

@Bronstrom Bronstrom merged commit 044216d into develop Aug 11, 2022
@Bronstrom Bronstrom deleted the feature/add-external-icon branch August 11, 2022 16:08
@kylelaker kylelaker added the enhancement New feature or request label Aug 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kylelaker kylelaker kylelaker approved these changes

@Bronstrom Bronstrom Bronstrom approved these changes

Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Improve External Links
3 participants
@tuckerzp @kylelaker @Bronstrom