feat(gateways): decouple gateways from projects

frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityKubernetesAuthForm.tsx

@@ -7,6 +7,7 @@ import { useQuery } from "@tanstack/react-query";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
 import {
   Button,
   FormControl,
@@ -18,9 +19,14 @@ import {
   TabList,
   TabPanel,
   Tabs,
-  TextArea
+  TextArea,
+  Tooltip
 } from "@app/components/v2";
 import { useOrganization, useSubscription } from "@app/context";
+import {
+  OrgGatewayPermissionActions,
+  OrgPermissionSubjects
+} from "@app/context/OrgPermissionContext/types";
 import {
   gatewaysQueryKeys,
   useAddIdentityKubernetesAuth,
@@ -103,7 +109,7 @@ export const IdentityKubernetesAuthForm = ({
       tokenReviewerJwt: "",
       allowedNames: "",
       allowedNamespaces: "",
-      gatewayId: null,
+      gatewayId: "",
       allowedAudience: "",
       caCert: "",
       accessTokenTTL: "2592000",
@@ -294,38 +300,60 @@ export const IdentityKubernetesAuthForm = ({
             )}
           />
 
-          <Controller
-            control={control}
-            name="gatewayId"
-            defaultValue=""
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <FormControl
-                isError={Boolean(error?.message)}
-                errorText={error?.message}
-                label="Gateway"
-                isOptional
-              >
-                <Select
-                  value={value as string}
-                  onValueChange={onChange}
-                  className="w-full border border-mineshaft-500"
-                  dropdownContainerClassName="max-w-none"
-                  isLoading={isGatewayLoading}
-                  placeholder="Select Gateway"
-                  position="popper"
-                >
-                  <SelectItem value={null as unknown as string} onClick={() => onChange(undefined)}>
-                    Internet Gateway
-                  </SelectItem>
-                  {gateways?.map((el) => (
-                    <SelectItem value={el.id} key={el.id}>
-                      {el.name}
-                    </SelectItem>
-                  ))}
-                </Select>
-              </FormControl>
+          <OrgPermissionCan
+            I={OrgGatewayPermissionActions.AttachGateways}
+            a={OrgPermissionSubjects.Gateway}
+          >
+            {(isAllowed) => (
+              <Controller
+                control={control}
+                name="gatewayId"
+                defaultValue=""
+                render={({ field: { value, onChange }, fieldState: { error } }) => (
+                  <FormControl
+                    isError={Boolean(error?.message)}
+                    errorText={error?.message}
+                    label="Gateway"
+                    isOptional
+                  >
+                    <Tooltip
+                      isDisabled={isAllowed}
+                      content="Restricted access. You don't have permission to attach gateways to resources."
+                    >
+                      <div>
+                        <Select
+                          isDisabled={!isAllowed}
+                          value={value as string}
+                          onValueChange={(v) => {
+                            if (v !== "") {
+                              onChange(v);
+                            }
+                          }}
+                          className="w-full border border-mineshaft-500"
+                          dropdownContainerClassName="max-w-none"
+                          isLoading={isGatewayLoading}
+                          placeholder="Select Gateway"
+                          position="popper"
+                        >
+                          <SelectItem
+                            value={null as unknown as string}
+                            onClick={() => onChange(null)}
+                          >
+                            Internet Gateway
+                          </SelectItem>
+                          {gateways?.map((el) => (
+                            <SelectItem value={el.id} key={el.id}>
+                              {el.name}
+                            </SelectItem>
+                          ))}
+                        </Select>
+                      </div>
+                    </Tooltip>
+                  </FormControl>
+                )}
+              />
             )}
-          />
+          </OrgPermissionCan>
 
           <Controller
             control={control}

frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx

@@ -32,7 +32,6 @@ import {
   Table,
   TableContainer,
   TableSkeleton,
-  Tag,
   TBody,
   Td,
   Th,
@@ -128,7 +127,6 @@ export const GatewayListPage = withPermission(
                       <Tr>
                         <Th className="w-1/3">Name</Th>
                         <Th>Cert Issued At</Th>
-                        <Th>Projects</Th>
                         <Th>Identity</Th>
                         <Th>
                           Health Check
@@ -151,13 +149,6 @@ export const GatewayListPage = withPermission(
                         <Tr key={el.id}>
                           <Td>{el.name}</Td>
                           <Td>{format(new Date(el.issuedAt), "yyyy-MM-dd hh:mm:ss aaa")}</Td>
-                          <Td>
-                            {el.projects.map((projectDetails) => (
-                              <Tag key={projectDetails.id} size="xs">
-                                {projectDetails.name}
-                              </Tag>
-                            ))}
-                          </Td>
                           <Td>{el.identity.name}</Td>
                           <Td>
                             {el.heartbeat

frontend/src/pages/organization/Gateways/GatewayListPage/components/EditGatewayDetailsModal.tsx

@@ -3,10 +3,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import { createNotification } from "@app/components/notifications";
-import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
-import { useGetUserWorkspaces, useUpdateGatewayById } from "@app/hooks/api";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useUpdateGatewayById } from "@app/hooks/api";
 import { TGateway } from "@app/hooks/api/gateways/types";
-import { ProjectType } from "@app/hooks/api/workspace/types";
 
 type Props = {
   gatewayDetails: TGateway;
@@ -14,13 +13,7 @@ type Props = {
 };
 
 const schema = z.object({
-  name: z.string(),
-  projects: z
-    .object({
-      id: z.string(),
-      name: z.string()
-    })
-    .array()
+  name: z.string()
 });
 
 export type FormData = z.infer<typeof schema>;
@@ -38,20 +31,13 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
   });
 
   const updateGatewayById = useUpdateGatewayById();
-  // when gateway goes to other products switch to all
-  const { data: secretManagerWorkspaces, isLoading: isSecretManagerLoading } = useGetUserWorkspaces(
-    {
-      type: ProjectType.SecretManager
-    }
-  );
 
-  const onFormSubmit = ({ name, projects }: FormData) => {
+  const onFormSubmit = ({ name }: FormData) => {
     if (isSubmitting) return;
     updateGatewayById.mutate(
       {
         id: gatewayDetails.id,
-        name,
-        projectIds: projects.map((el) => el.id)
+        name
       },
       {
         onSuccess: () => {
@@ -76,30 +62,6 @@ export const EditGatewayDetailsModal = ({ gatewayDetails, onClose }: Props) => {
           </FormControl>
         )}
       />
-      <Controller
-        control={control}
-        name="projects"
-        render={({ field: { onChange, value }, fieldState: { error } }) => (
-          <FormControl
-            className="w-full"
-            label="Projects"
-            tooltipText="Select the project(s) that you'd like to add this gateway to"
-            errorText={error?.message}
-            isError={Boolean(error)}
-          >
-            <FilterableSelect
-              options={secretManagerWorkspaces}
-              placeholder="Select projects..."
-              value={value}
-              onChange={onChange}
-              isMulti
-              isLoading={isSecretManagerLoading}
-              getOptionValue={(option) => option.id}
-              getOptionLabel={(option) => option.name}
-            />
-          </FormControl>
-        )}
-      />
       <div className="mt-4 flex items-center">
         <Button className="mr-4" size="sm" type="submit" isLoading={isSubmitting}>
           Update

frontend/src/pages/organization/RoleByIDPage/components/OrgRoleModifySection.utils.ts

@@ -69,7 +69,8 @@ const orgGatewayPermissionSchema = z
     [OrgGatewayPermissionActions.ListGateways]: z.boolean().optional(),
     [OrgGatewayPermissionActions.EditGateways]: z.boolean().optional(),
     [OrgGatewayPermissionActions.DeleteGateways]: z.boolean().optional(),
-    [OrgGatewayPermissionActions.CreateGateways]: z.boolean().optional()
+    [OrgGatewayPermissionActions.CreateGateways]: z.boolean().optional(),
+    [OrgGatewayPermissionActions.AttachGateways]: z.boolean().optional()
   })
   .optional();
 

frontend/src/pages/organization/RoleByIDPage/components/RolePermissionsSection/OrgPermissionGatewayRow.tsx

@@ -27,7 +27,8 @@ const PERMISSION_ACTIONS = [
   { action: OrgGatewayPermissionActions.ListGateways, label: "List Gateways" },
   { action: OrgGatewayPermissionActions.CreateGateways, label: "Create Gateways" },
   { action: OrgGatewayPermissionActions.EditGateways, label: "Edit Gateways" },
-  { action: OrgGatewayPermissionActions.DeleteGateways, label: "Delete Gateways" }
+  { action: OrgGatewayPermissionActions.DeleteGateways, label: "Delete Gateways" },
+  { action: OrgGatewayPermissionActions.AttachGateways, label: "Attach Gateways" }
 ] as const;
 
 export const OrgGatewayPermissionRow = ({ isEditable, control, setValue }: Props) => {