Skip to content

Commit

Permalink
Merge branch 'main' into content-audit
Browse files Browse the repository at this point in the history
  • Loading branch information
edonehoo authored May 20, 2024
2 parents 4e065a3 + c089767 commit f5a65e9
Show file tree
Hide file tree
Showing 38 changed files with 1,482 additions and 380 deletions.
97 changes: 97 additions & 0 deletions .github/upload-preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
const fs = require('fs');
const path = require('path');
const { Octokit } = require('@octokit/rest');
const octokit = new Octokit({ auth: process.env.GH_PR_TOKEN });
const surge = require('surge');
const publishFn = surge().publish();

// From github actions
const ghrepo = process.env.GITHUB_REPOSITORY || '';

const owner = process.env.CIRCLE_PROJECT_USERNAME || ghrepo.split('/')[0]; // patternfly
const repo = process.env.CIRCLE_PROJECT_REPONAME || ghrepo.split('/')[1];
const prnum = process.env.CIRCLE_PR_NUMBER || process.env.GH_PR_NUM;
const prbranch = process.env.CIRCLE_BRANCH || process.env.GITHUB_REF.split('/').pop();

const uploadFolder = process.argv[2];
if (!uploadFolder) {
console.log('Usage: upload-preview uploadFolder');
process.exit(1);
}

const uploadFolderName = path.basename(uploadFolder);
let uploadURL = `${repo}-${prnum ? `pr-topology-${prnum}` : prbranch}`.replace(/[\/|\.]/g, '-');

switch(uploadFolderName) {
case 'coverage':
uploadURL += '-a11y.surge.sh';
break;
case 'public':
if (!prnum && prbranch === 'main') {
uploadURL = 'https://pf-extensions.surge.sh/';
}
else {
uploadURL += '.surge.sh';
}
break;
default:
uploadURL += `-${uploadFolderName}`;
uploadURL += '.surge.sh';
break;
}

publishFn({
project: uploadFolder,
p: uploadFolder,
domain: uploadURL,
d: uploadURL,
e: 'https://surge.surge.sh',
endpoint: 'https://surge.surge.sh'
});

function tryAddComment(comment, commentBody) {
if (!commentBody.includes(comment)) {
return comment;
}
return '';
}

if (prnum) {
octokit.issues.listComments({
owner,
repo,
issue_number: prnum
})
.then(res => res.data)
.then(comments => {
let commentBody = '';
const existingComment = comments.find(comment => comment.user.login === 'patternfly-build');
if (existingComment) {
commentBody += existingComment.body.trim();
commentBody += '\n\n';
}

if (uploadFolderName === 'public') {
commentBody += tryAddComment(`Preview: https://${uploadURL}`, commentBody);
}
else if (uploadFolderName === 'coverage') {
commentBody += tryAddComment(`A11y report: https://${uploadURL}`, commentBody);
}

if (existingComment) {
octokit.issues.updateComment({
owner,
repo,
comment_id: existingComment.id,
body: commentBody
}).then(() => console.log('Updated comment!'));
} else {
octokit.issues.createComment({
owner,
repo,
issue_number: prnum,
body: commentBody
}).then(() => console.log('Created comment!'));
}
});
}
2 changes: 1 addition & 1 deletion .github/workflows/extensions.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,5 @@ jobs:
steps:
- uses: actions/add-to-project@v0.3.0
with:
project-url: https://github.com/orgs/patternfly/projects/12
project-url: https://github.com/orgs/patternfly/projects/7
github-token: ${{ secrets.GH_PROJECTS}}
53 changes: 53 additions & 0 deletions .github/workflows/pr-preview.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
name: pr-preview
on: pull_request_target
jobs:
build-upload:
runs-on: ubuntu-latest
env:
SURGE_LOGIN: ${{ secrets.SURGE_LOGIN }}
SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
GH_PR_TOKEN: ${{ secrets.GH_PR_TOKEN }}
GH_PR_NUM: ${{ github.event.number }}
steps:
- uses: actions/checkout@v2
# Yes, we really want to checkout the PR
- run: |
git fetch origin pull/$GH_PR_NUM/head:tmp
git checkout tmp
- run: |
git rev-parse origin/main
git rev-parse HEAD
git rev-parse origin/main..HEAD
git log origin/main..HEAD --format="%b"
# Yes, we really want to checkout the PR
# Injected by generate-workflows.js
- uses: actions/setup-node@v1
with:
node-version: '16'
- uses: actions/cache@v2
id: yarn-cache
name: Load npm deps from cache
with:
path: '**/node_modules'
key: ${{ runner.os }}-yarn-14-${{ hashFiles('yarn.lock') }}
- run: yarn install --frozen-lockfile
if: steps.yarn-cache.outputs.cache-hit != 'true'
- run: yarn lint:js
name: Lint JS
if: always()
- run: yarn lint:md
name: Lint MD
if: always()
- run: yarn build
name: Build component groups
- uses: actions/cache@v2
id: docs-cache
name: Load webpack cache
with:
path: '.cache'
key: ${{ runner.os }}-v4-${{ hashFiles('yarn.lock') }}
- run: yarn build:docs
name: Build docs
- run: node .github/upload-preview.js packages/module/public
name: Upload docs
if: always()
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -232,4 +232,4 @@ yarn start:demo-app:hot
![Demo app landing page.](packages/module/patternfly-docs/content/examples/img/topology-demo-app.png)

## Need help?
If you find a bug, have a request, or have any questions about Topology that aren't answered in our documentation, please [reach out to us on Slack.](https://patternfly.slack.com/archives/CK7URGJ2W)
If you find a bug, have a request, or have any questions about Topology that aren't answered in our documentation, please [reach out to us on Slack.](https://patternfly.slack.com/archives/CK7URGJ2W)
5 changes: 2 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@testing-library/dom": "9.0.0",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"@octokit/rest": "^18.0.0",
"babel-jest": "^29.2.2",
"concurrently": "^5.3.0",
"eslint": "8.22.0",
Expand All @@ -55,9 +56,7 @@
"react-dom": "^18",
"serve": "^14.1.2",
"surge": "^0.23.1",
"typedoc": "0.23"
},
"resolutions": {
"typedoc": "0.23",
"@types/react": "^18"
}
}
10 changes: 9 additions & 1 deletion packages/demo-app-ts/src/Demos.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { PipelineTasksDemo } from './demos/pipelinesDemo/PipelineTasksDemo';
import { PipelineLayoutDemo } from './demos/pipelinesDemo/PipelineLayoutDemo';
import { PipelineGroupsDemo } from './demos/pipelineGroupsDemo/PipelineGroupsDemo';
import {
PipelineGroupsComplexDemo,
PipelineGroupsDemo
} from './demos/pipelineGroupsDemo/PipelineGroupsDemo';
import { Basics } from './demos/Basics';
import { StyleEdges, StyleGroups, StyleLabels, StyleNodes } from './demos/stylesDemo/Styles';
import { Selection } from './demos/Selection';
Expand Down Expand Up @@ -56,6 +59,11 @@ export const Demos: DemoInterface[] = [
name: 'Pipeline Groups Layout',
componentType: PipelineGroupsDemo,
},
{
id: 'pipelines-groups-complex-layout-demo',
name: 'Pipeline Groups Complex Layout',
componentType: PipelineGroupsComplexDemo,
},
]
},
{
Expand Down
36 changes: 20 additions & 16 deletions packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskEdge.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,28 @@
import * as React from 'react';
import { observer } from 'mobx-react';
import { Edge, EdgeTerminalType, GraphElement, TaskEdge } from '@patternfly/react-topology';
import {
DEFAULT_SPACER_NODE_TYPE,
Edge,
EdgeTerminalType,
GraphElement,
TaskEdge,
WithSelectionProps
} from '@patternfly/react-topology';

interface DemoTaskEdgeProps {
interface DemoTaskEdgeProps extends WithSelectionProps {
element: GraphElement;
}

const DemoTaskEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => {

const isDependency = (element as Edge).getTarget().getData()?.isDependency;

return (
<TaskEdge
element={element as Edge}
endTerminalType={
isDependency ? EdgeTerminalType.directional : EdgeTerminalType.none
}
{...props}
/>
);
};
const DemoTaskEdge: React.FunctionComponent<DemoTaskEdgeProps> = ({ element, ...props }) => (
<TaskEdge
element={element as Edge}
endTerminalType={
(element as Edge).getTarget().getType() !== DEFAULT_SPACER_NODE_TYPE
? EdgeTerminalType.directional
: undefined
}
{...props}
/>
);

export default observer(DemoTaskEdge);
71 changes: 34 additions & 37 deletions packages/demo-app-ts/src/demos/pipelineGroupsDemo/DemoTaskGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,28 @@
import * as React from 'react';
import { observer } from 'mobx-react';
import {
AnchorEnd,
DagreLayoutOptions,
DefaultTaskGroup,
GraphElement,
isNode,
LabelPosition,
Node,
TOP_TO_BOTTOM,
useAnchor,
WithContextMenuProps,
WithSelectionProps,
ShapeProps,
WithDragNodeProps,
EdgeCreationTypes,
useHover,
ScaleDetailsLevel,
DEFAULT_LAYER,
Layer,
TOP_LAYER,
GROUPS_LAYER,
RunStatus
} from '@patternfly/react-topology';
import TaskGroupSourceAnchor from './TaskGroupSourceAnchor';
import TaskGroupTargetAnchor from './TaskGroupTargetAnchor';
import { DEFAULT_TASK_HEIGHT, GROUP_TASK_WIDTH } from './createDemoPipelineGroupsNodes';

type DemoTaskGroupProps = {
element: GraphElement;
collapsible?: boolean;
collapsedWidth?: number;
collapsedHeight?: number;
onCollapseChange?: (group: Node, collapsed: boolean) => void;
getCollapsedShape?: (node: Node) => React.FunctionComponent<ShapeProps>;
collapsedShadowOffset?: number; // defaults to 10
} & WithContextMenuProps &
WithDragNodeProps &
WithSelectionProps;

export const DEFAULT_TASK_WIDTH = 180;
export const DEFAULT_TASK_HEIGHT = 32;
} & WithSelectionProps;

const getEdgeCreationTypes = (): EdgeCreationTypes => ({
edgeType: 'edge',
Expand All @@ -41,29 +31,36 @@ const getEdgeCreationTypes = (): EdgeCreationTypes => ({

const DemoTaskGroup: React.FunctionComponent<DemoTaskGroupProps> = ({ element, ...rest }) => {
const verticalLayout = (element.getGraph().getLayoutOptions?.() as DagreLayoutOptions)?.rankdir === TOP_TO_BOTTOM;
const [hover, hoverRef] = useHover();
const detailsLevel = element.getGraph().getDetailsLevel();
const data = element.getData();

useAnchor(
React.useCallback((node: Node) => new TaskGroupSourceAnchor(node, verticalLayout), [verticalLayout]),
AnchorEnd.source
);
useAnchor(
React.useCallback((node: Node) => new TaskGroupTargetAnchor(node, verticalLayout), [verticalLayout]),
AnchorEnd.target
);
if (!isNode(element)) {
return null;
}
const groupLayer = element.isCollapsed() ? DEFAULT_LAYER : GROUPS_LAYER;

return (
<DefaultTaskGroup
labelPosition={verticalLayout ? LabelPosition.top : LabelPosition.bottom}
collapsible
collapsedWidth={DEFAULT_TASK_WIDTH}
collapsedHeight={DEFAULT_TASK_HEIGHT}
element={element as Node}
recreateLayoutOnCollapseChange
getEdgeCreationTypes={getEdgeCreationTypes}
{...rest}
/>
<Layer id={detailsLevel !== ScaleDetailsLevel.high && hover ? TOP_LAYER : groupLayer}>
<g ref={hoverRef}>
<DefaultTaskGroup
labelPosition={verticalLayout ? LabelPosition.top : LabelPosition.bottom}
collapsible
collapsedWidth={GROUP_TASK_WIDTH}
collapsedHeight={DEFAULT_TASK_HEIGHT}
element={element as Node}
recreateLayoutOnCollapseChange
getEdgeCreationTypes={getEdgeCreationTypes}
scaleNode={hover && detailsLevel !== ScaleDetailsLevel.high}
showLabel={detailsLevel === ScaleDetailsLevel.high}
hideDetailsAtMedium
showStatusState
status={data.status}
hiddenDetailsShownStatuses={[RunStatus.Succeeded]}
{...rest}
/>
</g>
</Layer>
);
};

Expand Down
18 changes: 9 additions & 9 deletions packages/demo-app-ts/src/demos/pipelineGroupsDemo/OptionsBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,6 @@ const OptionsBar: React.FC = observer(() => {
<ToolbarItem>
<Text className="pf-u-mr-sm">Layout:</Text>
</ToolbarItem>
<ToolbarItem>
<Radio
id="horizontal-layout-radio"
name="horizontalLayout"
isChecked={!pipelineOptions.verticalLayout}
onChange={() => pipelineOptions.setVerticalLayout(false)}
label="Horizontal"
/>
</ToolbarItem>
<ToolbarItem>
<Radio
id="vertical-layout-radio"
Expand All @@ -29,6 +20,15 @@ const OptionsBar: React.FC = observer(() => {
label="Vertical"
/>
</ToolbarItem>
<ToolbarItem>
<Radio
id="horizontal-layout-radio"
name="horizontalLayout"
isChecked={!pipelineOptions.verticalLayout}
onChange={() => pipelineOptions.setVerticalLayout(false)}
label="Horizontal"
/>
</ToolbarItem>
</>
);
});
Expand Down
Loading

0 comments on commit f5a65e9

Please sign in to comment.