Link component (#1005)

* Link component

* change defualt use

* PR comments

Co-authored-by: Leon <>

.github/workflows/acceptance_tests_on_pr.yml

@@ -0,0 +1,38 @@
+name: Acceptance tests on PR
+
+on: push
+
+concurrency:
+  group: acceptance-tests-on-pr-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  run-tests:
+    name: Run tests
+    runs-on: ubuntu-latest
+    if: ${{ contains(github.event.head_commit.message, '#run_acceptance_tests') }}
+
+    steps:
+      - name: Set up Go 1.17
+        uses: actions/setup-go@v2
+        with:
+          go-version: '^1.17'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v2
+
+      - name: Setup acceptance test
+        run: ./acceptanceTests/setup.sh
+
+      - name: Create k8s users and change context
+        env:
+          USERNAME_UNRESTRICTED: user-with-clusterwide-access
+          USERNAME_RESTRICTED: user-with-restricted-access
+        run: |
+          ./acceptanceTests/create_user.sh "${USERNAME_UNRESTRICTED}"
+          ./acceptanceTests/create_user.sh "${USERNAME_RESTRICTED}"
+          kubectl apply -f cli/cmd/permissionFiles/permissions-all-namespaces-tap.yaml
+          kubectl config use-context ${USERNAME_UNRESTRICTED}
+
+      - name: Test
+        run: make acceptance-test

ui-common/src/components/UI/InformationIcon.tsx

@@ -1,19 +1,22 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 import styles from "./style/InformationIcon.module.sass"
 
 const DEFUALT_LINK = "https://getmizu.io/docs"
 
-export interface InformationIconProps {
+interface LinkProps {
     link?: string,
-    style?: CSSProperties
+    className?: string
+    title?: string
 }
 
-export const InformationIcon: React.FC<InformationIconProps> = ({ link, style }) => {
-    return <React.Fragment>
-        <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.linkStyle} title="documentation" target="_blank">
-            <span>Docs</span>
-        </a>
-    </React.Fragment>
+export const Link: React.FC<LinkProps> = ({ link, className, title, children }) => {
+    return <a href={link} className={className} title={title} target="_blank">
+        {children}
+    </a>
 }
 
-
+export const InformationIcon: React.FC<LinkProps> = ({ className }) => {
+    return <Link title="documentation" className={`${styles.linkStyle} ${className}`} link={DEFUALT_LINK}>
+        <span>Docs</span>
+    </Link>
+}

ui-common/src/components/UI/index.ts

@@ -5,10 +5,10 @@ import Tooltip from "./Tooltip";
 import Checkbox from "./Checkbox"
 import { StatusBar } from "./StatusBar";
 import CustomModal from "./CustomModal";
-import { InformationIcon } from "./InformationIcon";
+import { InformationIcon, Link } from "./InformationIcon";
 import SelectList from "./SelectList";
 import NoDataMessage from "./NoDataMessage";
 
 
-export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage }
+export { LoadingOverlay, Select, Tabs, Tooltip, Checkbox, CustomModal, InformationIcon, SelectList, NoDataMessage, Link }
 export { StatusBar }