1025

client/src/ee/pages/automation/api-platform/api-collections/ApiCollections.tsx

@@ -12,7 +12,7 @@ import LayoutContainer from '@/shared/layout/LayoutContainer';
 import {LeftSidebarNav, LeftSidebarNavItem} from '@/shared/layout/LeftSidebarNav';
 import {useGetWorkspaceProjectsQuery} from '@/shared/queries/automation/projects.queries';
 import {Link2Icon, TagIcon} from 'lucide-react';
-import {useEffect, useState} from 'react';
+import {useState} from 'react';
 import {useSearchParams} from 'react-router-dom';
 
 import ApiCollectionList from './components/ApiCollectionList';
@@ -25,11 +25,22 @@ export enum Type {
 const ApiCollections = () => {
     const [searchParams] = useSearchParams();
 
-    const [environment, setEnvironment] = useState<number>(getEnvironment());
-    const [filterData, setFilterData] = useState<{id?: number; type: Type}>(getFilterData());
+    const [environment, setEnvironment] = useState<number | undefined>(
+        searchParams.get('environment') ? parseInt(searchParams.get('environment')!) : undefined
+    );
 
     const {currentWorkspaceId} = useWorkspaceStore();
 
+    const filterData =
+        searchParams.get('projectId') || searchParams.get('tagId')
+            ? {
+                  id: searchParams.get('projectId')
+                      ? parseInt(searchParams.get('projectId')!)
+                      : parseInt(searchParams.get('tagId')!),
+                  type: searchParams.get('tagId') ? Type.Tag : Type.Project,
+              }
+            : {type: Type.Project};
+
     const {
         data: projects,
         error: projectsError,
@@ -44,36 +55,15 @@ const ApiCollections = () => {
         error: apiCollectionsError,
         isLoading: apiCollectionsIsLoading,
     } = useGetApiCollectionsQuery({
-        environment: environment === 1 ? Environment.Test : Environment.Production,
+        environment:
+            environment === undefined ? undefined : environment === 1 ? Environment.Test : Environment.Production,
         id: currentWorkspaceId!,
         projectId: searchParams.get('projectId') ? parseInt(searchParams.get('projectId')!) : undefined,
         tagId: searchParams.get('tagId') ? parseInt(searchParams.get('tagId')!) : undefined,
     });
 
     const {data: tags, error: tagsError, isLoading: tagsIsLoading} = useGetApiCollectionTagsQuery();
 
-    function getEnvironment() {
-        return searchParams.get('environment') ? parseInt(searchParams.get('environment')!) : 1;
-    }
-
-    function getFilterData() {
-        return searchParams.get('projectId') || searchParams.get('tagId')
-            ? {
-                  id: searchParams.get('projectId')
-                      ? parseInt(searchParams.get('projectId')!)
-                      : parseInt(searchParams.get('tagId')!),
-                  type: searchParams.get('tagId') ? Type.Tag : Type.Project,
-              }
-            : {type: Type.Project};
-    }
-
-    useEffect(() => {
-        setEnvironment(getEnvironment());
-        setFilterData(getFilterData());
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchParams]);
-
     return (
         <LayoutContainer
             header={
@@ -100,6 +90,7 @@ const ApiCollections = () => {
                         body={
                             <>
                                 {[
+                                    {label: 'All Environments'},
                                     {label: 'Test', value: 1},
                                     {label: 'Production', value: 2},
                                 ]?.map((item) => (
@@ -128,12 +119,6 @@ const ApiCollections = () => {
                                     item={{
                                         current: !filterData?.id && filterData.type === Type.Project,
                                         name: 'All Projects',
-                                        onItemClick: (id?: number | string) => {
-                                            setFilterData({
-                                                id: id as number,
-                                                type: Type.Project,
-                                            });
-                                        },
                                     }}
                                     toLink={`?environment=${environment ?? ''}`}
                                 />
@@ -145,12 +130,6 @@ const ApiCollections = () => {
                                                 current: filterData?.id === item.id && filterData.type === Type.Project,
                                                 id: item.id,
                                                 name: item.name,
-                                                onItemClick: (id?: number | string) => {
-                                                    setFilterData({
-                                                        id: id as number,
-                                                        type: Type.Project,
-                                                    });
-                                                },
                                             }}
                                             key={item.name}
                                             toLink={`?projectId=${item.id}&environment=${environment ?? ''}`}
@@ -173,12 +152,6 @@ const ApiCollections = () => {
                                                     current: filterData?.id === item.id && filterData.type === Type.Tag,
                                                     id: item.id!,
                                                     name: item.name,
-                                                    onItemClick: (id?: number | string) => {
-                                                        setFilterData({
-                                                            id: id as number,
-                                                            type: Type.Tag,
-                                                        });
-                                                    },
                                                 }}
                                                 key={item.id}
                                                 toLink={`?tagId=${item.id}&environment=${environment ?? ''}`}

client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionListItem.tsx

@@ -84,22 +84,12 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
                                     <Tooltip>
                                         <TooltipTrigger>
                                             <span className="mr-2 text-base font-semibold">{apiCollection.name}</span>
-
-                                            <Badge className="flex space-x-1" variant="secondary">
-                                                <span>V{apiCollection.collectionVersion}</span>
-                                            </Badge>
                                         </TooltipTrigger>
 
                                         <TooltipContent>{apiCollection.description}</TooltipContent>
                                     </Tooltip>
                                 ) : (
-                                    <div className="flex">
-                                        <span className="mr-2 text-base font-semibold">{apiCollection.name}</span>
-
-                                        <Badge className="flex space-x-1" variant="secondary">
-                                            <span>V{apiCollection.collectionVersion}</span>
-                                        </Badge>
-                                    </div>
+                                    <span className="mr-2 text-base font-semibold">{apiCollection.name}</span>
                                 )}
                             </div>
                         </div>
@@ -137,7 +127,13 @@ const ApiCollectionListItem = ({apiCollection}: ApiCollectionListItemProps) => {
                     </div>
 
                     <div className="flex items-center justify-end gap-x-6">
-                        <div className="flex flex-col items-end gap-y-4">
+                        <Badge className="flex space-x-1" variant="secondary">
+                            <span>V{apiCollection.collectionVersion}</span>
+                        </Badge>
+
+                        <Badge variant="secondary">{apiCollection.projectInstance?.environment}</Badge>
+
+                        <div className="flex min-w-52 flex-col items-end gap-y-4">
                             <Switch checked={apiCollection.enabled} onCheckedChange={handleOnCheckedChange} />
 
                             <Tooltip>

client/src/ee/pages/automation/api-platform/api-collections/components/ApiCollectionsFilterTitle.tsx

@@ -10,7 +10,7 @@ const ApiCollectionsFilterTitle = ({
     projects,
     tags,
 }: {
-    environment: number;
+    environment?: number;
     filterData: {id?: number; type: Type};
     projects: Project[] | undefined;
     tags: Tag[] | undefined;
@@ -30,7 +30,9 @@ const ApiCollectionsFilterTitle = ({
             <span className="text-sm uppercase text-muted-foreground">Filter by environment:</span>
 
             <Badge variant="secondary">
-                <span className="text-sm">{environment === 1 ? 'Test' : 'Production'}</span>
+                <span className="text-sm">
+                    {environment === undefined ? 'All environments' : environment === 1 ? 'Test' : 'Production'}
+                </span>
             </Badge>
 
             <span className="text-sm uppercase text-muted-foreground">

client/src/middleware/automation/api-platform/.openapi-generator/FILES

@@ -7,6 +7,9 @@ models/ApiCollection.ts
 models/ApiCollectionEndpoint.ts
 models/Environment.ts
 models/HttpMethod.ts
+models/ProjectBasic.ts
+models/ProjectInstanceBasic.ts
+models/ProjectStatus.ts
 models/Tag.ts
 models/UpdateTagsRequest.ts
 models/index.ts

client/src/middleware/automation/api-platform/models/ApiCollection.ts

@@ -20,13 +20,27 @@ import {
     ApiCollectionEndpointToJSON,
     ApiCollectionEndpointToJSONTyped,
 } from './ApiCollectionEndpoint';
+import type { ProjectInstanceBasic } from './ProjectInstanceBasic';
+import {
+    ProjectInstanceBasicFromJSON,
+    ProjectInstanceBasicFromJSONTyped,
+    ProjectInstanceBasicToJSON,
+    ProjectInstanceBasicToJSONTyped,
+} from './ProjectInstanceBasic';
 import type { Tag } from './Tag';
 import {
     TagFromJSON,
     TagFromJSONTyped,
     TagToJSON,
     TagToJSONTyped,
 } from './Tag';
+import type { ProjectBasic } from './ProjectBasic';
+import {
+    ProjectBasicFromJSON,
+    ProjectBasicFromJSONTyped,
+    ProjectBasicToJSON,
+    ProjectBasicToJSONTyped,
+} from './ProjectBasic';
 
 /**
  * An API collection.
@@ -100,12 +114,24 @@ export interface ApiCollection {
      * @memberof ApiCollection
      */
     projectId: number;
+    /**
+     * 
+     * @type {ProjectBasic}
+     * @memberof ApiCollection
+     */
+    project?: ProjectBasic;
     /**
      * The id of an project instance the API collection is connected to.
      * @type {number}
      * @memberof ApiCollection
      */
     readonly projectInstanceId?: number;
+    /**
+     * 
+     * @type {ProjectInstanceBasic}
+     * @memberof ApiCollection
+     */
+    projectInstance?: ProjectInstanceBasic;
     /**
      * The version of a project the API collection is connected to.
      * @type {number}
@@ -165,7 +191,9 @@ export function ApiCollectionFromJSONTyped(json: any, ignoreDiscriminator: boole
         'lastModifiedBy': json['lastModifiedBy'] == null ? undefined : json['lastModifiedBy'],
         'lastModifiedDate': json['lastModifiedDate'] == null ? undefined : (new Date(json['lastModifiedDate'])),
         'projectId': json['projectId'],
+        'project': json['project'] == null ? undefined : ProjectBasicFromJSON(json['project']),
         'projectInstanceId': json['projectInstanceId'] == null ? undefined : json['projectInstanceId'],
+        'projectInstance': json['projectInstance'] == null ? undefined : ProjectInstanceBasicFromJSON(json['projectInstance']),
         'projectVersion': json['projectVersion'],
         'tags': json['tags'] == null ? undefined : ((json['tags'] as Array<any>).map(TagFromJSON)),
         'workspaceId': json['workspaceId'],
@@ -190,6 +218,8 @@ export function ApiCollectionFromJSONTyped(json: any, ignoreDiscriminator: boole
         'endpoints': value['endpoints'] == null ? undefined : ((value['endpoints'] as Array<any>).map(ApiCollectionEndpointToJSON)),
         'name': value['name'],
         'projectId': value['projectId'],
+        'project': ProjectBasicToJSON(value['project']),
+        'projectInstance': ProjectInstanceBasicToJSON(value['projectInstance']),
         'projectVersion': value['projectVersion'],
         'tags': value['tags'] == null ? undefined : ((value['tags'] as Array<any>).map(TagToJSON)),
         'workspaceId': value['workspaceId'],