- (createPeoplePageQuery);
+ const [queryRef, loadQuery] = useQueryLoader(
+ createPeoplePageQuery,
+ );
useEffect(() => {
loadQuery({});
@@ -177,4 +183,4 @@ export default function CreatePeoplePage() {
);
-}
\ No newline at end of file
+}
diff --git a/apps/console/src/pages/FrameworkListPage.tsx b/apps/console/src/pages/FrameworkListPage.tsx
index 64d90d20c..fbc4576f0 100644
--- a/apps/console/src/pages/FrameworkListPage.tsx
+++ b/apps/console/src/pages/FrameworkListPage.tsx
@@ -46,16 +46,19 @@ function FrameworkListPageContent({
queryRef: PreloadedQueryCreate People
++ Create People +
Add a new person to your organization.
@@ -145,7 +149,7 @@ function CreatePeoplePageContent({ @@ -162,7 +166,9 @@ function CreatePeoplePageContent({ } export default function CreatePeoplePage() { - const [queryRef, loadQuery] = useQueryLoaderFramework
- Compliance frameworks like SOC 2 and ISO 27001 provide guidelines to secure sensitive data, manage risks, and - build trust. SOC 2 focuses on customer data protection via five Trust Principles, while ISO 27001 establishes - a comprehensive Information Security Management System for global standards. + Compliance frameworks like SOC 2 and ISO 27001 provide guidelines to + secure sensitive data, manage risks, and build trust. SOC 2 focuses on + customer data protection via five Trust Principles, while ISO 27001 + establishes a comprehensive Information Security Management System for + global standards.
{framework?.name}
+
+ {framework?.name}
+
{framework?.name}
++ {framework?.name} +
{framework?.description}
@@ -118,7 +125,9 @@ function FrameworkListPageFallback() { } export default function FrameworkListPage() { - const [queryRef, loadQuery] = useQueryLoader
@@ -125,7 +140,9 @@ function FrameworkOverviewPageContent({
Controls
-{totalImplemented} out of {controls.length} validated
+
+ {totalImplemented} out of {controls.length} validated
+
@@ -191,7 +208,9 @@ function FrameworkOverviewPageFallback() {
export default function FrameworkOverviewPage() {
const { frameworkId } = useParams();
- const [queryRef, loadQuery] = useQueryLoader(FrameworkOverviewPageQuery);
+ const [queryRef, loadQuery] = useQueryLoader(
+ FrameworkOverviewPageQuery,
+ );
useEffect(() => {
loadQuery({ frameworkId: frameworkId! });
@@ -208,4 +227,3 @@ export default function FrameworkOverviewPage() {
);
}
-
diff --git a/apps/console/src/pages/PeopleListPage.tsx b/apps/console/src/pages/PeopleListPage.tsx
index 4c55a007a..28ccf0c20 100644
--- a/apps/console/src/pages/PeopleListPage.tsx
+++ b/apps/console/src/pages/PeopleListPage.tsx
@@ -18,7 +18,12 @@ import type { PeopleListPageQuery as PeopleListPageQueryType } from "./__generat
const ITEMS_PER_PAGE = 20;
const PeopleListPageQuery = graphql`
- query PeopleListPageQuery($first: Int, $after: CursorKey, $last: Int, $before: CursorKey) {
+ query PeopleListPageQuery(
+ $first: Int
+ $after: CursorKey
+ $last: Int
+ $before: CursorKey
+ ) {
node(id: "AZSfP_xAcAC5IAAAAAAltA") {
id
... on Organization {
@@ -57,21 +62,26 @@ const deletePeopleMutation = graphql`
function PeopleListPageContent({
queryRef,
onPageChange,
- loadQuery
+ loadQuery,
}: {
queryRef: PreloadedQuery;
- onPageChange: (params: { first?: number; after?: string; last?: number; before?: string }) => void;
+ onPageChange: (params: {
+ first?: number;
+ after?: string;
+ last?: number;
+ before?: string;
+ }) => void;
loadQuery: LoadQueryType;
}) {
const data = usePreloadedQuery(PeopleListPageQuery, queryRef);
- const peoples = data.node.peoples?.edges.map(edge => edge?.node) ?? [];
+ const peoples = data.node.peoples?.edges.map((edge) => edge?.node) ?? [];
const pageInfo = data.node.peoples?.pageInfo;
const [isPending, startTransition] = useTransition();
const [deletePeople] = useMutation(deletePeopleMutation);
- const handlePageChange = (direction: 'prev' | 'next') => {
+ const handlePageChange = (direction: "prev" | "next") => {
startTransition(() => {
- if (direction === 'prev') {
+ if (direction === "prev") {
onPageChange({
last: ITEMS_PER_PAGE,
before: pageInfo?.startCursor,
@@ -96,9 +106,7 @@ function PeopleListPageContent({
-
{person?.fullName}
-{person?.primaryEmailAddress}
++ {person?.fullName} +
++ {person?.primaryEmailAddress} +
- {[1,2,3].map((i) => (
+ {[1, 2, 3].map((i) => (
>[1];
+type LoadQueryType = ReturnType<
+ typeof useQueryLoader
+>[1];
export default function PeopleListPage() {
const [searchParams] = useSearchParams();
- const [queryRef, loadQuery] = useQueryLoader(PeopleListPageQuery);
+ const [queryRef, loadQuery] =
+ useQueryLoader(PeopleListPageQuery);
useEffect(() => {
- const after = searchParams.get('after');
- const before = searchParams.get('before');
-
- loadQuery({
+ const after = searchParams.get("after");
+ const before = searchParams.get("before");
+
+ loadQuery({
first: before ? undefined : ITEMS_PER_PAGE,
after: after || undefined,
last: before ? ITEMS_PER_PAGE : undefined,
@@ -236,15 +264,25 @@ export default function PeopleListPage() {
});
}, [loadQuery, searchParams]);
- const handlePageChange = ({ first, after, last, before }: { first?: number; after?: string; last?: number; before?: string }) => {
+ const handlePageChange = ({
+ first,
+ after,
+ last,
+ before,
+ }: {
+ first?: number;
+ after?: string;
+ last?: number;
+ before?: string;
+ }) => {
loadQuery(
- {
+ {
first,
after,
last,
before,
},
- { fetchPolicy: 'network-only' }
+ { fetchPolicy: "network-only" },
);
};
@@ -258,8 +296,12 @@ export default function PeopleListPage() {
People - Probo Console
User & Organisation information
- Publish your trust page to the web
+
+ Publish your trust page to the web
+
- {[1,2,3].map((j) => (
-
+ {[1, 2, 3].map((j) => (
+
))}
@@ -218,17 +243,20 @@ function PeopleListPageFallback() {
);
}
-type LoadQueryType = ReturnTypeSettings
-Manage your details and personal preferences here.
++ Manage your details and personal preferences here. +
@@ -60,10 +75,14 @@ function SettingsPageContent({
- john.doe@example.com
+
+ john.doe@example.com
+
@@ -76,7 +95,11 @@ function SettingsPageContent({
{organization.logoUrl ? (
- 
+
) : (
{organization.name}
@@ -115,23 +140,37 @@ function SettingsPageContent({
Workspace members
- Manage who has privileged access to your workspace and their permissions.
+
+ Manage who has privileged access to your workspace and their
+ permissions.
+
{members.map((member) => (
-
+
- {member.fullName.charAt(0)}
+
+ {member.fullName.charAt(0)}
+
- )
+ );
}
function SettingsPageFallback() {
@@ -172,7 +213,8 @@ function SettingsPageFallback() {
}
export default function SettingsPage() {
- const [queryRef, loadQuery] = useQueryLoader(settingsPageQuery);
+ const [queryRef, loadQuery] =
+ useQueryLoader(settingsPageQuery);
useEffect(() => {
loadQuery({});
@@ -192,4 +234,4 @@ export default function SettingsPage() {
);
-}
\ No newline at end of file
+}
diff --git a/apps/console/src/pages/VendorListPage.tsx b/apps/console/src/pages/VendorListPage.tsx
index c42333690..61b6bf1da 100644
--- a/apps/console/src/pages/VendorListPage.tsx
+++ b/apps/console/src/pages/VendorListPage.tsx
@@ -19,7 +19,12 @@ import { Helmet } from "react-helmet-async";
const ITEMS_PER_PAGE = 20;
const vendorListPageQuery = graphql`
- query VendorListPageQuery($first: Int, $after: CursorKey, $last: Int, $before: CursorKey) {
+ query VendorListPageQuery(
+ $first: Int
+ $after: CursorKey
+ $last: Int
+ $before: CursorKey
+ ) {
node(id: "AZSfP_xAcAC5IAAAAAAltA") {
id
... on Organization {
@@ -64,34 +69,45 @@ const deleteVendorMutation = graphql`
// TODO: Remove this once we have a real list of vendors
const vendorsList = [
- { id: '1', name: 'Amazon Web Services', createdAt: new Date().toISOString() },
- { id: '2', name: 'Google Cloud Platform', createdAt: new Date().toISOString() },
- { id: '3', name: 'Microsoft Azure', createdAt: new Date().toISOString() },
- { id: '4', name: 'Salesforce', createdAt: new Date().toISOString() },
- { id: '5', name: 'Slack', createdAt: new Date().toISOString() },
- { id: '6', name: 'Zoom', createdAt: new Date().toISOString() },
- { id: '7', name: 'Dropbox', createdAt: new Date().toISOString() },
- { id: '8', name: 'Trello', createdAt: new Date().toISOString() },
- { id: '9', name: 'Asana', createdAt: new Date().toISOString() },
- { id: '10', name: 'Notion', createdAt: new Date().toISOString() },
- { id: '11', name: 'GitHub', createdAt: new Date().toISOString() },
- { id: '12', name: 'GitLab', createdAt: new Date().toISOString() },
- { id: '13', name: 'Bitbucket', createdAt: new Date().toISOString() },
- { id: '14', name: 'Docker', createdAt: new Date().toISOString() },
- { id: '15', name: 'Kubernetes', createdAt: new Date().toISOString() },
- { id: '16', name: 'Jenkins', createdAt: new Date().toISOString() },
- { id: '17', name: 'CircleCI', createdAt: new Date().toISOString() },
+ { id: "1", name: "Amazon Web Services", createdAt: new Date().toISOString() },
+ {
+ id: "2",
+ name: "Google Cloud Platform",
+ createdAt: new Date().toISOString(),
+ },
+ { id: "3", name: "Microsoft Azure", createdAt: new Date().toISOString() },
+ { id: "4", name: "Salesforce", createdAt: new Date().toISOString() },
+ { id: "5", name: "Slack", createdAt: new Date().toISOString() },
+ { id: "6", name: "Zoom", createdAt: new Date().toISOString() },
+ { id: "7", name: "Dropbox", createdAt: new Date().toISOString() },
+ { id: "8", name: "Trello", createdAt: new Date().toISOString() },
+ { id: "9", name: "Asana", createdAt: new Date().toISOString() },
+ { id: "10", name: "Notion", createdAt: new Date().toISOString() },
+ { id: "11", name: "GitHub", createdAt: new Date().toISOString() },
+ { id: "12", name: "GitLab", createdAt: new Date().toISOString() },
+ { id: "13", name: "Bitbucket", createdAt: new Date().toISOString() },
+ { id: "14", name: "Docker", createdAt: new Date().toISOString() },
+ { id: "15", name: "Kubernetes", createdAt: new Date().toISOString() },
+ { id: "16", name: "Jenkins", createdAt: new Date().toISOString() },
+ { id: "17", name: "CircleCI", createdAt: new Date().toISOString() },
];
-type LoadQueryType = ReturnType>[1];
+type LoadQueryType = ReturnType<
+ typeof useQueryLoader
+>[1];
function VendorListContent({
queryRef,
onPageChange,
- loadQuery
+ loadQuery,
}: {
queryRef: PreloadedQuery;
- onPageChange: (params: { first?: number; after?: string; last?: number; before?: string }) => void;
+ onPageChange: (params: {
+ first?: number;
+ after?: string;
+ last?: number;
+ before?: string;
+ }) => void;
loadQuery: LoadQueryType;
}) {
const data = usePreloadedQuery(vendorListPageQuery, queryRef);
@@ -102,32 +118,33 @@ function VendorListContent({
const [createVendor] = useMutation(createVendorMutation);
const [deleteVendor] = useMutation(deleteVendorMutation);
- const vendors = data.node?.vendors?.edges?.map(edge => edge?.node) ?? [];
+ const vendors = data.node?.vendors?.edges?.map((edge) => edge?.node) ?? [];
const pageInfo = data.node?.vendors?.pageInfo;
const fuse = new Fuse(vendorsList, {
- keys: ['name'],
+ keys: ["name"],
threshold: 0.3,
});
- const handlePageChange = (direction: 'next' | 'prev') => {
+ const handlePageChange = (direction: "next" | "prev") => {
if (!pageInfo) return;
-
- if (direction === 'next' && !pageInfo.hasNextPage) return;
- if (direction === 'prev' && !pageInfo.hasPreviousPage) return;
-
- startTransition(() => {
- const params = direction === 'next'
- ? { first: ITEMS_PER_PAGE, after: pageInfo.endCursor }
- : { last: ITEMS_PER_PAGE, before: pageInfo.startCursor };
- setSearchParams(prev => {
- if (direction === 'next') {
- prev.set('after', pageInfo.endCursor!);
- prev.delete('before');
+ if (direction === "next" && !pageInfo.hasNextPage) return;
+ if (direction === "prev" && !pageInfo.hasPreviousPage) return;
+
+ startTransition(() => {
+ const params =
+ direction === "next"
+ ? { first: ITEMS_PER_PAGE, after: pageInfo.endCursor }
+ : { last: ITEMS_PER_PAGE, before: pageInfo.startCursor };
+
+ setSearchParams((prev) => {
+ if (direction === "next") {
+ prev.set("after", pageInfo.endCursor!);
+ prev.delete("before");
} else {
- prev.set('before', pageInfo.startCursor!);
- prev.delete('after');
+ prev.set("before", pageInfo.startCursor!);
+ prev.delete("after");
}
return prev;
});
@@ -153,7 +170,9 @@ function VendorListContent({
- {member.fullName}
- {member.primaryEmailAddress}
+
+ {member.fullName}
+
+
+ {member.primaryEmailAddress}
+
- {member.role}
+
+ {member.role}
+
Change role
- Remove member
+
+ Remove member
+
@@ -152,7 +193,7 @@ function SettingsPageContent({
Add a vendor
-Search and add new vendors
++ Search and add new vendors +
@@ -169,7 +188,9 @@ function VendorListContent({
if (value.trim() === "") {
setFilteredVendors([]);
} else {
- const results = fuse.search(value).map(result => result.item);
+ const results = fuse
+ .search(value)
+ .map((result) => result.item);
setFilteredVendors(results);
}
}}
@@ -185,18 +206,21 @@ function VendorListContent({
variables: {
input: {
organizationId: data.node.id,
- name: vendor.name
- }
+ name: vendor.name,
+ },
},
onCompleted(response: any) {
setSearchTerm("");
setFilteredVendors([]);
- loadQuery({
- first: ITEMS_PER_PAGE,
- after: undefined,
- last: undefined,
- before: undefined,
- }, { fetchPolicy: 'network-only' });
+ loadQuery(
+ {
+ first: ITEMS_PER_PAGE,
+ after: undefined,
+ last: undefined,
+ before: undefined,
+ },
+ { fetchPolicy: "network-only" },
+ );
},
});
}}
@@ -219,9 +243,12 @@ function VendorListContent({
{vendors.map((vendor) => (
-
+
Not assessed
-
-
@@ -230,8 +257,13 @@ function VendorListContent({
{vendor?.name?.[0]}
@@ -247,26 +279,33 @@ function VendorListContent({
-
{vendor?.name}
-Vendor since {new Date(vendor?.createdAt).toLocaleDateString()}
++ {vendor?.name} +
++ Vendor since{" "} + {new Date(vendor?.createdAt).toLocaleDateString()} +