Skip to content

Commit

Permalink
Upgrade dynamic-demo-plugin to PatternFly 6
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhamilto
rhamilto committed Jan 15, 2025
1 parent 29a7a69 commit dbec7b0
Show file tree
Hide file tree
Showing 14 changed files with 301 additions and 295 deletions.
11 changes: 7 additions & 4 deletions dynamic-demo-plugin/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,9 @@
"@openshift-console/dynamic-plugin-sdk": "file:../frontend/packages/console-dynamic-plugin-sdk/dist/core",
"@openshift-console/dynamic-plugin-sdk-webpack": "file:../frontend/packages/console-dynamic-plugin-sdk/dist/webpack",
"@openshift-console/plugin-shared": "file:../frontend/packages/console-plugin-shared/dist",
"@patternfly/react-core": "5.1.1",
"@patternfly/react-icons": "5.1.1",
"@patternfly/react-table": "5.1.1",
"@patternfly/react-core": "^6.1.1-prerelease.1",
"@patternfly/react-icons": "^6.1.0",
"@patternfly/react-table": "^6.1.0",
"@types/react": "16.8.13",
"@types/react-measure": "^2.0.6",
"@types/react-router": "^5.1.20",
Expand Down Expand Up @@ -76,6 +76,9 @@
},
"disableStaticPlugins": [
"@console/demo-plugin"
]
],
"resoltuions": {
"@patternfly/react-core": "^6.1.1-prerelease.1"
}
}
}
14 changes: 9 additions & 5 deletions dynamic-demo-plugin/src/components/APIServerEvents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {
ResourceEventStream,
K8sResourceCommon,
} from '@openshift-console/dynamic-plugin-sdk';
import { Page, Title } from '@patternfly/react-core';
import { PageSection, Title } from '@patternfly/react-core';
import * as React from 'react';

const apiServerResource: WatchK8sResource = {
Expand All @@ -18,10 +18,14 @@ const APIServerEvents: React.FC = () => {
const [object, loaded, loadError] = useK8sWatchResource<K8sResourceCommon>(apiServerResource);

return (
<Page>
<Title headingLevel="h1">API Server Events</Title>
{loaded && !loadError && <ResourceEventStream resource={object} />}
</Page>
<>
<PageSection>
<Title headingLevel="h1">API Server Events</Title>
</PageSection>
<PageSection>
{loaded && !loadError && <ResourceEventStream resource={object} />}
</PageSection>
</>
);
};

Expand Down
31 changes: 13 additions & 18 deletions dynamic-demo-plugin/src/components/ErrorBoundary/SampleErrorBoundaryPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useTranslation } from "react-i18next";
import { Button, Card, CardBody, CardTitle, Page, PageSection, Title } from "@patternfly/react-core";
import { Button, Card, CardBody, CardTitle, PageSection, Title } from "@patternfly/react-core";
import { ErrorBoundaryFallbackPage } from '@openshift-console/dynamic-plugin-sdk';
import { DemoErrorBoundary } from './DemoErrorBoundary';

Expand All @@ -15,23 +15,18 @@ const SampleErrorBoundaryPage: React.FC = () => {

return (
<DemoErrorBoundary FallbackComponent={ErrorBoundaryFallbackPage}>
<Page
additionalGroupedContent={
<PageSection variant="light">
<Title headingLevel="h1">{t('Sample Error Boundary Page')}</Title>
</PageSection>
}
>
<PageSection>
<Card>
<CardTitle>{t("Create an exception")}</CardTitle>
<CardBody>
<Button onClick={onClick}>{t('Launch buggy component')}</Button>
{isBuggyComponentRendered && <BuggyComponent/>}
</CardBody>
</Card>
</PageSection>
</Page>
<PageSection>
<Title headingLevel="h1">{t('Sample Error Boundary Page')}</Title>
</PageSection>
<PageSection>
<Card>
<CardTitle>{t("Create an exception")}</CardTitle>
<CardBody>
<Button onClick={onClick}>{t('Launch buggy component')}</Button>
{isBuggyComponentRendered && <BuggyComponent/>}
</CardBody>
</Card>
</PageSection>
</DemoErrorBoundary>
);
};
Expand Down
8 changes: 3 additions & 5 deletions dynamic-demo-plugin/src/components/ExampleNamespacedPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,7 @@ import {
Card,
CardBody,
Flex,
Page,
PageSection,
PageSectionVariants,
Title,
} from '@patternfly/react-core';
import { NamespaceBar } from '@openshift-console/dynamic-plugin-sdk';
Expand All @@ -16,8 +14,8 @@ const NamespacePageContent = ({ namespace }: { namespace?: string }) => {
const { t } = useTranslation('plugin__console-demo-plugin');

return (
<Page>
<PageSection variant={PageSectionVariants.light}>
<>
<PageSection>
<Title headingLevel="h1">{t('Example page with a namespace bar')}</Title>
</PageSection>
<PageSection>
Expand All @@ -35,7 +33,7 @@ const NamespacePageContent = ({ namespace }: { namespace?: string }) => {
</CardBody>
</Card>
</PageSection>
</Page>
</>
);
};

Expand Down
15 changes: 5 additions & 10 deletions dynamic-demo-plugin/src/components/ExamplePage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Hint,
HintBody,
HintTitle,
Page,
PageSection,
Stack,
StackItem,
Expand All @@ -28,14 +27,10 @@ export const ExamplePage: React.FC<{ title: string }> = ({ title }) => {
});

return (
<Page
additionalGroupedContent={
<PageSection variant="light">
<Title headingLevel="h1" data-test="title">{title}</Title>
</PageSection>
}
groupProps={{ stickyOnBreakpoint: { 'default': 'top' }}}
>
<>
<PageSection>
<Title headingLevel="h1" data-test="title">{title}</Title>
</PageSection>
<PageSection>
<Stack hasGutter>
<AlertGroup>
Expand Down Expand Up @@ -79,7 +74,7 @@ export const ExamplePage: React.FC<{ title: string }> = ({ title }) => {
</StackItem>
</Stack>
</PageSection>
</Page>
</>
);
};

Expand Down
18 changes: 7 additions & 11 deletions dynamic-demo-plugin/src/components/ExampleProxyPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,19 @@ import {
Card,
CardBody,
CardTitle,
Page,
PageSection,
Title,
} from "@patternfly/react-core";

const ExampleProxyPage: React.FC = () => {
const { t } = useTranslation("plugin__console-demo-plugin");
return (
<Page
additionalGroupedContent={
<PageSection variant="light">
<Title headingLevel="h1">
{t("Dynamic Plugin Proxy Services example")}
</Title>
</PageSection>
}
>
<>
<PageSection>
<Title headingLevel="h1">
{t("Dynamic Plugin Proxy Services example")}
</Title>
</PageSection>
<PageSection>
<Card>
<CardTitle>{t("Proxy: consoleFetchJSON")}</CardTitle>
Expand All @@ -31,7 +27,7 @@ const ExampleProxyPage: React.FC = () => {
</CardBody>
</Card>
</PageSection>
</Page>
</>
);
};

Expand Down
75 changes: 37 additions & 38 deletions dynamic-demo-plugin/src/components/ExtensionConsumer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import {
DescriptionListGroup,
DescriptionListTerm,
DescriptionListDescription,
Page,
PageSection,
Title,
Stack,
} from "@patternfly/react-core";

const ExtensionConsumer: React.FC = () => {
Expand All @@ -26,45 +26,44 @@ const ExtensionConsumer: React.FC = () => {
);

return extensions.length ? (
<Page
additionalGroupedContent={
<PageSection variant="light">
<Title headingLevel="h1" data-test="test-consumer-title">
{t("Extensions of type Console.flag/Model")}
</Title>
</PageSection>
}
>
<>
<PageSection>
{extensions.map((ext) => (
<Card key={ext.properties.flag}>
<CardTitle>{ext.properties.flag}</CardTitle>
<CardBody>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>{t("Group")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.group}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t("Version")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.version}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t("Kind")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.kind}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardBody>
</Card>
))}
<Title headingLevel="h1" data-test="test-consumer-title">
{t("Extensions of type Console.flag/Model")}
</Title>
</PageSection>
</Page>
<PageSection>
<Stack hasGutter>
{extensions.map((ext) => (
<Card key={ext.properties.flag}>
<CardTitle>{ext.properties.flag}</CardTitle>
<CardBody>
<DescriptionList>
<DescriptionListGroup>
<DescriptionListTerm>{t("Group")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.group}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t("Version")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.version}
</DescriptionListDescription>
</DescriptionListGroup>
<DescriptionListGroup>
<DescriptionListTerm>{t("Kind")}</DescriptionListTerm>
<DescriptionListDescription>
{ext.properties.model.kind}
</DescriptionListDescription>
</DescriptionListGroup>
</DescriptionList>
</CardBody>
</Card>
))}
</Stack>
</PageSection>
</>
) : null;
};

Expand Down
Loading

0 comments on commit dbec7b0

Please sign in to comment.