Updates to the UI based on UX designs. (#1795)

* Updates to the UI based on UX designs. Fixes #1762 * fix selenium tests Co-authored-by: Fabian Martinez <[email protected]>
Apicurio · Sep 3, 2021 · 0fe2ad9 · 0fe2ad9
1 parent 50ca186
commit 0fe2ad9
Show file tree

Hide file tree

Showing 26 changed files with 184 additions and 323 deletions.
diff --git a/integration-tests/testsuite/src/test/java/io/apicurio/tests/ui/RegistryUITester.java b/integration-tests/testsuite/src/test/java/io/apicurio/tests/ui/RegistryUITester.java
@@ -90,7 +90,11 @@ public String uploadArtifact(String groupId, String artifactId, ArtifactType typ
     }
 
     public UploadArtifactDialog openUploadArtifactDialog() {
-        selenium.clickOnItem(artifactsListPage.getUploadArtifactOpenDialogButton());
+        var btn = artifactsListPage.getEmptyUploadArtifactOpenDialogButton();
+        if (btn == null) {
+            btn = artifactsListPage.getTopUploadArtifactOpenDialogButton();
+        }
+        selenium.clickOnItem(btn);
         return artifactsListPage.getUploadArtifactDialogPage();
     }
 

diff --git a/integration-tests/testsuite/src/test/java/io/apicurio/tests/ui/pages/ArtifactsListPage.java b/integration-tests/testsuite/src/test/java/io/apicurio/tests/ui/pages/ArtifactsListPage.java
@@ -45,10 +45,26 @@ public ArtifactsListPage(SeleniumProvider selenium) {
     public void verifyIsOpen() throws Exception {
         selenium.getDriverWait().withTimeout(Duration.ofSeconds(30)).until(ExpectedConditions.and(
                 ExpectedConditions.urlContains("/ui/artifacts")));
-        assertNotNull(selenium.getWebElement(() -> getUploadArtifactOpenDialogButton()));
+        assertNotNull(selenium.getWebElement(() -> getArtifactsTab()));
     }
 
-    public WebElement getUploadArtifactOpenDialogButton() {
+    public WebElement getArtifactsTab() {
+        var tabs = selenium.getDriver().findElements(By.className("pf-c-tabs__item-text"));
+        if (tabs == null) {
+            return null;
+        }
+        return tabs.stream().filter(we -> we.getText().equals("Artifacts")).findFirst().orElse(null);
+    }
+
+    public WebElement getEmptyUploadArtifactOpenDialogButton() {
+        try {
+            return selenium.getDriver().findElement(byDataTestId("empty-btn-upload"));
+        } catch (NoSuchElementException e) {
+            return null;
+        }
+    }
+
+    public WebElement getTopUploadArtifactOpenDialogButton() {
         return selenium.getDriver().findElement(byDataTestId("btn-header-upload-artifact"));
     }
 

diff --git a/ui/src/app/components/header/index.ts b/ui/src/app/components/header/index.ts
@@ -15,4 +15,5 @@
  * limitations under the License.
  */
 
-export * from "./header";
+export * from "./header";
+export * from "./pageheader";
diff --git a/ui/src/app/components/header/pageheader.css b/ui/src/app/components/header/pageheader.css
diff --git a/ui/src/app/components/header/pageheader.tsx b/ui/src/app/components/header/pageheader.tsx
@@ -0,0 +1,89 @@
+/**
+ * @license
+ * Copyright 2021 JBoss Inc
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React from "react";
+import {Tab, Tabs, TabTitleText} from '@patternfly/react-core';
+import "./pageheader.css";
+import {PureComponent, PureComponentProps, PureComponentState} from "../baseComponent";
+import {IfAuth, IfFeature} from "../common";
+import {Services} from "../../../services";
+
+
+/**
+ * Properties
+ */
+// tslint:disable-next-line:no-empty-interface
+export interface RootPageHeaderProps extends PureComponentProps {
+    tabKey: number;
+}
+
+/**
+ * State
+ */
+// tslint:disable-next-line:no-empty-interface
+export interface RootPageHeaderState extends PureComponentState {
+}
+
+
+/**
+ * Models the page header for the Artifacts page.
+ */
+export class RootPageHeader extends PureComponent<RootPageHeaderProps, RootPageHeaderState> {
+
+    constructor(props: Readonly<RootPageHeaderProps>) {
+        super(props);
+    }
+
+    public render(): React.ReactElement {
+        let tabs: any[] = [
+            <Tab eventKey={0} title={<TabTitleText>Artifacts</TabTitleText>} />,
+            <Tab eventKey={1} title={<TabTitleText>Global Rules</TabTitleText>} />
+        ];
+        if (Services.getConfigService().featureRoleManagement()) {
+            tabs.push(
+                <Tab eventKey={2} title={<TabTitleText>Permissions</TabTitleText>} />
+            );
+        }
+        return (
+            <div>
+                <IfAuth isAdmin={true}>
+                    <Tabs activeKey={this.props.tabKey} onSelect={this.handleTabClick} children={tabs} />
+                </IfAuth>
+            </div>
+        );
+    }
+
+    protected initializeState(): RootPageHeaderState {
+        return {};
+    }
+
+    private handleTabClick = (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string): void => {
+        if (eventKey != this.props.tabKey) {
+            if (eventKey == 0) {
+                // navigate to artifacts
+                this.navigateTo(this.linkTo("/artifacts"))();
+            }
+            if (eventKey == 1) {
+                // navigate to global rules
+                this.navigateTo(this.linkTo("/rules"))();
+            }
+            if (eventKey == 2) {
+                // navigate to permissions page
+                this.navigateTo(this.linkTo("/roles"))();
+            }
+        }
+    }
+}
diff --git a/ui/src/app/pages/artifactVersion/artifactVersion.css b/ui/src/app/pages/artifactVersion/artifactVersion.css
@@ -11,4 +11,8 @@ div.artifact-page-tabs > ul > li.pf-c-tabs__item.pf-m-current > button.pf-c-tabs
     flex-grow: 1;
     display: flex;
     flex-direction: column;
-}
+}
+
+#artifact-page-tabs > ul > li:first-child {
+    margin-left: 20px;
+}
diff --git a/ui/src/app/pages/artifactVersion/artifactVersion.tsx b/ui/src/app/pages/artifactVersion/artifactVersion.tsx
@@ -17,14 +17,12 @@
 import React from "react";
 import "./artifactVersion.css";
 import {
-    Breadcrumb, BreadcrumbItem,
+    Breadcrumb,
+    BreadcrumbItem,
     Button,
-    Flex,
-    FlexItem,
     Modal,
     PageSection,
     PageSectionVariants,
-    Spinner,
     Tab,
     Tabs
 } from '@patternfly/react-core';
@@ -140,8 +138,9 @@ export class ArtifactVersionPage extends PageComponent<ArtifactVersionPageProps,
                 <IfFeature feature="breadcrumbs" is={true}>
                     <PageSection className="ps_header-breadcrumbs" variant={PageSectionVariants.light} children={breadcrumbs} />
                 </IfFeature>
-                <PageSection className="ps_artifacts-header" variant={PageSectionVariants.light}>
-                    <ArtifactVersionPageHeader versions={this.versions()}
+                <PageSection className="ps_artifact-version-header" variant={PageSectionVariants.light}>
+                    <ArtifactVersionPageHeader title={this.nameOrId()}
+                                               versions={this.versions()}
                                                version={this.versionParam()}
                                                onUploadVersion={this.onUploadVersion}
                                                onDeleteArtifact={this.onDeleteArtifact}
@@ -150,8 +149,9 @@ export class ArtifactVersionPage extends PageComponent<ArtifactVersionPageProps,
                 </PageSection>
                 <PageSection variant={PageSectionVariants.light} isFilled={true} padding={{default : "noPadding"}} className="artifact-details-main">
                     <Tabs className="artifact-page-tabs"
+                          id="artifact-page-tabs"
                           unmountOnExit={true}
-                          isFilled={true}
+                          isFilled={false}
                           activeKey={this.state.activeTabKey}
                           children={tabs}
                           onSelect={this.handleTabClick}
@@ -346,6 +346,13 @@ export class ArtifactVersionPage extends PageComponent<ArtifactVersionPageProps,
         Services.getDownloaderService().downloadToFS(content, contentType, fname);
     };
 
+    private nameOrId(): string {
+        if (!this.state.artifact) {
+            return "";
+        }
+        return this.state.artifact.name ? this.state.artifact.name : this.state.artifact.id;
+    }
+
     private versions(): SearchedVersion[] {
         return this.state.versions ? this.state.versions : [];
     }

diff --git a/ui/src/app/pages/artifactVersion/components/pageheader/pageheader.css b/ui/src/app/pages/artifactVersion/components/pageheader/pageheader.css
@@ -1,4 +1,7 @@
 #upload-version-button {
+}
+
+#delete-artifact-button {
     margin-left: 10px;
     margin-right: 10px;
-}
+}
diff --git a/ui/src/app/pages/artifactVersion/components/pageheader/pageheader.tsx b/ui/src/app/pages/artifactVersion/components/pageheader/pageheader.tsx
@@ -36,6 +36,7 @@ import {SearchedVersion} from "../../../../../models";
  * Properties
  */
 export interface ArtifactVersionPageHeaderProps extends PureComponentProps {
+    title: string;
     groupId: string;
     artifactId: string;
     onDeleteArtifact: () => void;
@@ -66,16 +67,16 @@ export class ArtifactVersionPageHeader extends PureComponent<ArtifactVersionPage
             <Flex className="example-border">
                 <FlexItem>
                     <TextContent>
-                        <Text component={TextVariants.h1}>Artifact Details</Text>
+                        <Text component={TextVariants.h1}>{ this.props.title }</Text>
                     </TextContent>
                 </FlexItem>
                 <FlexItem align={{ default : 'alignRight' }}>
                     <VersionSelector version={this.props.version} versions={this.props.versions}
                                      groupId={this.props.groupId} artifactId={this.props.artifactId} />
                     <IfAuth isDeveloper={true}>
                         <IfFeature feature="readOnly" isNot={true}>
-                            <Button id="upload-version-button" variant="secondary" data-testid="header-btn-upload-version" onClick={this.props.onUploadVersion}>Upload new version</Button>
-                            <Button id="delete-artifact-button" variant="danger" data-testid="header-btn-delete" onClick={this.props.onDeleteArtifact}><TrashIcon /></Button>
+                            <Button id="delete-artifact-button" variant="secondary" data-testid="header-btn-delete" onClick={this.props.onDeleteArtifact}>Delete</Button>
+                            <Button id="upload-version-button" variant="primary" data-testid="header-btn-upload-version" onClick={this.props.onUploadVersion}>Upload new version</Button>
                         </IfFeature>
                     </IfAuth>
                 </FlexItem>

diff --git a/ui/src/app/pages/artifactVersion/components/tabs/info.tsx b/ui/src/app/pages/artifactVersion/components/tabs/info.tsx
@@ -69,7 +69,7 @@ export class InfoTabContent extends PureComponent<InfoTabContentProps, InfoTabCo
                     <div className="title-and-type">
                         <Split>
                             <SplitItem className="type"><ArtifactTypeIcon type={this.props.artifact.type} /></SplitItem>
-                            <SplitItem className="title" isFilled={true}>{this.nameOrId()}</SplitItem>
+                            <SplitItem className="title" isFilled={true}>Version Metadata</SplitItem>
                             <SplitItem className="actions">
                                 <IfAuth isDeveloper={true}>
                                     <IfFeature feature="readOnly" isNot={true}>
@@ -83,8 +83,11 @@ export class InfoTabContent extends PureComponent<InfoTabContentProps, InfoTabCo
                             </SplitItem>
                         </Split>
                     </div>
-                    <div className="description">{this.description()}</div>
                     <div className="metaData">
+                        <div className="metaDataItem">
+                            <span className="label">Name</span>
+                            <span className="value">{this.props.artifact.name}</span>
+                        </div>
                         <If condition={this.isArtifactInGroup}>
                             <div className="metaDataItem">
                                 <span className="label">Group</span>
@@ -107,7 +110,16 @@ export class InfoTabContent extends PureComponent<InfoTabContentProps, InfoTabCo
                             <span className="label">Modified</span>
                             <span className="value"><Moment date={this.props.artifact.modifiedOn} fromNow={true} /></span>
                         </div>
+                        <div className="metaDataItem">
+                            <span className="label">Global ID</span>
+                            <span className="value">{this.props.artifact.globalId}</span>
+                        </div>
+                        <div className="metaDataItem">
+                            <span className="label">Content ID</span>
+                            <span className="value">{this.props.artifact.contentId}</span>
+                        </div>
                     </div>
+                    <div className="description">{this.description()}</div>
                     <div className="labels">
                         {
                             this.labels().map( label =>
@@ -120,7 +132,7 @@ export class InfoTabContent extends PureComponent<InfoTabContentProps, InfoTabCo
                                 data-testid="artifact-btn-download"
                                 title="Download artifact content"
                                 onClick={this.props.onDownloadArtifact}
-                                variant="primary"><DownloadIcon /> Download</Button>
+                                variant="secondary"><DownloadIcon /> Download</Button>
                     </div>
                 </FlexItem>
                 <FlexItem className="artifact-rules">

diff --git a/ui/src/app/pages/artifacts/artifacts.css b/ui/src/app/pages/artifacts/artifacts.css
@@ -1,8 +1,4 @@
-.ps_artifacts-header {
-    border-bottom: 1px solid #ddd;
-}
-
 .upload-artifact-modal .pf-c-modal-box__body {
     overflow-x: initial;
     overflow-y: visible;
-}
+}
diff --git a/ui/src/app/pages/artifacts/artifacts.tsx b/ui/src/app/pages/artifacts/artifacts.tsx
@@ -17,8 +17,7 @@
 
 import React from "react";
 import "./artifacts.css";
-import {Button, Flex, FlexItem, Modal, PageSection, PageSectionVariants, Spinner} from '@patternfly/react-core';
-import {ArtifactsPageHeader} from "./components/pageheader";
+import {Button, Modal, PageSection, PageSectionVariants} from '@patternfly/react-core';
 import {ArtifactList} from "./components/artifactList";
 import {PageComponent, PageProps, PageState} from "../basePage";
 import {ArtifactsPageToolbar} from "./components/toolbar";
@@ -29,6 +28,7 @@ import {If} from "../../components/common/if";
 import {ArtifactsSearchResults, CreateArtifactData, GetArtifactsCriteria, Paging, Services} from "../../../services";
 import {SearchedArtifact} from "../../../models";
 import {PleaseWaitModal} from "../../components/modals/pleaseWaitModal";
+import {RootPageHeader} from "../../components";
 
 
 /**
@@ -66,15 +66,16 @@ export class ArtifactsPage extends PageComponent<ArtifactsPageProps, ArtifactsPa
     public renderPage(): React.ReactElement {
         return (
             <React.Fragment>
-                <PageSection className="ps_artifacts-header" variant={PageSectionVariants.light}>
-                    <ArtifactsPageHeader onUploadArtifact={this.onUploadArtifact}/>
+                <PageSection className="ps_artifacts-header" variant={PageSectionVariants.light} padding={{ default: "noPadding" }}>
+                    <RootPageHeader tabKey={0} />
                 </PageSection>
                 <If condition={this.showToolbar}>
                     <PageSection variant={PageSectionVariants.light} padding={{default : "noPadding"}}>
                         <ArtifactsPageToolbar artifacts={this.results()}
                                               paging={this.state.paging}
                                               onPerPageSelect={this.onPerPageSelect}
                                               onSetPage={this.onSetPage}
+                                              onUploadArtifact={this.onUploadArtifact}
                                               onChange={this.onFilterChange}/>
                     </PageSection>
                 </If>

diff --git a/ui/src/app/pages/artifacts/components/index.ts b/ui/src/app/pages/artifacts/components/index.ts
@@ -17,6 +17,5 @@
 
 export * from "./artifactList";
 export * from "./empty";
-export * from "./pageheader";
 export * from "./toolbar";
 export * from "./uploadForm";
diff --git a/ui/src/app/pages/artifacts/components/pageheader/index.ts b/ui/src/app/pages/artifacts/components/pageheader/index.ts
diff --git a/ui/src/app/pages/artifacts/components/pageheader/pageheader.css b/ui/src/app/pages/artifacts/components/pageheader/pageheader.css