feat: edit page for the operator

app/components/Operator/OperatorTableRow.tsx

@@ -1,6 +1,6 @@
 import Button from "@button-inc/bcgov-theme/Button";
 import { useRouter } from "next/router";
-import { getOperatorViewPageRoute } from "pageRoutes";
+import { getOperatorEditPageRoute, getOperatorViewPageRoute } from "pageRoutes";
 import { useFragment, graphql } from "react-relay";
 import { OperatorTableRow_operator$key } from "__generated__/OperatorTableRow_operator.graphql";
 
@@ -27,6 +27,9 @@ const OperatorTableRow: React.FC<Props> = ({ operator }) => {
   const handleViewClick = () => {
     router.push(getOperatorViewPageRoute(id));
   };
+  const handleEditClick = () => {
+    router.push(getOperatorEditPageRoute(id));
+  };
 
   return (
     <tr>
@@ -39,6 +42,9 @@ const OperatorTableRow: React.FC<Props> = ({ operator }) => {
           <Button size="small" onClick={handleViewClick}>
             View
           </Button>
+          <Button size="small" onClick={handleEditClick}>
+            Edit
+          </Button>
         </div>
       </td>
       <style jsx>{`

app/pageRoutes.ts

@@ -13,6 +13,13 @@ export const getOperatorViewPageRoute = (operatorId: string) => ({
   },
 });
 
+export const getOperatorEditPageRoute = (operatorId: string) => ({
+  pathname: `/cif/operator/[operator]/edit/`,
+  query: {
+    operator: operatorId,
+  },
+});
+
 export const getContactsPageRoute = () => ({
   pathname: "/cif/contacts/",
 });

app/pages/cif/operator/[operator]/edit.tsx

@@ -0,0 +1,3 @@
+const editPage = () => <div>EDIT</div>;
+
+export default editPage;