Merge pull request #34 from weaveworks/WGE32-style-apps

WGE32 Style Apps to look more like what we have in WE

ui-cra/package.json

@@ -7,9 +7,10 @@
  "@fortawesome/fontawesome-svg-core": "^1.2.35",
  "@fortawesome/free-solid-svg-icons": "^5.15.3",
  "@fortawesome/react-fontawesome": "^0.1.14",
- "@material-ui/core": "^4.11.4",
+ "@material-ui/core": "^4.12.3",
  "@material-ui/icons": "^4.11.2",
  "@material-ui/lab": "^4.0.0-alpha.58",
+ "@material-ui/system": "^4.12.1",
  "@primer/octicons-react": "9.6.0",
  "@rjsf/core": "^2.5.1",
  "@rjsf/material-ui": "^2.5.1",
@@ -28,7 +29,7 @@
  "@types/react-jsonschema-form": "^1.7.5",
  "@types/react-router-dom": "^5.1.7",
  "@types/styled-components": "^5.1.9",
- "@weaveworks/weave-gitops": "0.0.4",
+ "@weaveworks/weave-gitops": "0.2.4-patch1",
  "d3-scale": "3.2.1",
  "git-url-parse": "11.1.2",
  "http-proxy-middleware": "^2.0.0",

ui-cra/src/components/Applications/Detail.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import { PageTemplate } from '../Layout/PageTemplate';
+import { SectionHeader } from '../Layout/SectionHeader';
+import { WGContentWrapper } from '../Layout/ContentWrapper';
+import { ApplicationDetail, useApplications } from '@weaveworks/weave-gitops';
+
+const WGApplicationDetail: FC = () => {
+ const { applications } = useApplications();
+ const applicationsCount = applications.length;
+
+ const queryParams = new URLSearchParams(window.location.search);
+ const name = queryParams.get('name');
+
+ return (
+ <PageTemplate documentTitle="WeGO · Application Detail">
+ <SectionHeader
+ path={[
+ {
+ label: 'Applications',
+ url: '/applications',
+ count: applicationsCount,
+ },
+ { label: `${name}` },
+ ]}
+ />
+ <WGContentWrapper>
+ <ApplicationDetail name={name || ''} />
+ </WGContentWrapper>
+ </PageTemplate>
+ );
+};
+
+export default WGApplicationDetail;

ui-cra/src/components/Applications/index.tsx

@@ -1,20 +1,29 @@
 import React, { FC } from 'react';
 import { PageTemplate } from '../Layout/PageTemplate';
-import useClusters from '../../contexts/Clusters';
 import { SectionHeader } from '../Layout/SectionHeader';
-import { ContentWrapper } from '../Layout/ContentWrapper';
+import { WGContentWrapper } from '../Layout/ContentWrapper';
+import { Applications, useApplications } from '@weaveworks/weave-gitops';
 
-const TemplatesDashboard: FC = ({ children }) => {
- const clustersCount = useClusters().count;
+const WGApplicationsDashboard: FC = () => {
+ const { applications } = useApplications();
+ const applicationsCount = applications.length;
 
  return (
- <PageTemplate documentTitle="WeGO · Templates">
+ <PageTemplate documentTitle="WeGO · Applications">
  <SectionHeader
- path={[{ label: 'Clusters', url: '/clusters', count: clustersCount }]}
+ path={[
+ {
+ label: 'Applications',
+ url: '/applications',
+ count: applicationsCount,
+ },
+ ]}
  />
- <ContentWrapper>{children}</ContentWrapper>
+ <WGContentWrapper>
+ <Applications />
+ </WGContentWrapper>
  </PageTemplate>
  );
 };
 
-export default TemplatesDashboard;
+export default WGApplicationsDashboard;

ui-cra/src/components/Clusters/Connect/ConfirmDeletion.tsx

@@ -9,6 +9,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { OnClickAction } from '../../Action';
+import { HandleFinish } from '../../Shared';
 
 const ButtonText = styled.span`
  margin: 0 4px;
@@ -19,14 +20,16 @@ const ConfirmDeletion: FC<{
  onClickRemove: Function;
  title: string;
  formData?: any;
-}> = ({ clusters, title, onClickRemove, formData }) => {
+ onFinish: HandleFinish;
+}> = ({ clusters, title, onClickRemove, formData, onFinish }) => {
  const [open, setOpen] = useState(false);
 
  const handleClickOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);
  const handleClickRemove = () => {
  onClickRemove({ clusters, formData });
  setOpen(false);
+ onFinish({ success: true, message: '' });
  };
 
  return (

ui-cra/src/components/Clusters/Connect/ConnectDialog.tsx

@@ -46,7 +46,6 @@ export const ConnectClusterDialog: FC<Props> = ({ cluster, onFinish }) => {
  />
  ) : null}
  </DialogTitle>
-
  <DialogContent>
  <ConnectClusterWizard
  connecting={!cluster.id}

ui-cra/src/components/Clusters/Connect/ConnectWizard.tsx

@@ -120,6 +120,7 @@ const PAGES = {
  <ClusterDisconnectionInstructions
  formState={formState}
  setFormState={setFormState}
+ onFinish={onFinish}
  />
  ),
  },
@@ -215,9 +216,7 @@ export const ConnectClusterWizard: FC<CreateModelProps> = ({
  {formState.activeIndex > 0 && (
  <Button
  className="close-button"
- onClick={() => {
- onFinish({ success: true, message: '' });
- }}
+ onClick={() => onFinish({ success: true, message: '' })}
  >
  Close
  </Button>

ui-cra/src/components/Clusters/Connect/DisconnectionInstructions.tsx

@@ -8,7 +8,7 @@ import { CircularProgress } from 'weaveworks-ui-components';
 import { Poll } from '../../../utils/poll';
 import { asMilliseconds } from '../../../utils/time';
 import { Cluster } from '../../../types/kubernetes';
-import { Code, Status } from '../../Shared';
+import { Code, HandleFinish, Status } from '../../Shared';
 import ConfirmDeletion from './ConfirmDeletion';
 import useClusters from '../../../contexts/Clusters';
 
@@ -24,7 +24,8 @@ interface ResponsesById {
 export const ClusterDisconnectionInstructions: FC<{
  formState: FormState;
  setFormState: SetFormState;
-}> = ({ formState }) => {
+ onFinish: HandleFinish;
+}> = ({ formState, onFinish }) => {
  const { deleteConnectedClusters } = useClusters();
 
  if (!formState.cluster.id) {
@@ -70,6 +71,7 @@ export const ClusterDisconnectionInstructions: FC<{
  clusters={[formState.cluster.id]}
  onClickRemove={deleteConnectedClusters}
  title="Remove cluster from the MCCP"
+ onFinish={onFinish}
  />
  </Container>
  );

ui-cra/src/components/Clusters/Create/index.tsx

@@ -22,7 +22,6 @@ import { ISubmitEvent, ObjectFieldTemplateProps } from '@rjsf/core';
 import weaveTheme from 'weaveworks-ui-components/lib/theme';
 import Grid from '@material-ui/core/Grid';
 import { Input } from '../../../utils/form';
-import { Loader } from '../../Loader';
 import Divider from '@material-ui/core/Divider';
 import { useHistory } from 'react-router-dom';
 import * as Grouped from './Form/GroupedSchema';
@@ -33,6 +32,7 @@ import { Credential } from '../../../types/custom';
 import styled from 'styled-components';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import CredentialsProvider from '../../../contexts/Credentials/Provider';
+import { Loader } from '../../Loader';
 
 const large = weaveTheme.spacing.large;
 const medium = weaveTheme.spacing.medium;

ui-cra/src/components/Clusters/index.tsx

@@ -130,9 +130,7 @@ const MCCP: FC = () => {
  />
  )}
  <ClustersTable
- onEdit={cluster => {
- setClusterToEdit(cluster);
- }}
+ onEdit={cluster => setClusterToEdit(cluster)}
  order={order}
  orderBy={orderBy}
  onSortChange={handleRequestSort}

ui-cra/src/components/Layout/ContentWrapper.tsx

@@ -18,7 +18,7 @@ const large = spacing('large');
 
 export const contentCss = css`
  margin: ${medium} ${small} 0 ${small};
- padding: ${large} ${medium} ${medium} ${medium};
+ padding: ${large} ${medium} ${medium} ${large};
  background-color: white;
  border-radius: ${spacing('xs')};
 `;
@@ -27,9 +27,13 @@ export const Content = styled.div`
  ${contentCss}
 `;
 
+export const WGContent = styled.div`
+ ${contentCss}
+ padding: 0 ${medium} ${medium} 0;
+`;
+
 const HelpLinkWrapper = styled.div`
- margin: 0 ${small};
- padding: ${small} ${small};
+ padding-top: ${medium};
  display: flex;
  flex-direction: column;
  align-items: flex-end;
@@ -42,17 +46,33 @@ const HelpLinkWrapper = styled.div`
 `;
 
 export const ContentWrapper: FC = ({ children }) => {
- const versions = useVersions();
+ const { versions } = useVersions();
  return (
- <>
- <Content>{children}</Content>
+ <Content>
+ {children}
  <HelpLinkWrapper>
  <div>
  Need help? Contact us at{' '}
  <a href="mailto:[email protected]">[email protected]</a>
  </div>
- <div>Version {versions.versions?.capiServer}</div>
+ <div>Version {versions?.capiServer}</div>
+ </HelpLinkWrapper>
+ </Content>
+ );
+};
+
+export const WGContentWrapper: FC = ({ children }) => {
+ const { versions } = useVersions();
+ return (
+ <WGContent>
+ {children}
+ <HelpLinkWrapper>
+ <div>
+ Need help? Contact us at&nbsp;
+ <a href="mailto:[email protected]">[email protected]</a>
+ </div>
+ <div>Version {versions?.capiServer}</div>
  </HelpLinkWrapper>
- </>
+ </WGContent>
  );
 };

ui-cra/src/components/Loader.tsx

@@ -1,18 +1,16 @@
 import React, { FC } from 'react';
-import Skeleton from '@material-ui/lab/Skeleton';
 import styled from 'styled-components';
 import theme from 'weaveworks-ui-components/lib/theme';
+import { LoadingPage } from '@weaveworks/weave-gitops';
 
 const LoaderWrapper = styled.div`
- display: flex;
- justify-content: center;
  padding: ${theme.spacing.medium} 0;
 `;
 
 export const Loader: FC = () => {
  return (
  <LoaderWrapper>
- <Skeleton variant="circle" width={40} height={40} />
+ <LoadingPage />
  </LoaderWrapper>
  );
 };

ui-cra/src/components/Pagination.tsx

@@ -9,7 +9,7 @@ import LastPageIcon from '@material-ui/icons/LastPage';
 
 interface TablePaginationActionsProps {
  count: number;
- onChangePage: (
+ onPageChange: (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
  page: number,
  ) => void;
@@ -21,32 +21,32 @@ const TablePaginationActions = ({
  count,
  page,
  rowsPerPage,
- onChangePage,
+ onPageChange,
 }: TablePaginationActionsProps) => {
  const theme = useTheme();
 
  const handleFirstPageButtonClick = (
  event: React.MouseEvent<HTMLButtonElement>,
  ) => {
- onChangePage(event, 0);
+ onPageChange(event, 0);
  };
 
  const handleBackButtonClick = (
  event: React.MouseEvent<HTMLButtonElement>,
  ) => {
- onChangePage(event, page - 1);
+ onPageChange(event, page - 1);
  };
 
  const handleNextButtonClick = (
  event: React.MouseEvent<HTMLButtonElement>,
  ) => {
- onChangePage(event, page + 1);
+ onPageChange(event, page + 1);
  };
 
  const handleLastPageButtonClick = (
  event: React.MouseEvent<HTMLButtonElement>,
  ) => {
- onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+ onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
  };
 
  return (
@@ -99,7 +99,7 @@ export const Pagination: FC<{
  const [page, setPage] = useState<number>(0);
  const [perPage, setPerPage] = useState<number>(10);
 
- const onChangePage = (
+ const onPageChange = (
  event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
  pageNumber: number,
  ) => {
@@ -121,7 +121,7 @@ export const Pagination: FC<{
  rowsPerPage={perPage}
  count={count ?? 0}
  page={page}
- onChangePage={onChangePage}
+ onPageChange={onPageChange}
  onChangeRowsPerPage={onChangeRowsPerPage}
  ActionsComponent={TablePaginationActions}
  />