Add region filter to policy templates UI

- Added Radio.Group filter for regions (All, AU, EU, Global)
- Efficient filtering with useMemo hooks
- Clean button-based UI matching existing design
- Defaults missing regions to Global
This commit is contained in:
Ishaan Jaffer 2026-02-16 14:09:17 -08:00
parent f94b9fc833
commit 896b3683d9

View file

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react";
import { Card, Button, Spin, message } from "antd";
import React, { useState, useEffect, useMemo } from "react";
import { Card, Button, Spin, message, Radio } from "antd";
import {
ShieldCheckIcon,
ShieldExclamationIcon,
@ -116,6 +116,17 @@ const iconMap: Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>
const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, accessToken }) => {
const [templates, setTemplates] = useState<any[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [selectedRegion, setSelectedRegion] = useState<string>("All");
const availableRegions = useMemo(() => {
const regions = new Set(templates.map(t => t.region || "Global"));
return ["All", ...Array.from(regions).sort()];
}, [templates]);
const filteredTemplates = useMemo(() => {
if (selectedRegion === "All") return templates;
return templates.filter(t => (t.region || "Global") === selectedRegion);
}, [templates, selectedRegion]);
useEffect(() => {
const fetchTemplates = async () => {
@ -158,8 +169,23 @@ const PolicyTemplates: React.FC<PolicyTemplatesProps> = ({ onUseTemplate, access
</div>
</div>
<div className="flex items-center gap-3 mb-4">
<span className="text-sm font-medium text-gray-700">Region:</span>
<Radio.Group
value={selectedRegion}
onChange={(e) => setSelectedRegion(e.target.value)}
buttonStyle="solid"
>
{availableRegions.map(region => (
<Radio.Button key={region} value={region}>
{region}
</Radio.Button>
))}
</Radio.Group>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
{templates.map((template, index) => (
{filteredTemplates.map((template, index) => (
<PolicyTemplateCard
key={template.id || index}
title={template.title}