Display imported gateways in project settings UI (#3893)

Author: jvstme

frontend/src/locale/en.json

@@ -137,6 +137,7 @@
         "empty_message_text": "No gateways to display.",
 
         "edit": {
+            "name": "Name",
             "backend": "Backend",
             "backend_description": "Select a backend",
             "region": "Region",

frontend/src/pages/Project/Details/Settings/index.tsx

@@ -460,7 +460,7 @@ export const ProjectSettings: React.FC = () => {
                             : {})}
                     />
 
-                    <GatewaysTable gateways={gatewaysData} />
+                    <GatewaysTable gateways={gatewaysData} projectName={paramProjectName} />
 
                     <ProjectMembers
                         onChange={debouncedMembersHandler}

frontend/src/pages/Project/Gateways/Table/hooks/useColumnsDefinitions.tsx

@@ -8,15 +8,25 @@ import styles from '../styles.module.scss';
 
 type hookArgs = {
     loading?: boolean;
+    projectName: string;
     onDeleteClick?: (gateway: IGateway) => void;
     onEditClick?: (gateway: IGateway) => void;
 };
 
-export const useColumnsDefinitions = ({ loading, onDeleteClick, onEditClick }: hookArgs) => {
+export const useColumnsDefinitions = ({ loading, projectName, onDeleteClick, onEditClick }: hookArgs) => {
     const { t } = useTranslation();
 
     const columns = useMemo(() => {
         return [
+            {
+                id: 'name',
+                header: t('gateway.edit.name'),
+                cell: (gateway: IGateway) =>
+                    gateway.project_name && gateway.project_name !== projectName
+                        ? `${gateway.project_name}/${gateway.name}`
+                        : gateway.name,
+            },
+
             {
                 id: 'type',
                 header: t('gateway.edit.backend'),
@@ -76,7 +86,7 @@ export const useColumnsDefinitions = ({ loading, onDeleteClick, onEditClick }: h
                 ),
             },
         ];
-    }, [loading, onEditClick, onDeleteClick]);
+    }, [loading, projectName, onEditClick, onDeleteClick]);
 
     return { columns } as const;
 };

frontend/src/pages/Project/Gateways/Table/index.tsx

@@ -10,7 +10,7 @@ import { useColumnsDefinitions } from './hooks';
 
 import { IProps } from './types';
 
-export const GatewaysTable: React.FC<IProps> = ({ gateways, addItem, deleteItem, editItem, isDisabledDelete }) => {
+export const GatewaysTable: React.FC<IProps> = ({ gateways, projectName, addItem, deleteItem, editItem, isDisabledDelete }) => {
     const { t } = useTranslation();
     const [openHelpPanel] = useHelpPanel();
 
@@ -41,6 +41,7 @@ export const GatewaysTable: React.FC<IProps> = ({ gateways, addItem, deleteItem,
     };
 
     const { columns } = useColumnsDefinitions({
+        projectName,
         ...(editItem ? { onEditClick: (gateway) => editItem(gateway) } : {}),
         ...(deleteItem ? { onDeleteClick: (gateway) => deleteItem([gateway]) } : {}),
     });

frontend/src/pages/Project/Gateways/Table/types.ts

@@ -1,5 +1,6 @@
 export interface IProps {
     gateways: IGateway[];
+    projectName: string;
     addItem?: () => void;
     deleteItem?: (gateways: readonly IGateway[] | IGateway[]) => void;
     editItem?: (gateways: IGateway) => void;

frontend/src/pages/Project/Gateways/hooks/useGatewaysTable.ts

@@ -8,6 +8,8 @@ export const useGatewaysTable = (projectName: IProject['project_name']) => {
     const { data, isLoading } = useGetProjectGatewaysQuery({ projectName });
     const [deleteGatewayRequest, { isLoading: isDeleting }] = useDeleteProjectGatewayMutation();
 
+    // NOTE: editing and deletion are disabled as of 0.20.21.
+    // If enabling, ensure that imported gateways cannot be edited or deleted.
     const editGateway = (gateway: IGateway) => {
         navigate(ROUTES.PROJECT.GATEWAY.EDIT.FORMAT(projectName, gateway.name));
     };

frontend/src/services/gateway.ts

@@ -17,6 +17,7 @@ export const gatewayApi = createApi({
             query: ({ projectName }) => ({
                 url: API.PROJECT_GATEWAYS.LIST(projectName),
                 method: 'POST',
+                body: { include_imported: true },
             }),
 
             providesTags: (result) =>

frontend/src/types/gateway.d.ts

@@ -1,6 +1,7 @@
 declare interface IGateway {
     backend: string,
     name: string,
+    project_name?: string,
     ip_address: string,
     instance_id: string,
     region:string