feat: Added Console button component to display links to AWS console (a…

…ws-samples#1016)

docs/style_guide.md

@@ -42,6 +42,20 @@ sidebar_custom_props: {"info": true}
 ---
 ```
 
+### Navigating the AWS console
+
+There are instances where the user needs to navigate to specific screens in the AWS console. It is preferable to provide a link to the exact screen if possible, or a close as can be done.
+
+For example to link to the EKS console you can use a link like this:
+
+```
+https://console.aws.amazon.com/eks/home#/clusters
+```
+
+> Note that this has had the region information removed, the link as shown in the browser would be: `https://us-west-2.console.aws.amazon.com/eks/home?region=us-west-2#/clusters`. The region must be removed to allow the content to be portable.
+
+These links should be displayed to the user with the [Console button component](./ui_components.md) for consistency.
+
 ### Screenshots
 
 Use of screenshots should be limited to only wherever necessary. Where possible command-line output should be used as it is more maintainable and testable. When screenshots are necessary only the relevant section of the screen should be included as it reduces image size and makes the images more legible, especially for users with limited screen resolution. Screenshots should be cropped to display only the necessary details.

docs/ui_components.md

@@ -89,6 +89,24 @@ This is done by adding an ordered markdown list immediately after the `::yaml` d
 
 If using annotations then all paths should have a corresponding list entry, and the code lines will always be annotated in the order of the paths as listed in the attribute.
 
+## Console button
+
+![Console button](images/console-button.png)
+
+The console button component is designed to provide a consistent way to link to the AWS console.
+
+The component is used like so:
+
+```jsx
+<ConsoleButton
+  url="https://console.aws.amazon.com/cloudwatch/home#dashboards"
+  service="cloudwatch"
+  label="Open CloudWatch console"
+/>
+```
+
+The `service` parameter dictates the icon that is shown, and the corresponding image must exist in `website/static/img/services`.
+
 ## Browser Window
 
 ![Browser Window](images/browser-window.png)

website/src/components/ConsoleButton/index.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from "react";
+import clsx from "clsx";
+
+import styles from "./styles.module.css";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
+
+interface Props {
+  service: string;
+  url: string;
+  label: string;
+}
+
+export default function ConsoleButton({
+  service,
+  url = "http://localhost:3000",
+  label = "Launch",
+}: Props): JSX.Element {
+  let serviceIcon = service || "console";
+  return (
+    <a className={styles.button} href={url} target="_blank">
+      <img
+        className={styles.icon}
+        src={useBaseUrl(`/img/services/${serviceIcon}.png`)}
+        alt="AWS console icon"
+      />
+      <span className={styles.label}>{label}</span>
+    </a>
+  );
+}

website/src/components/ConsoleButton/styles.module.css

@@ -0,0 +1,31 @@
+.button {
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+  text-decoration: none;
+  color: initial;
+  background-color: #f90;
+  padding-inline: 10px;
+  padding-block: 4px;
+  border: 1px solid #f90;
+  font-weight: bold;
+  border-radius: 4px;
+  cursor: pointer;
+  text-align: center;
+  line-height: 30px;
+  margin-bottom: 30px;
+  color: black;
+}
+
+.icon {
+  width: 25px;
+  height: auto;
+  margin: auto;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+.label {
+  padding-left: 10px;
+}

website/src/theme/MDXComponents.js

@@ -8,6 +8,7 @@ import Kustomization from "@site/src/components/Kustomization";
 import LaunchButton from "@site/src/components/LaunchButton";
 import YamlFile, { YamlAnnotation } from "@site/src/components/YamlFile";
 import ReactPlayer from "react-player";
+import ConsoleButton from "@site/src/components/ConsoleButton";
 
 export default {
   // Re-use the default mapping
@@ -21,4 +22,5 @@ export default {
   ReactPlayer: ReactPlayer,
   YamlFile: YamlFile,
   YamlAnnotation: YamlAnnotation,
+  ConsoleButton: ConsoleButton,
 };