Skip to content

[ERP-2110 & ERP-2111] Replaced all remaining Alert and Text Components #30

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

Merged
merged 3 commits into from
Jul 25, 2024
Merged

[ERP-2110 & ERP-2111] Replaced all remaining Alert and Text Components #30

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fcd4a58
[ERP-2110 & ERP-2111] Replaced all remaining Alert and Text Component…
NikuPAN Jul 23, 2024
8e5f185
Changed link color back to blue.500 for ssh feature link text & Added…
NikuPAN Jul 23, 2024
86331f6
Fixed missing changes and updated the design of the component to best…
NikuPAN Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/components/tool/guide/Config/AlertHelper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export default function AlertHelper({
alertType = "info",
alertMsg = null,
onClose = {},
children = null,
Copy link
Member

Choose a reason for hiding this comment

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

I'm not really a fan of having two different props to set the same thing, as you have to know internal details of the component in order to know which prop has precedent. Is there a reason to not use one?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Actually we can just make one props to support multiple types.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed

}) {
return (
<>
Expand All @@ -13,9 +14,11 @@ export default function AlertHelper({
<Box w="100%">
<Alert display="flex" status={alertType}>
<AlertIcon />
{alertMsg && typeof alertMsg === "function"
? alertMsg()
: `${alertMsg}`}
{children
? children
: alertMsg && typeof alertMsg === "function"
? alertMsg()
: `${alertMsg}`}
{alertDismissible && (
<CloseButton
size="sm"
Expand Down
10 changes: 6 additions & 4 deletions src/components/tool/guide/HuggingFacePipeline/Model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { CloseIcon, ExternalLinkIcon } from "@chakra-ui/icons";
import {
Alert,
Box,
Button,
Flex,
Expand All @@ -26,6 +25,7 @@ import {
} from "@choc-ui/chakra-autocomplete";

import useData from "../../../hooks/useData";
import AlertHelper from "../Config/AlertHelper";

function ModelAutoComplete({ model, onModelChange, models }) {
return (
Expand Down Expand Up @@ -238,9 +238,11 @@ export function Model({ model, onModelChange, task }) {

if (modelsError) {
return (
<Alert status="error">
Error retrieving models: {modelsError.message}
</Alert>
<AlertHelper
alertType={"error"}
alertMsg={`Error retrieving models: ${modelsError.message}`}
alertDismissible={false}
/>
);
} else if (modelsLoading) {
return <Progress colorScheme="yellow" isIndeterminate />;
Expand Down
18 changes: 13 additions & 5 deletions src/components/tool/guide/Instructions/AccessInstructions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Code, Link } from "@chakra-ui/react";
import { Code } from "@chakra-ui/react";

import TextWithLink from "../../../navigation/TextWithLink";
import CopyBox from "../../../output/CopyBox";
import InstructionHeading from "./components/InstructionHeading";
import InstructionText from "./components/InstructionText";
Expand Down Expand Up @@ -37,10 +38,17 @@ export function AccessInstructions({ service, port, node, username }) {
)}
<InstructionHeading>Access the tool</InstructionHeading>
<InstructionText>
In your web browser, navigate to the following address:{" "}
<Link href={`http://localhost:${port}`} isExternal color="blue.500">
http://localhost:{port}
</Link>
<TextWithLink
textBeforeLink={
"In your web browser, navigate to the following address: "
}
link={{
href: `http://localhost:${port}`,
text: `http://localhost:${port}`,
color: "blue.500",
isExternal: true,
}}
/>
</InstructionText>
<CopyBox>http://localhost:{port}</CopyBox>
</>
Expand Down
167 changes: 100 additions & 67 deletions src/components/tool/guide/Instructions/ConnectInstructions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { Alert, AlertIcon, Box, Code, Link, Text } from "@chakra-ui/react";
import { Box, Code, Flex } from "@chakra-ui/react";

import TextWithLink from "../../../navigation/TextWithLink";
import CopyBox from "../../../output/CopyBox";
import AlertHelper from "../Config/AlertHelper";
import InstructionHeading from "./components/InstructionHeading";
import InstructionText from "./components/InstructionText";
import { OperatingSystemTabs } from "./components/OperatingSystemTabs";
Expand All @@ -9,48 +11,66 @@ function LyraInstructions({ username }) {
return (
<>
<InstructionHeading>Connect to Lyra</InstructionHeading>
<Alert status="info">
<AlertIcon />
If you are off-campus, you will first need to connect to the QUT network
using the VPN.
</Alert>
<AlertHelper
alertType="info"
alertMsg="If you are off-campus, you will first need to connect to the QUT network using the VPN."
alertDismissible={false}
/>
<InstructionText>
See the instructions{" "}
<Link
href="https://qutvirtual4.qut.edu.au/group/research-students/conducting-research/specialty-research-facilities/advanced-research-computing-storage/supercomputing/getting-started-with-hpc"
isExternal
color="blue.500"
>
here
</Link>{" "}
for more information about how to use Lyra.
<TextWithLink
textBeforeLink={"See the instructions "}
link={{
href: "https://qutvirtual4.qut.edu.au/group/research-students/conducting-research/specialty-research-facilities/advanced-research-computing-storage/supercomputing/getting-started-with-hpc",
text: "here",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" for more information about how to use Lyra."}
/>
</InstructionText>
<OperatingSystemTabs>
<Box>
<Alert status="info">
<AlertIcon />
<Text mb="0">
You may need to enable the{" "}
<Link
href="https://learn.microsoft.com/en-us/windows/terminal/tutorials/ssh"
isExternal
color="blue.500"
>
ssh feature
</Link>{" "}
in Windows.
</Text>
</Alert>
<AlertHelper
alertType={"info"}
// alertMsg={enableSSHText}
alertDismissible={false}
Copy link
Member

Choose a reason for hiding this comment

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

Missed

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed

>
<TextWithLink
textBeforeLink={"You may need to enable the "}
link={{
href: "https://learn.microsoft.com/en-us/windows/terminal/tutorials/ssh",
text: "ssh feature",
color: "blue.500",
isExternal: true,
}}
hasExternalIcon={false}
textAfterLink={" in Windows."}
/>
</AlertHelper>
<InstructionText>
In{" "}
<Link href="https://aka.ms/terminal" isExternal color="blue.500">
Windows Terminal
</Link>
, Powershell,{" "}
<Link href="https://www.putty.org/" isExternal color="blue.500">
PuTTY
</Link>
, or cmd.exe, run the following command to connect to Lyra:
<Flex alignItems={"center"}>
<TextWithLink
textBeforeLink={"In "}
link={{
href: "https://aka.ms/terminal",
text: "Windows Terminal",
color: "blue.500",
isExternal: true,
}}
/>
<TextWithLink
textBeforeLink={", Powershell, "}
link={{
href: "https://www.putty.org/",
text: "PuTTY",
color: "blue.500",
isExternal: true,
}}
textAfterLink={
", or cmd.exe, run the following command to connect to Lyra:"
}
/>
</Flex>
</InstructionText>
</Box>
<Box>
Expand Down Expand Up @@ -83,15 +103,16 @@ function JupyterHubInstructions() {
<>
<InstructionHeading>Connect to JupyterHub</InstructionHeading>
<InstructionText>
Visit{" "}
<Link
href="https://jupyterhub.eres.qut.edu.au"
isExternal
color="blue.500"
>
https://jupyterhub.eres.qut.edu.au
</Link>{" "}
and log in with your QUT username and password.
<TextWithLink
textBeforeLink={"Visit "}
link={{
href: "https://jupyterhub.eres.qut.edu.au",
text: "https://jupyterhub.eres.qut.edu.au",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" and log in with your QUT username and password."}
/>
</InstructionText>
</>
);
Expand All @@ -102,30 +123,42 @@ function RvdiInstructions() {
<>
<InstructionHeading>Connect to rVDI</InstructionHeading>
<InstructionText>
See the instructions{" "}
<Link
href="https://qutvirtual4.qut.edu.au/group/research-students/conducting-research/specialty-research-facilities/advanced-research-computing-storage/virtual-workstations"
isExternal
color="blue.500"
>
here
</Link>{" "}
for more information.
<TextWithLink
textBeforeLink={"See the instructions "}
link={{
href: "https://qutvirtual4.qut.edu.au/group/research-students/conducting-research/specialty-research-facilities/advanced-research-computing-storage/virtual-workstations",
text: "here",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" for more information."}
/>
</InstructionText>
<InstructionText>
If you have not already, download and install the VMware Horizon client
from{" "}
<Link href="https://rvdi.qut.edu.au" isExternal color="blue.500">
https://rvdi.qut.edu.au
</Link>
.
<TextWithLink
textBeforeLink={
"If you have not already, download and install the VMware Horizon client from "
}
link={{
href: "https://rvdi.qut.edu.au",
text: "https://rvdi.qut.edu.au",
color: "blue.500",
isExternal: true,
}}
textAfterLink={"."}
/>
</InstructionText>
<InstructionText>
In the VMware Horizon client, connect to{" "}
<Link href="https://rvdi.qut.edu.au" isExternal color="blue.500">
rvdi.qut.edu.au
</Link>{" "}
and log in with your QUT username and password.
<TextWithLink
textBeforeLink={"In the VMware Horizon client, connect to "}
link={{
href: "https://rvdi.qut.edu.au",
text: "https://rvdi.qut.edu.au",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" and log in with your QUT username and password."}
/>
</InstructionText>
</>
);
Expand Down
63 changes: 30 additions & 33 deletions src/components/tool/guide/Instructions/InstallInstructions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
import {
Alert,
AlertIcon,
Link,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from "@chakra-ui/react";
import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";

import TextWithLink from "../../../navigation/TextWithLink";
import CopyBox from "../../../output/CopyBox";
import AlertHelper from "../Config/AlertHelper";
import InstructionHeading from "./components/InstructionHeading";
import InstructionText from "./components/InstructionText";
import { singularityContainerName } from "./utils";
Expand Down Expand Up @@ -77,15 +70,16 @@ export function InstallInstructions({
Install Singularity (if it has not been installed)
</InstructionHeading>
<InstructionText>
Follow the instructions{" "}
<Link
href="https://sylabs.io/docs/"
isExternal
color="blue.500"
>
here
</Link>{" "}
to install singularity.
<TextWithLink
textBeforeLink={"Follow the instructions "}
link={{
href: "https://sylabs.io/docs/",
text: "here",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" to install singularity."}
/>
</InstructionText>
<InstructionHeading>Set up the container</InstructionHeading>
<InstructionText>Build the container:</InstructionText>
Expand Down Expand Up @@ -144,11 +138,13 @@ export function InstallInstructions({
<CopyBox>source ~/.bashrc</CopyBox>
</TabPanel>
<TabPanel>
<Alert status="warning">
<AlertIcon />
Packages take a long time to install with conda. We
recommend using mamba instead.
</Alert>
<AlertHelper
alertType="warning"
alertMsg={
"Packages take a long time to install with conda. We recommend using mamba instead."
}
alertDismissible={false}
/>
<InstructionText>
Download the latest version of miniconda:
</InstructionText>
Expand Down Expand Up @@ -201,15 +197,16 @@ export function InstallInstructions({
Install Python (if it has not been installed)
</InstructionHeading>
<InstructionText>
Follow the instructions{" "}
<Link
href="https://www.python.org/downloads/"
isExternal
color="blue.500"
>
here
</Link>{" "}
to install python.
<TextWithLink
textBeforeLink={"Follow the instructions "}
link={{
href: "https://www.python.org/downloads/",
text: "here",
color: "blue.500",
isExternal: true,
}}
textAfterLink={" to install python."}
/>
</InstructionText>
</>
)}
Expand Down
Loading
Loading