fix(patternfly): updated patternfly to the correct version

Our patternfly version was outdated. It has now been updated to the latest version. That required some other changes in our code.
aerogear · Sep 16, 2020 · 4a6d11d · 4a6d11d
1 parent d94dd1b
commit 4a6d11d
Show file tree

Hide file tree

Showing 12 changed files with 98 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "@aerogear/unifiedpush-admin-client": "0.1.9",
     "@fortawesome/fontawesome-free": "^5.13.0",
-    "@patternfly/react-core": "3.146.0",
+    "@patternfly/react-core": "4.18.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

diff --git a/src/application/ApplicationDetail/ApplicationDetail.tsx b/src/application/ApplicationDetail/ApplicationDetail.tsx
@@ -0,0 +1,39 @@
+import React, { Component, ReactNode } from 'react';
+import { PushApplication } from '@aerogear/unifiedpush-admin-client';
+import { Modal, Tabs, Tab } from '@patternfly/react-core';
+
+interface Props {
+  app?: PushApplication;
+  show: boolean;
+  onClose: (app: PushApplication) => void;
+}
+
+export class ApplicationDetail extends Component<Props> {
+  render = () => (
+    <Modal
+      title={this.props.app?.name || ''}
+      isOpen={this.props.show}
+      onClose={() => this.props.onClose && this.props.onClose(this.props.app!)}
+      // actions={[
+      //     <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
+      //         Confirm
+      //     </Button>,
+      //     <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
+      //         Cancel
+      //     </Button>
+      // ]}
+    >
+      <Tabs activeKey={0}>
+        <Tab eventKey={0} title="Users">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Tab>
+      </Tabs>
+    </Modal>
+  );
+}
diff --git a/src/application/ApplicationList/ApplicationList.tsx b/src/application/ApplicationList/ApplicationList.tsx
@@ -19,6 +19,7 @@ import {
 import { DeleteApplicationPage } from '../crud/DeleteApplicationPage';
 import { UpdateApplicationPage } from '../crud/UpdateApplicationPage';
 import { ApplicationListItem } from './ApplicationListItem';
+import { ApplicationDetail } from '../ApplicationDetail/ApplicationDetail';
 
 interface Props {
   apps: PushApplication[];
@@ -28,6 +29,7 @@ interface State {
   openCreateAppWizard: boolean;
   deleteApplicationPage: boolean;
   updateApplicationPage: boolean;
+  showAppDetailPage: boolean;
   selectedApp?: PushApplication;
   currentPage: number;
   totalApps: number;
@@ -40,6 +42,7 @@ export class ApplicationList extends Component<Props, State> {
       openCreateAppWizard: false,
       deleteApplicationPage: false,
       updateApplicationPage: false,
+      showAppDetailPage: false,
       currentPage: 0,
       totalApps: 0,
     };
@@ -58,11 +61,29 @@ export class ApplicationList extends Component<Props, State> {
         selectedApp: app,
       });
 
+    const showAppDetails = (app: PushApplication) =>
+      this.setState({
+        showAppDetailPage: true,
+        selectedApp: app,
+      });
+
+    const closeAllDialogs = () =>
+      this.setState({
+        showAppDetailPage: false,
+        deleteApplicationPage: false,
+        updateApplicationPage: false,
+      });
+
     return (
       <ApplicationListConsumer>
         {({ applications, refresh, total }: ContextInterface): ReactNode => {
           return (
             <>
+              <ApplicationDetail
+                app={this.state.selectedApp}
+                show={this.state.showAppDetailPage}
+                onClose={(app: PushApplication) => closeAllDialogs()}
+              />
               <UpdateApplicationPage
                 open={this.state.updateApplicationPage}
                 app={this.state.selectedApp}
@@ -117,11 +138,12 @@ export class ApplicationList extends Component<Props, State> {
                 </SplitItem>
               </Split>
               <DataList aria-label="Data list for Push Applications on the Server">
-                {applications.map(app => (
+                {applications.map((app: PushApplication) => (
                   <ApplicationListItem
                     app={app}
                     onEdit={editApp}
                     onDelete={deleteApp}
+                    onClick={showAppDetails}
                   />
                 ))}
               </DataList>

diff --git a/src/application/ApplicationList/ApplicationListItem.tsx b/src/application/ApplicationList/ApplicationListItem.tsx
@@ -22,6 +22,7 @@ interface Props {
   app: PushApplication;
   onEdit?: (app: PushApplication) => void;
   onDelete?: (app: PushApplication) => void;
+  onClick?: (app: PushApplication) => void;
 }
 
 export class ApplicationListItem extends Component<Props> {
@@ -30,6 +31,7 @@ export class ApplicationListItem extends Component<Props> {
       aria-labelledby={'item'}
       key={this.props.app.pushApplicationID}
       className="appList"
+      onClick={() => this.props.onClick && this.props.onClick(this.props.app)}
     >
       <DataListItemRow>
         <DataListItemCells
@@ -76,24 +78,27 @@ export class ApplicationListItem extends Component<Props> {
                     className="editBtn"
                     variant="secondary"
                     icon={<EditIcon />}
-                    onClick={() =>
-                      this.props.onEdit && this.props.onEdit(this.props.app)
-                    }
-                  >
-                    <EditIcon />
-                  </Button>
+                    onClick={evt => {
+                      evt.stopPropagation();
+                      return (
+                        this.props.onEdit && this.props.onEdit(this.props.app)
+                      );
+                    }}
+                  />
                 </ListItem>
                 <ListItem>
                   <Button
                     className="deleteBtn"
                     variant="danger"
-                    icon={TrashIcon}
-                    onClick={() =>
-                      this.props.onDelete && this.props.onDelete(this.props.app)
-                    }
-                  >
-                    <TrashIcon />
-                  </Button>
+                    icon={<TrashIcon />}
+                    onClick={evt => {
+                      evt.stopPropagation();
+                      return (
+                        this.props.onDelete &&
+                        this.props.onDelete(this.props.app)
+                      );
+                    }}
+                  />
                 </ListItem>
               </List>
             </DataListCell>,

diff --git a/src/application/crud/CreateApplicationPage.tsx b/src/application/crud/CreateApplicationPage.tsx
@@ -68,7 +68,6 @@ export class CreateApplicationPage extends Component<Props, State> {
                 placeholder={'Application name'}
                 type="text"
                 aria-label="Text Input for Application Name"
-                css={''}
               />
               <Button
                 variant="primary"

diff --git a/src/application/crud/DeleteApplicationPage.tsx b/src/application/crud/DeleteApplicationPage.tsx
@@ -46,10 +46,10 @@ export class DeleteApplicationPage extends Component<Props, State> {
   render(): React.ReactNode {
     return this.props.app ? (
       <Modal
-        isSmall
         title="Delete Application"
         isOpen={this.props.open}
         onClose={this.props.close}
+        variant={'small'}
       >
         <Form className="dialog-form">
           <FormGroup
@@ -68,7 +68,6 @@ export class DeleteApplicationPage extends Component<Props, State> {
               className="formInput"
               onChange={value => this.setState({ name: value })}
               isRequired
-              css={''}
             />
           </FormGroup>
           <div className="formButtons">

diff --git a/src/application/crud/UpdateApplicationPage.tsx b/src/application/crud/UpdateApplicationPage.tsx
@@ -42,10 +42,10 @@ export class UpdateApplicationPage extends Component<Props, State> {
   render(): React.ReactNode {
     return this.props.app ? (
       <Modal
-        isSmall
         title="Edit Application name"
         isOpen={this.props.open}
         onClose={this.props.close}
+        variant={'small'}
       >
         <Form className="dialog-form">
           <FormGroup fieldId="simple-form-title" helperText="Enter a new name">
@@ -54,7 +54,6 @@ export class UpdateApplicationPage extends Component<Props, State> {
               defaultValue={this.props.app?.name}
               onChange={value => this.setState({ name: value })}
               isRequired
-              css={''}
             />
           </FormGroup>
           <div className="formButtons">

diff --git a/src/landing/components/ActionBox.tsx b/src/landing/components/ActionBox.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Component } from 'react';
 
-import { Card, CardHead, CardHeader, CardBody } from '@patternfly/react-core';
+import { Card, CardTitle, CardHeader, CardBody } from '@patternfly/react-core';
 
 interface Props {
   icon?: string;
@@ -18,15 +18,20 @@ export class ActionBox extends Component<Props> {
         <div className="ups-number">
           <span>{this.props.index}</span>
         </div>
-        <CardHead className={'CardHead'}>
+        <CardTitle className={'CardHead'}>
           <div className={'ActionBox-content'}>
             {this.props.icon ? (
               <i className={`fas ${this.props.icon} fa-3x muted`} />
             ) : null}
-            <CardHeader>{this.props.title}</CardHeader>
-            <CardBody className="small">{this.props.description}</CardBody>
           </div>
-        </CardHead>
+        </CardTitle>
+        <CardHeader>
+          <div className={'ActionBox-content'}>{this.props.title}</div>
+        </CardHeader>
+
+        <CardBody className="small">
+          <div className={'ActionBox-content'}>{this.props.description}</div>
+        </CardBody>
       </Card>
     );
   };

diff --git a/src/landing/components/GeneralStats.tsx b/src/landing/components/GeneralStats.tsx
@@ -12,7 +12,7 @@ export class GeneralStats extends Component<Props> {
       <div className={'apps-dashboard'}>
         <Title
           headingLevel="h1"
-          size="xs"
+          size="md"
           style={{ paddingTop: 51, paddingLeft: 20, paddingBottom: 21 }}
         >
           General Statistics

diff --git a/src/landing/components/NoApplicationsPage.tsx b/src/landing/components/NoApplicationsPage.tsx
@@ -56,7 +56,7 @@ export class NoApplicationsPage extends Component<{}, State> {
               </PageSection>
               <Divider />
               <LightPageSection>
-                <Grid sm={3} gutter={'sm'}>
+                <Grid sm={3} hasGutter>
                   <ActionBox
                     first
                     index={1}

diff --git a/src/styles/app-list.scss b/src/styles/app-list.scss
@@ -1,3 +1,4 @@
+@import 'globals.scss' ;
 .title {
   font-size: 22px;
   color: rgb(85,85,85);

diff --git a/src/styles/landing-page.scss b/src/styles/landing-page.scss
@@ -27,7 +27,7 @@
   font-family: "Font Awesome 5 Free", serif;
   font-weight: 900;
   position: absolute;
-  left: -17px;
+  left: -13px;
   top: 100px;
   color: $lightColor;
   z-index: auto;
@@ -40,11 +40,9 @@
   border-style: solid;
   background-color: $offWhite;
   box-shadow: 5px 5px 8px $shadowBlur;
-
 }
 
 .ActionBox-content {
-  margin-top: 30px;
   text-align: center;
   width: 100%;
 }
@@ -55,7 +53,7 @@
 }
 
 .CardHead {
-  margin-top: 5px;
+  margin-top: 30px;
 }
 
 .muted {