Skip to content

Commit

Permalink
fix up styling for patternfly
Browse files Browse the repository at this point in the history 
Signed-off-by: Tim Etchells <tetchel@gmail.com>
  • Loading branch information
@tetchel
tetchel committed Jun 4, 2021
1 parent f57e1ec commit c2c61b7
Show file tree
Hide file tree
Showing 19 changed files with 349 additions and 302 deletions.
9 changes: 9 additions & 0 deletions actions-connector.code-workspace
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,14 @@
"files.insertFinalNewline": true,
"files.trimFinalNewlines": true,
"typescript.tsdk": "node_modules/typescript/lib",
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
}
}
12 changes: 7 additions & 5 deletions src/client/components/btn-body.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,12 @@ export default function BtnBody(props: {
const iconPosition = props.iconPosition || "left";

const loadingElement = props.isLoading ? (
<Spinner className={classNames({ "d-none": !props.isLoading })} size="md" />
<Spinner size="md" />
) : ("");

let BtnIcon: JSX.Element = <></>;
if (props.icon) {
BtnIcon = <props.icon className={props.iconClasses} />;
BtnIcon = <props.icon className={classNames(props.iconClasses)} />;
}

return (
Expand All @@ -38,9 +38,11 @@ export default function BtnBody(props: {
>
{iconPosition === "left" ? BtnIcon : ""}
{iconPosition === "left" ? "" : loadingElement}
{
props.text ?? ""
}
<span>
{
props.text ?? ""
}
</span>
{iconPosition === "right" ? BtnIcon : ""}
{iconPosition === "right" ? "" : loadingElement}
</div>
Expand Down
6 changes: 4 additions & 2 deletions src/client/components/data-fetcher.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ export default class DataFetcher<Data> extends React.Component<DataFetcherProps<
}

override render() {
const cardSpinnerSize = "lg";

// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (this.state == null || !this.state.loaded) {
const loadingDisplayType = this.props.loadingDisplay ?? "text";
Expand All @@ -103,15 +105,15 @@ export default class DataFetcher<Data> extends React.Component<DataFetcherProps<
return (
<Card style={{ minHeight: "100px" }}>
<CardBody className="centers">
<Spinner style={this.props.loadingStyle ?? {}} />
<Spinner style={this.props.loadingStyle ?? {}} size={cardSpinnerSize}/>
</CardBody>
</Card>
);
}
else if (loadingDisplayType === "card-body") {
return (
<CardBody className="centers">
<Spinner style={this.props.loadingStyle ?? {}} size="md" />
<Spinner style={this.props.loadingStyle ?? {}} size={cardSpinnerSize} />
</CardBody>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/client/components/external-link.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function ExternalLink({
return (
<a href={href}
target="_blank" rel="noopener noreferrer"
className={"external-link font-weight-bold " + (className ?? "")}
className={"b" + (className ?? "")}
title={title != null ? title : href}
>
{icon?.position === "left" ? <icon.icon style={{ marginRight: marginSize }} /> : ("")}
Expand Down
6 changes: 3 additions & 3 deletions src/client/components/form-input-check.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
import React from "react";
import classNames from "classnames";

/*
interface FormButtonProps {
bold?: boolean,
checked: boolean,
Expand Down Expand Up @@ -36,3 +34,5 @@ export default function FormInputCheck(props: FormButtonProps): JSX.Element {
</label>
);
}
*/
export {};
14 changes: 8 additions & 6 deletions src/client/components/tooltip-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from "react";
import { Tooltip, TooltipPosition } from "@patternfly/react-core";
import { Title, Tooltip, TooltipPosition } from "@patternfly/react-core";
import classNames from "classnames";
import { QuestionCircleIcon } from "@patternfly/react-icons";
import { IconElement } from "../util/icons";
Expand All @@ -23,14 +23,16 @@ export function TooltipIcon(props: TooltipProps) {
return (
<Tooltip
content={
<>
<h3 className="text-black">{props.title}</h3>
{props.body}
</>
<div>
<Title headingLevel="h5">{props.title}</Title>
<div>
{props.body}
</div>
</div>
}
position={position}
>
<Icon className={classNames("mx-3", props.iconClasses)} size="lg" />
<Icon className={classNames("mx-3 tooltip-icon", props.iconClasses)} />
</Tooltip>
);
}
116 changes: 56 additions & 60 deletions src/client/pages/add-workflows-page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import classNames from "classnames";
import React from "react";
import {
Button, Card, CardTitle, CardBody, Form, FormGroup, TextInput, FormSelect,
Button, Card, CardTitle, CardBody, Form, FormGroup, TextInput, FormSelect, Checkbox, Radio,
} from "@patternfly/react-core";
import {
BookOpenIcon, CogIcon, ExclamationTriangleIcon, GithubIcon, PlusIcon, SyncAltIcon, YoutubeIcon,
Expand All @@ -16,7 +16,6 @@ import Banner from "../components/banner";
import DataFetcher from "../components/data-fetcher";
import { ExternalLink } from "../components/external-link";
import BtnBody from "../components/btn-body";
import FormInputCheck from "../components/form-input-check";
import { fetchJSON } from "../util/client-util";
import ClientPages from "./client-pages";
import { CommonIcons } from "../util/icons";
Expand Down Expand Up @@ -82,19 +81,19 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
<ul className="no-bullets">
<li>
<ExternalLink href={STARTER_WORKFLOW.htmlFile}>
<GithubIcon className="mr-2 text-light" />
<GithubIcon className="mr-2" />
View it on GitHub
</ExternalLink>
</li>
<li>
<ExternalLink href={STARTER_WORKFLOW.blog}>
<BookOpenIcon className="mr-2 text-light" />
<BookOpenIcon className="mr-2" />
Read the blog
</ExternalLink>
</li>
<li>
<ExternalLink href={STARTER_WORKFLOW.youtube}>
<YoutubeIcon className="mr-2 text-light"/>
<YoutubeIcon className="mr-2"/>
Watch the video
</ExternalLink>
</li>
Expand All @@ -111,28 +110,22 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
Workflow files are kept in the {`repository's`} <code>{WORKFLOWS_DIR}</code> directory.
The directory will be created if it does not exist.
</p>
<Form isHorizontal className="pt-2">
<Form className="pt-2">
<FormGroup
fieldId={"workflow-file-name"}
// eslint-disable-next-line no-nested-ternary
validated={this.state.workflowFile.validationErr !== undefined ?
(this.state.workflowFile.validationErr == null ? "success" : "error")
: "default"
}
helperText={this.state.workflowFile.validationErr}
helperTextInvalidIcon={<ExclamationTriangleIcon />}
fieldId={this.fileNameInputId}
validated={this.state.workflowFile.validationErr == null ? "success" : "error"}
helperTextInvalid={this.state.workflowFile.validationErr}
>
<TextInput
className="col-4 mr-0"
id={this.fileNameInputId}
style={{ width: "25ch" }}
validated={this.state.workflowFile.validationErr == null ? "success" : "error"}
defaultValue={DEFAULT_WORKFLOW_FILE_BASENAME}
onChange={(value) => this.setWorkflowFileName(value)}
/>
<TextInput isReadOnly
style={{ width: "8ch" }}
className="col-1"
type="text"
readOnly
value={this.state.workflowFile.extension}
/>
</FormGroup>
Expand Down Expand Up @@ -190,15 +183,17 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
<FormGroup
fieldId="registry"
label="Image Registry"
helperText={`An Actions secret called "${registriesRes.registryPasswordSecretName}" containing `
+ `the password for this registry will be created.`
helperText={<div>
An Actions secret called &quot;<b>{registriesRes.registryPasswordSecretName}</b>&quot; containing
the password for this registry will be created.
</div>
}
>
<FormSelect id={this.imageRegistrySelectId} as="select"
// isValid={this.state.imageRegistryId != null}
<FormSelect id={this.imageRegistrySelectId}
onChange={(value) => {
this.setState({ imageRegistryId: value });
}}
className="col-6"
>
<option disabled selected value={undefined}>
Select an Image Registry
Expand Down Expand Up @@ -229,29 +224,31 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
helperTextInvalid="Port must be a number between 1024 and 65536."
>
<TextInput
className="col-6"
validated={validatePort(this.state.port) ? "success" : "error"}
value={this.state.port}
onChange={(value) => this.setState({ port: value })}
/>
</FormGroup>

<DataFetcher loadingDisplay="spinner" type="api" endpoint={ApiEndpoints.Cluster.Root}>{
(clusterRes: ApiResponses.ClusterState) => {
if (!clusterRes.connected) {
return (<></>);
}
<FormGroup fieldId="project" label="OpenShift Project">
<DataFetcher loadingDisplay="text" type="api" endpoint={ApiEndpoints.Cluster.Root}>{
(clusterRes: ApiResponses.ClusterState) => {
if (!clusterRes.connected) {
return (<></>);
}

return (
<FormGroup fieldId="project" label="OpenShift Project">
return (
<TextInput
className="col-6"
defaultValue={clusterRes.namespace}
readOnly
isReadOnly
/>
</FormGroup>
);
);
}
}
}
</DataFetcher>
</DataFetcher>
</FormGroup>
</CardBody>
</Card>
);
Expand Down Expand Up @@ -293,14 +290,15 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
return (
<div key={repo.repo.id}
className={classNames(
"row m-0 p-3 rounded",
{ "bg-darker": isEven, "bg-lighter": !isEven }
"d-flex align-items-center row m-0 p-3 rounded",
{ "bg-darker": !isEven }
)}
>
<FormInputCheck
<Radio
id={repo.repo.id + "-radio"}
name={repo.repo.id + "-radio"}
className="flex-grow-1"
checked={this.state.repo?.id === repo.repo.id}
type="radio"
isChecked={this.state.repo?.id === repo.repo.id}
onChange={(_checked: boolean) => {
this.setState({
repo: {
Expand All @@ -311,11 +309,10 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
},
});
}}
disabled={!repo.hasClusterSecrets}
isDisabled={!repo.hasClusterSecrets}
title={repo.hasClusterSecrets ? repo.repo.full_name : "Cannot select - Missing required secrets"}
>
{repo.repo.full_name}
</FormInputCheck>
label={repo.repo.full_name}
/>

{ repo.hasClusterSecrets ? "" :
<div className="col-4 centers">
Expand All @@ -326,7 +323,7 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa

<div className="col-1 d-flex align-items-center justify-content-end">
<Button
variant="secondary"
variant="tertiary"
title={repo.repo.html_url}
>
<ExternalLink
Expand All @@ -342,20 +339,19 @@ export default class AddWorkflowsPage extends React.Component<{}, AddWorkflowsPa
}
</div>

<div className="mt-4 mb-2 d-flex justify-content-between align-items-center">
<div>
<FormInputCheck
bold={false}
checked={this.state.overwriteExistingWorkflow}
type="checkbox"
onChange={(checked) => this.setState({ overwriteExistingWorkflow: checked })}
>
<div className="mt-4 d-flex justify-content-between align-items-center">
<Checkbox
id="overwrite-workflow-file"
isChecked={this.state.overwriteExistingWorkflow}
onChange={(checked) => this.setState({ overwriteExistingWorkflow: checked })}
label={
<>
Overwrite <code>
{WORKFLOWS_DIR + (this.state.workflowFile.name || "(invalid)") + this.state.workflowFile.extension}
</code> if it exists
</FormInputCheck>
</div>
<Button isLarge
{WORKFLOWS_DIR + (this.state.workflowFile.name || "(invalid)") + this.state.workflowFile.extension}
</code> if it exists
</>}
/>
<Button
disabled={this.state.repo == null}
onClick={async (_e) => {
this.setState({ isSubmitting: true, submissionResult: undefined });
Expand Down Expand Up @@ -487,15 +483,15 @@ function SubmissionStatusBanner(props: {
props.submissionResult.success ? (
<div className="centers">
<div className="w-75 btn-line even">
<Button variant="secondary" isLarge>
<Button variant="secondary">
<ExternalLink href={props.submissionResult.secretsUrl}>
<BtnBody icon={CommonIcons.GitHub} iconClasses="text-black" text="View Secrets"/>
<BtnBody icon={CommonIcons.GitHub} text="View Secrets"/>
</ExternalLink>
</Button>

<Button variant="secondary" isLarge>
<Button variant="secondary">
<ExternalLink href={props.submissionResult.workflowFileUrl}>
<BtnBody icon={CommonIcons.GitHub} iconClasses="text-black" text="View Workflow" />
<BtnBody icon={CommonIcons.GitHub} text="View Workflow" />
</ExternalLink>
</Button>
</div>
Expand Down
Loading

0 comments on commit c2c61b7

Please sign in to comment.