[WIP] AAP-33011 Create Download Section

src/Containers/ClusterLists/ClustersList.js

@@ -7,12 +7,13 @@ import MinusCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/minus-ci
 import PlusCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/plus-circle-icon';
 import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { readJobExplorer, readJobExplorerOptions } from '../../Api';
 import ApiErrorState from '../../Components/ApiStatus/ApiErrorState';
 import JobStatus from '../../Components/JobStatus';
 import Pagination from '../../Components/Pagination';
 import FilterableToolbar from '../../Components/Toolbar';
-import { useQueryParams } from '../../QueryParams';
+import { createUrl, useQueryParams } from '../../QueryParams';
 import { clusterList } from '../../Utilities/constants';
 import useRequest from '../../Utilities/useRequest';
 import { PageActionType } from '../../framework/PageActions/PageActionType';
@@ -43,6 +44,9 @@ const ClustersList = ({ activeClusters }) => {
     fetchEndpoints(queryParams);
   }, [queryParams]);
 
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+
   if (error) return <ApiErrorState message={error.error.error} />;
 
   const setSort = (idx) => {
@@ -125,7 +129,13 @@ const ClustersList = ({ activeClusters }) => {
           additionalControls={
             activeClusters
               ? [
-                  <Button icon={<PlusCircleIcon />} key={'test'}>
+                  <Button
+                    icon={<PlusCircleIcon />}
+                    key={'test'}
+                    onClick={() => {
+                      navigate(createUrl(`${pathname}/create/local`));
+                    }}
+                  >
                     Create Cluster
                   </Button>,
                 ]

src/Containers/ClusterLists/CreateClustersPage.js

@@ -0,0 +1,43 @@
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
+import CaretLeftIcon from '@patternfly/react-icons/dist/dynamic/icons/caret-left-icon';
+import React from 'react';
+import { PageHeader } from '../../framework/PageHeader';
+import LocalTab from './LocalTab';
+
+const CreateClustersPage = () => {
+  const tabsArray = [
+    {
+      id: 0,
+      name: (
+        <>
+          <CaretLeftIcon />
+          {'Back to Clusters'}
+        </>
+      ),
+      link: '../cluster-list',
+    },
+    { id: 1, name: 'Local', link: `../create/local` },
+    {
+      id: 2,
+      name: 'Cloud',
+      link: `../create/cloud`,
+    },
+  ];
+  return (
+    <div>
+      <Card>
+        <PageHeader data-cy={'cluster-lists'} title={'Create cluster'} />
+      </Card>
+      <Card>
+        {location.pathname.includes('local') && (
+          <LocalTab tabsArray={tabsArray} />
+        )}
+        {location.pathname.includes('cloud') && (
+          <LocalTab tabsArray={tabsArray} />
+        )}
+      </Card>
+    </div>
+  );
+};
+
+export default CreateClustersPage;

src/Containers/ClusterLists/LocalTab.js

@@ -0,0 +1,53 @@
+import { Card } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { CardBody } from '@patternfly/react-core/dist/dynamic/components/Card';
+import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import PropTypes from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+import RoutedTabs from '../../Components/RoutedTabs';
+
+const StepNumber = styled.div`
+  height: 50px;
+  width: 50px;
+  border: 1px solid;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const LocalTab = ({ tabsArray }) => {
+  return (
+    <>
+      <RoutedTabs tabsArray={tabsArray} />
+      <Card>
+        <CardBody>
+          <Title headingLevel='h2'>
+            {'Download Red Hat Ansible Automation Platform'}
+          </Title>
+          <Text component='p'>
+            {
+              'Create a minimal cluster on your desktop/laptop for local development and testing'
+            }
+          </Text>
+        </CardBody>
+      </Card>
+      <Card>
+        <CardBody>
+          <StepNumber className='pf-u-mr-md'>
+            <Title headingLevel='h2' size='2xl' className='ans-c-trial__number'>
+              1
+            </Title>
+          </StepNumber>
+        </CardBody>
+      </Card>
+    </>
+  );
+};
+
+LocalTab.propTypes = {
+  tabsArray: PropTypes.array,
+};
+
+export default LocalTab;

src/Routes.tsx

@@ -45,6 +45,12 @@ const components = {
   [Paths.clusterList]: asyncComponent(
     () => import('./Containers/ClusterLists/ClusterListsPage')
   ),
+  [Paths.createCluster]: asyncComponent(
+    () => import('./Containers/ClusterLists/CreateClustersPage')
+  ),
+  [Paths.createClusterTabs]: asyncComponent(
+    () => import('./Containers/ClusterLists/CreateClustersPage')
+  ),
 };
 
 export const AnalyticsRoutes: FunctionComponent<Record<string, never>> = () => {

src/paths.ts

@@ -13,5 +13,7 @@ export const Paths = {
   reportsDetails: '/reports/:slug',
   reportsAutomationCalculator: '/reports/automation_calculator',
   clusterList: '/cluster-list',
+  createCluster: '/cluster-list/create',
+  createClusterTabs: '/cluster-list/create/local',
 };
 export const prefixPath = '/ansible/automation-analytics/';