feat(cluster-link) add cluster link crud

src/App.tsx

@@ -30,6 +30,9 @@ const ClusterGroupList = lazy(
 const ClusterMemberList = lazy(
   async () => import("pages/cluster/ClusterMemberList"),
 );
+const ClusterLinkList = lazy(
+  async () => import("pages/cluster/ClusterLinkList"),
+);
 const ClusterMemberDetail = lazy(
   async () => import("pages/cluster/ClusterMemberDetail"),
 );
@@ -495,6 +498,10 @@ const App: FC = () => {
           path="/ui/cluster/groups"
           element={<ProtectedRoute outlet={<ClusterGroupList />} />}
         />
+        <Route
+          path="/ui/cluster/links"
+          element={<ProtectedRoute outlet={<ClusterLinkList />} />}
+        />
         <Route
           path="/ui/cluster/members"
           element={<ProtectedRoute outlet={<ClusterMemberList />} />}

src/api/cluster-links.tsx

@@ -0,0 +1,70 @@
+import { handleResponse } from "util/helpers";
+import type {
+  LxdClusterLink,
+  LxdClusterLinkCreated,
+  LxdClusterLinkState,
+} from "types/cluster";
+import type { LxdApiResponse } from "types/apiResponse";
+
+export const fetchClusterLinks = async (): Promise<LxdClusterLink[]> => {
+  return fetch("/1.0/cluster/links?recursion=2")
+    .then(handleResponse)
+    .then((data: LxdApiResponse<LxdClusterLink[]>) => {
+      return data.metadata;
+    });
+};
+
+export const fetchClusterLink = async (
+  link: string,
+): Promise<LxdClusterLink> => {
+  return fetch(`/1.0/cluster/links/${encodeURIComponent(link)}?recursion=2`)
+    .then(handleResponse)
+    .then((data: LxdApiResponse<LxdClusterLink>) => {
+      return data.metadata;
+    });
+};
+
+export const fetchClusterLinkState = async (
+  link: string,
+): Promise<LxdClusterLinkState> => {
+  return fetch(`/1.0/cluster/links/${encodeURIComponent(link)}/state`)
+    .then(handleResponse)
+    .then((data: LxdApiResponse<LxdClusterLinkState>) => {
+      return data.metadata;
+    });
+};
+
+export const createClusterLink = async (
+  body: string,
+): Promise<LxdClusterLinkCreated> => {
+  return fetch(`/1.0/cluster/links`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body,
+  })
+    .then(handleResponse)
+    .then((data: LxdApiResponse<LxdClusterLinkCreated>) => {
+      return data.metadata;
+    });
+};
+
+export const updateClusterLink = async (
+  link: string,
+  body: string,
+): Promise<void> => {
+  await fetch(`/1.0/cluster/links/${encodeURIComponent(link)}`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body,
+  }).then(handleResponse);
+};
+
+export const deleteClusterLink = async (link: string): Promise<void> => {
+  await fetch(`/1.0/cluster/links/${encodeURIComponent(link)}`, {
+    method: "DELETE",
+  }).then(handleResponse);
+};

src/components/Navigation.tsx

@@ -508,6 +508,16 @@ const Navigation: FC = () => {
                                   Groups
                                 </NavLink>
                               </SideNavigationItem>,
+                              <SideNavigationItem key="links">
+                                <NavLink
+                                  to="/ui/cluster/links"
+                                  title="Links"
+                                  onClick={softToggleMenu}
+                                  className="accordion-nav-secondary"
+                                >
+                                  Links
+                                </NavLink>
+                              </SideNavigationItem>,
                             ]}
                           </NavAccordion>
                         </SideNavigationItem>

src/components/ResourceIcon.tsx

@@ -13,6 +13,7 @@ export type ResourceIconType =
   | "profile"
   | "project"
   | "cluster-group"
+  | "cluster-link"
   | "cluster-member"
   | "network"
   | "network-acl"
@@ -38,6 +39,7 @@ const resourceIcons: Record<ResourceIconType, string> = {
   project: "folder",
   "cluster-group": "cluster-host",
   "cluster-member": "single-host",
+  "cluster-link": "applications",
   network: "exposed",
   "network-acl": "security-tick",
   "network-forward": "exposed",

src/context/useClusterLinks.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+import { queryKeys } from "util/queryKeys";
+import type { UseQueryResult } from "@tanstack/react-query";
+import {
+  fetchClusterLink,
+  fetchClusterLinks,
+  fetchClusterLinkState,
+} from "api/cluster-links";
+import type { LxdClusterLink, LxdClusterLinkState } from "types/cluster";
+
+export const useClusterLinks = (): UseQueryResult<LxdClusterLink[]> => {
+  return useQuery({
+    queryKey: [queryKeys.cluster, queryKeys.links],
+    queryFn: fetchClusterLinks,
+  });
+};
+
+export const useClusterLink = (
+  link: string,
+): UseQueryResult<LxdClusterLink> => {
+  return useQuery({
+    queryKey: [queryKeys.cluster, queryKeys.links, link],
+    queryFn: async () => fetchClusterLink(link),
+  });
+};
+
+export const useClusterLinkState = (
+  link: string,
+): UseQueryResult<LxdClusterLinkState> => {
+  return useQuery({
+    queryKey: [queryKeys.cluster, queryKeys.links, link, queryKeys.state],
+    queryFn: async () => fetchClusterLinkState(link),
+  });
+};

src/pages/cluster/ClusterLinkAddresses.tsx

@@ -0,0 +1,33 @@
+import type { FC } from "react";
+import ExpandableList from "components/ExpandableList";
+import type { LxdClusterLink } from "types/cluster";
+import { Icon } from "@canonical/react-components";
+
+interface Props {
+  clusterLink: LxdClusterLink;
+}
+
+const ClusterLinkAddresses: FC<Props> = ({ clusterLink }) => {
+  return (
+    <ExpandableList
+      items={
+        clusterLink.config["volatile.addresses"]?.split(",").map((address) => {
+          return (
+            <div key={address}>
+              <a
+                href={`https://${address}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {address}
+                <Icon className="external-link-icon" name="external-link" />
+              </a>
+            </div>
+          );
+        }) ?? []
+      }
+    />
+  );
+};
+
+export default ClusterLinkAddresses;

src/pages/cluster/ClusterLinkForm.tsx

@@ -0,0 +1,108 @@
+import { Form, Input, Label, RadioInput } from "@canonical/react-components";
+import type { FC } from "react";
+import GroupSelection from "pages/permissions/panels/GroupSelection";
+import { useAuthGroups } from "context/useAuthGroups";
+import type { FormikProps } from "formik/dist/types";
+
+export interface ClusterLinkFormValues {
+  name: string;
+  description?: string;
+  token?: string;
+  tokenType?: "generate" | "consume";
+  authGroups: string[];
+  isCreating: boolean;
+}
+
+interface Props {
+  formik: FormikProps<ClusterLinkFormValues>;
+}
+
+const ClusterLinkForm: FC<Props> = ({ formik }) => {
+  const { data: authGroups = [] } = useAuthGroups();
+
+  return (
+    <Form onSubmit={formik.handleSubmit}>
+      {/* hidden submit to enable enter key in inputs */}
+      <Input type="submit" hidden value="Hidden input" />
+      {formik.values.isCreating && (
+        <Input
+          {...formik.getFieldProps("name")}
+          type="text"
+          label="Name"
+          placeholder="Enter name"
+          required
+          autoFocus
+          error={formik.touched.name ? formik.errors.name : null}
+        />
+      )}
+      <Input
+        {...formik.getFieldProps("description")}
+        type="text"
+        label="Description"
+        placeholder="Enter description"
+      />
+      {formik.values.isCreating && (
+        <>
+          <div className="u-sv1">
+            <RadioInput
+              inline
+              labelClassName="margin-right"
+              label="Generate token"
+              checked={formik.values.tokenType === "generate"}
+              onClick={() => {
+                formik.setFieldValue("tokenType", "generate");
+              }}
+            />
+            <RadioInput
+              inline
+              label="Consume token"
+              checked={formik.values.tokenType === "consume"}
+              onClick={() => {
+                formik.setFieldValue("tokenType", "consume");
+              }}
+            />
+          </div>
+          {formik.values.tokenType === "consume" && (
+            <Input
+              {...formik.getFieldProps("token")}
+              type="text"
+              label="Token"
+              placeholder="Enter token"
+            />
+          )}
+        </>
+      )}
+      <Label className="u-sv-2">Auth groups</Label>
+      <p className="u-text--muted u-sv-1">
+        Control access for incoming request on the cluster link.
+      </p>
+      <GroupSelection
+        groups={authGroups}
+        modifiedGroups={new Set(formik.values.authGroups)}
+        parentItemName="cluster link"
+        selectedGroups={new Set(formik.values.authGroups)}
+        setSelectedGroups={(val, isUnselectAll) => {
+          if (isUnselectAll) {
+            formik.setFieldValue("authGroups", []);
+          } else {
+            formik.setFieldValue("authGroups", val);
+          }
+        }}
+        toggleGroup={(group) => {
+          const currentGroups = formik.values.authGroups;
+          if (currentGroups.includes(group)) {
+            formik.setFieldValue(
+              "authGroups",
+              currentGroups.filter((g) => g !== group),
+            );
+          } else {
+            formik.setFieldValue("authGroups", [...currentGroups, group]);
+          }
+        }}
+        scrollDependencies={[formik]}
+      />
+    </Form>
+  );
+};
+
+export default ClusterLinkForm;