Edit company (#18)

* Add edit company

* Add edit company

* fix test

cypress/integration/companyList.test.js

@@ -88,7 +88,7 @@ context("Test company list", () => {
     cy.get(".pf-c-table__action").first().click();
     cy.get(".pf-c-dropdown__menu-item").contains("Edit").click();
 
-    cy.url().should("eq", Cypress.config().baseUrl + "/companies/company1");
+    cy.url().should("eq", Cypress.config().baseUrl + "/companies/company1/overview");
   });
 
   it("Company list - new", () => {

src/Paths.ts

@@ -16,6 +16,8 @@ export enum Paths {
   newCompany = "/companies/~new",
 
   editCompany = "/companies/:company",
+  editCompany_overview = "/companies/:company/overview",
+  editCompany_sunat = "/companies/:company/sunat",
 }
 
 export interface OptionalCompanyRoute {

src/api/rest.tsx

@@ -41,3 +41,7 @@ export const getCompanies = (
 export const deleteCompany = (company: Company): AxiosPromise => {
   return APIClient.delete(`${COMPANIES}/${company.name}`);
 };
+
+export const getCompany = (name: string): AxiosPromise<Company> => {
+  return APIClient.get(`${COMPANIES}/${name}`);
+};

src/pages/companies/companies.tsx

@@ -6,6 +6,7 @@ import { Paths } from "Paths";
 
 const CommpanyList = lazy(() => import("./company-list"));
 const NewCompany = lazy(() => import("./new-company"));
+const EditCompany = lazy(() => import("./edit-company"));
 
 export const Projects: React.FC = () => {
   return (
@@ -14,6 +15,7 @@ export const Projects: React.FC = () => {
         <Switch>
           <Route path={Paths.companyList} component={CommpanyList} exact />
           <Route path={Paths.newCompany} component={NewCompany} />
+          <Route path={Paths.editCompany} component={EditCompany} />
         </Switch>
       </Suspense>
     </>

src/pages/companies/company-list/company-list.tsx

@@ -26,6 +26,7 @@ import {
 } from "@patternfly/react-table";
 import { AddCircleOIcon } from "@patternfly/react-icons";
 
+import { alertActions } from "store/alert";
 import { deleteWithMatchModalActions } from "store/delete-with-match-modal";
 
 import {
@@ -34,17 +35,18 @@ import {
   ConditionalRender,
   SimplePageSection,
 } from "shared/components";
-import { useTableControls } from "shared/hooks";
+import {
+  useTableControls,
+  useFetchCompanies,
+  useDeleteCompany,
+} from "shared/hooks";
 import { DeleteWithMatchModalContainer } from "shared/containers";
 
 import { formatPath, Paths } from "Paths";
 import { Company, PageQuery, SortByQuery } from "api/models";
+import { getAxiosErrorMessage } from "utils/modelUtils";
 
 import { Welcome } from "./components/welcome";
-import useFetchCompany from "./hooks/useFetchCompany";
-import useDeleteCompany from "./hooks/useDeleteCompany";
-import { alertActions } from "store/alert";
-import { getAxiosErrorMessage } from "utils/modelUtils";
 
 const columns: ICell[] = [
   { title: "Name", transforms: [sortable] },
@@ -98,7 +100,7 @@ export const CompanyList: React.FC<CompanyListProps> = ({ history }) => {
     fetchError,
     fetchCount,
     fetchCompanies,
-  } = useFetchCompany(true);
+  } = useFetchCompanies(true);
 
   const {
     filterText,

src/pages/companies/edit-company/components/page-header/index.ts

@@ -0,0 +1 @@
+export { PageHeader } from "./page-header";

src/pages/companies/edit-company/components/page-header/page-header.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+  Stack,
+  StackItem,
+  Split,
+  SplitItem,
+  TextContent,
+  Text,
+} from "@patternfly/react-core";
+import { BreadCrumbPath } from "shared/components/breadcrumb-path";
+import { MenuActions } from "shared/components/menu-actions";
+import { HorizontalNav } from "shared/components/horizontal-nav/horizontal-nav";
+
+export interface PageHeaderProps {
+  title: string;
+  breadcrumbs: { title: string; path: string }[];
+  menuActions: { label: string; callback: () => void }[];
+  navItems: { title: string; path: string }[];
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({
+  title,
+  breadcrumbs,
+  menuActions,
+  navItems,
+}) => {
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <BreadCrumbPath breadcrumbs={breadcrumbs} />
+      </StackItem>
+      <StackItem>
+        <Split>
+          <SplitItem isFilled>
+            <TextContent>
+              <Text component="h1">{title}</Text>
+            </TextContent>
+          </SplitItem>
+          <SplitItem>
+            <MenuActions actions={menuActions} />
+          </SplitItem>
+        </Split>
+      </StackItem>
+      <StackItem>
+        <HorizontalNav navItems={navItems} />
+      </StackItem>
+    </Stack>
+  );
+};

src/pages/companies/edit-company/components/page-header/stories/page-header.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { HashRouter } from "react-router-dom";
+import { Story, Meta } from "@storybook/react/types-6-0";
+import { action } from "@storybook/addon-actions";
+import { PageHeader, PageHeaderProps } from "../page-header";
+
+export default {
+  title: "Edit company / PageHeader",
+  component: PageHeader,
+  argTypes: {},
+} as Meta;
+
+const Template: Story<PageHeaderProps> = (args) => (
+  <HashRouter>
+    <PageHeader {...args} />
+  </HashRouter>
+);
+export const Basic = Template.bind({});
+Basic.args = {
+  title: "mycompany",
+  breadcrumbs: [
+    {
+      title: "Companies",
+      path: "/companies",
+    },
+    {
+      title: "Company details",
+      path: "/companies/1",
+    },
+  ],
+  menuActions: [
+    {
+      label: "Edit",
+      callback: action("Edit"),
+    },
+    {
+      label: "Delete",
+      callback: action("Delete"),
+    },
+  ],
+  navItems: [
+    {
+      title: "Overview",
+      path: "/companies/1/overview",
+    },
+    {
+      title: "YAML",
+      path: "/companies/1/yaml",
+    },
+    {
+      title: "SUNAT",
+      path: "/companies/1/sunat",
+    },
+  ],
+};

src/pages/companies/edit-company/components/page-header/tests/__snapshots__/page-header.test.tsx.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageHeader Renders without crashing 1`] = `
+<Stack
+  hasGutter={true}
+>
+  <StackItem>
+    <BreadCrumbPath
+      breadcrumbs={
+        Array [
+          Object {
+            "path": "/companies",
+            "title": "Companies",
+          },
+          Object {
+            "path": "/companies/1",
+            "title": "Company details",
+          },
+        ]
+      }
+    />
+  </StackItem>
+  <StackItem>
+    <Split>
+      <SplitItem
+        isFilled={true}
+      >
+        <TextContent>
+          <Text
+            component="h1"
+          >
+            mycompany
+          </Text>
+        </TextContent>
+      </SplitItem>
+      <SplitItem>
+        <MenuActions
+          actions={
+            Array [
+              Object {
+                "callback": [MockFunction],
+                "label": "Edit",
+              },
+              Object {
+                "callback": [MockFunction],
+                "label": "Delete",
+              },
+            ]
+          }
+        />
+      </SplitItem>
+    </Split>
+  </StackItem>
+  <StackItem>
+    <HorizontalNav
+      navItems={
+        Array [
+          Object {
+            "path": "/companies/1/overview",
+            "title": "Overview",
+          },
+          Object {
+            "path": "/companies/1/yaml",
+            "title": "YAML",
+          },
+          Object {
+            "path": "/companies/1/sunat",
+            "title": "SUNAT",
+          },
+        ]
+      }
+    />
+  </StackItem>
+</Stack>
+`;

src/pages/companies/edit-company/components/page-header/tests/page-header.test.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { shallow } from "enzyme";
+import { PageHeader } from "../page-header";
+
+describe("PageHeader", () => {
+  it("Renders without crashing", () => {
+    const wrapper = shallow(
+      <PageHeader
+        title="mycompany"
+        breadcrumbs={[
+          {
+            title: "Companies",
+            path: "/companies",
+          },
+          {
+            title: "Company details",
+            path: "/companies/1",
+          },
+        ]}
+        menuActions={[
+          {
+            label: "Edit",
+            callback: jest.fn(),
+          },
+          {
+            label: "Delete",
+            callback: jest.fn(),
+          },
+        ]}
+        navItems={[
+          {
+            title: "Overview",
+            path: "/companies/1/overview",
+          },
+          {
+            title: "YAML",
+            path: "/companies/1/yaml",
+          },
+          {
+            title: "SUNAT",
+            path: "/companies/1/sunat",
+          },
+        ]}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});