feat: #658 Add grid component with filtering example

packages/backend/apps/demo/schema.py

@@ -118,17 +118,29 @@ class Meta:
         model = models.CrudDemoItem
 
 
+class CrudDemoItemSort(graphene.Enum):
+    NAME_ASC = "name"
+    NAME_DESC = "-name"
+
+
 class Query(graphene.ObjectType):
     crud_demo_item = graphene.Field(CrudDemoItemType, id=graphene.ID(), tenant_id=graphene.ID())
-    all_crud_demo_items = UIPagedConnectionField(CrudDemoItemConnection, tenant_id=graphene.ID())
+    all_crud_demo_items = UIPagedConnectionField(
+        CrudDemoItemConnection, tenant_id=graphene.ID(), search=graphene.String(), sort=CrudDemoItemSort()
+    )
     all_contentful_demo_item_favorites = graphene.relay.ConnectionField(ContentfulDemoItemFavoriteConnection)
     all_document_demo_items = graphene.relay.ConnectionField(DocumentDemoItemConnection)
 
     @staticmethod
     @permission_classes(IsTenantMemberAccess)
-    def resolve_all_crud_demo_items(root, info, tenant_id, **kwargs):
+    def resolve_all_crud_demo_items(root, info, tenant_id, search=None, sort=None, **kwargs):
         _, pk = from_global_id(tenant_id)
-        return models.CrudDemoItem.objects.filter(tenant_id=pk).all()
+        queryset = models.CrudDemoItem.objects.filter(tenant_id=pk)
+        if search:
+            queryset = queryset.filter(name__icontains=search)
+        if sort:
+            queryset = queryset.order_by(sort.value)
+        return queryset.all()
 
     @staticmethod
     def resolve_all_contentful_demo_item_favorites(root, info, **kwargs):

packages/backend/apps/demo/tests/test_schema.py

@@ -363,6 +363,170 @@ def test_returns_all_items_without_membership(self, graphene_client, crud_demo_i
         assert executed["errors"]
         assert executed["errors"][0]["message"] == "permission_denied"
 
+    def test_returns_items_sorted_by_name_asc(
+        self, graphene_client, crud_demo_item_factory, tenant_factory, tenant_membership_factory, user
+    ):
+        tenant = tenant_factory(name="Tenant 1", type=TenantType.ORGANIZATION)
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.OWNER)
+        item3 = crud_demo_item_factory(name="Zebra", tenant=tenant)
+        item1 = crud_demo_item_factory(name="Ant", tenant=tenant)
+        item2 = crud_demo_item_factory(name="Bear", tenant=tenant)
+
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.OWNER)
+        graphene_client.force_authenticate(user)
+        executed = graphene_client.query(
+            """
+            query($tenantId: ID!, $sort: CrudDemoItemSort)  {
+              allCrudDemoItems(tenantId: $tenantId, sort: $sort, first: 10) {
+                edges {
+                  node {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            """,
+            variable_values={"tenantId": to_global_id("TenantType", tenant.id), "sort": "NAME_ASC"},
+        )
+
+        edges = executed["data"]["allCrudDemoItems"]["edges"]
+        assert len(edges) == 3
+        assert edges[0]["node"]["name"] == item1.name
+        assert edges[1]["node"]["name"] == item2.name
+        assert edges[2]["node"]["name"] == item3.name
+
+    def test_returns_items_sorted_by_name_desc(
+        self, graphene_client, crud_demo_item_factory, tenant_factory, tenant_membership_factory, user
+    ):
+        tenant = tenant_factory(name="Tenant 1", type=TenantType.ORGANIZATION)
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.OWNER)
+        item3 = crud_demo_item_factory(name="Zebra", tenant=tenant)
+        item1 = crud_demo_item_factory(name="Ant", tenant=tenant)
+        item2 = crud_demo_item_factory(name="Bear", tenant=tenant)
+
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.OWNER)
+        graphene_client.force_authenticate(user)
+        executed = graphene_client.query(
+            """
+            query($tenantId: ID!, $sort: CrudDemoItemSort!)  {
+              allCrudDemoItems(tenantId: $tenantId, sort: $sort, first: 10) {
+                edges {
+                  node {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            """,
+            variable_values={"tenantId": to_global_id("TenantType", tenant.id), "sort": "NAME_DESC"},
+        )
+
+        edges = executed["data"]["allCrudDemoItems"]["edges"]
+        assert len(edges) == 3
+        assert edges[0]["node"]["name"] == item3.name
+        assert edges[1]["node"]["name"] == item2.name
+        assert edges[2]["node"]["name"] == item1.name
+
+    def test_returns_filtered_items_by_search(
+        self, graphene_client, crud_demo_item_factory, tenant_factory, tenant_membership_factory, user
+    ):
+        tenant = tenant_factory(name="Tenant 1", type=TenantType.ORGANIZATION)
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.OWNER)
+        item1 = crud_demo_item_factory(name="Apple Pie", tenant=tenant)
+        item2 = crud_demo_item_factory(name="Apple Juice", tenant=tenant)
+        crud_demo_item_factory(name="Orange Juice", tenant=tenant)
+
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.OWNER)
+        graphene_client.force_authenticate(user)
+        executed = graphene_client.query(
+            """
+            query($tenantId: ID!, $search: String!)  {
+              allCrudDemoItems(tenantId: $tenantId, search: $search, first: 10) {
+                edges {
+                  node {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            """,
+            variable_values={"tenantId": to_global_id("TenantType", tenant.id), "search": "Apple"},
+        )
+
+        edges = executed["data"]["allCrudDemoItems"]["edges"]
+        assert len(edges) == 2
+        returned_names = [edge["node"]["name"] for edge in edges]
+        assert item1.name in returned_names
+        assert item2.name in returned_names
+
+    def test_returns_filtered_items_case_insensitive(
+        self, graphene_client, crud_demo_item_factory, tenant_factory, tenant_membership_factory, user
+    ):
+        tenant = tenant_factory(name="Tenant 1", type=TenantType.ORGANIZATION)
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.OWNER)
+        item1 = crud_demo_item_factory(name="Apple Pie", tenant=tenant)
+        item2 = crud_demo_item_factory(name="APPLE Juice", tenant=tenant)
+        crud_demo_item_factory(name="Orange Juice", tenant=tenant)
+
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.OWNER)
+        graphene_client.force_authenticate(user)
+        executed = graphene_client.query(
+            """
+            query($tenantId: ID!, $search: String!)  {
+              allCrudDemoItems(tenantId: $tenantId, search: $search, first: 10) {
+                edges {
+                  node {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            """,
+            variable_values={"tenantId": to_global_id("TenantType", tenant.id), "search": "apple"},
+        )
+
+        edges = executed["data"]["allCrudDemoItems"]["edges"]
+        assert len(edges) == 2
+        returned_names = [edge["node"]["name"] for edge in edges]
+        assert item1.name in returned_names
+        assert item2.name in returned_names
+
+    def test_combines_search_and_sort(
+        self, graphene_client, crud_demo_item_factory, tenant_factory, tenant_membership_factory, user
+    ):
+        tenant = tenant_factory(name="Tenant 1", type=TenantType.ORGANIZATION)
+        tenant_membership_factory(tenant=tenant, user=user, role=TenantUserRole.OWNER)
+        item2 = crud_demo_item_factory(name="Apple Juice", tenant=tenant)
+        item1 = crud_demo_item_factory(name="Apple Banana", tenant=tenant)
+        crud_demo_item_factory(name="Orange Juice", tenant=tenant)
+
+        graphene_client.set_tenant_dependent_context(tenant, TenantUserRole.OWNER)
+        graphene_client.force_authenticate(user)
+        executed = graphene_client.query(
+            """
+            query($tenantId: ID!, $search: String!, $sort: CrudDemoItemSort!)  {
+              allCrudDemoItems(tenantId: $tenantId, search: $search, sort: $sort, first: 10) {
+                edges {
+                  node {
+                    id
+                    name
+                  }
+                }
+              }
+            }
+            """,
+            variable_values={"tenantId": to_global_id("TenantType", tenant.id), "search": "Apple", "sort": "NAME_ASC"},
+        )
+
+        edges = executed["data"]["allCrudDemoItems"]["edges"]
+        assert len(edges) == 2
+        assert edges[0]["node"]["name"] == item1.name
+        assert edges[1]["node"]["name"] == item2.name
+
 
 class TestCrudDemoItemQuery:
     CRUD_DEMO_ITEM_QUERY = """

packages/internal/docs/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "docusaurus": "nx exec -- docusaurus",
     "swizzle": "nx exec -- docusaurus swizzle",
-    "start": "NODE_OPTIONS=\"--max-old-space-size=2048\" TYPEDOC_WATCH=true nx exec --  docusaurus start --port 3006",
+    "start": "NODE_OPTIONS=\"--max-old-space-size=4096\" TYPEDOC_WATCH=true nx exec --  docusaurus start --port 3006",
     "serve": "nx exec -- docusaurus serve --port 3006",
     "clear": "nx exec -- docusaurus clear"
   },

packages/webapp-libs/webapp-api-client/graphql/schema/api.graphql

@@ -48,7 +48,7 @@ type Query {
   hasUnreadNotifications: Boolean
   allNotifications(before: String, after: String, first: Int, last: Int): NotificationConnection
   crudDemoItem(id: ID, tenantId: ID): CrudDemoItemType
-  allCrudDemoItems(tenantId: ID, before: String, after: String, first: Int, last: Int): CrudDemoItemConnection
+  allCrudDemoItems(tenantId: ID, search: String, sort: CrudDemoItemSort, before: String, after: String, first: Int, last: Int): CrudDemoItemConnection
   allContentfulDemoItemFavorites(before: String, after: String, first: Int, last: Int): ContentfulDemoItemFavoriteConnection
   allDocumentDemoItems(before: String, after: String, first: Int, last: Int): DocumentDemoItemConnection
   node(
@@ -1432,6 +1432,10 @@ enum DjstripeChargeStatusChoices {
   "Succeeded"
   SUCCEEDED
 }
+enum CrudDemoItemSort {
+  NAME_ASC
+  NAME_DESC
+}
 enum DjstripeSetupIntentCancellationReasonChoices {
   "Abandoned"
   ABANDONED

packages/webapp-libs/webapp-api-client/src/graphql/__generated/gql/gql.ts

@@ -30,11 +30,9 @@ const documents = {
     "\n  query demoItemsAllQuery {\n    demoItemCollection {\n      items {\n        sys {\n          id\n        }\n        ...demoItemListItemFragment\n      }\n    }\n  }\n": types.DemoItemsAllQueryDocument,
     "\n  mutation addCrudDemoItemMutation($input: CreateCrudDemoItemMutationInput!) {\n    createCrudDemoItem(input: $input) {\n      crudDemoItemEdge {\n        node {\n          id\n          name\n        }\n      }\n    }\n  }\n": types.AddCrudDemoItemMutationDocument,
     "\n  query crudDemoItemDetailsQuery($id: ID!, $tenantId: ID!) {\n    crudDemoItem(id: $id, tenantId: $tenantId) {\n      id\n      name\n    }\n  }\n": types.CrudDemoItemDetailsQueryDocument,
-    "\n  query CrudDemoItemListQuery($tenantId: ID!, $first: Int, $after: String, $last: Int, $before: String) {\n    allCrudDemoItems(tenantId: $tenantId, first: $first, after: $after, last: $last, before: $before) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n": types.CrudDemoItemListQueryDocument,
-    "\n  query crudDemoItemListItemTestQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n": types.CrudDemoItemListItemTestQueryDocument,
+    "\n  query CrudDemoItemListQuery(\n    $tenantId: ID!\n    $search: String\n    $sort: CrudDemoItemSort\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    allCrudDemoItems(\n      tenantId: $tenantId\n      search: $search\n      sort: $sort\n      first: $first\n      after: $after\n      last: $last\n      before: $before\n    ) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n": types.CrudDemoItemListQueryDocument,
+    "\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n    createdBy {\n      firstName\n      lastName\n    }\n    tenant {\n      name\n    }\n  }\n": types.CrudDemoItemListItemFragmentDoc,
     "\n  mutation crudDemoItemListItemDeleteMutation($input: DeleteCrudDemoItemMutationInput!) {\n    deleteCrudDemoItem(input: $input) {\n      deletedIds\n    }\n  }\n": types.CrudDemoItemListItemDeleteMutationDocument,
-    "\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n  }\n": types.CrudDemoItemListItemFragmentDoc,
-    "\n  query crudDemoItemListItemDefaultStoryQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n": types.CrudDemoItemListItemDefaultStoryQueryDocument,
     "\n  query editCrudDemoItemQuery($id: ID!, $tenantId: ID!) {\n    crudDemoItem(id: $id, tenantId: $tenantId) {\n      id\n      name\n    }\n  }\n": types.EditCrudDemoItemQueryDocument,
     "\n  mutation editCrudDemoItemContentMutation($input: UpdateCrudDemoItemMutationInput!) {\n    updateCrudDemoItem(input: $input) {\n      crudDemoItem {\n        id\n        name\n      }\n    }\n  }\n": types.EditCrudDemoItemContentMutationDocument,
     "\n  fragment documentListItem on DocumentDemoItemType {\n    id\n    file {\n      url\n      name\n    }\n    createdAt\n  }\n": types.DocumentListItemFragmentDoc,
@@ -176,23 +174,15 @@ export function gql(source: "\n  query crudDemoItemDetailsQuery($id: ID!, $tenan
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query CrudDemoItemListQuery($tenantId: ID!, $first: Int, $after: String, $last: Int, $before: String) {\n    allCrudDemoItems(tenantId: $tenantId, first: $first, after: $after, last: $last, before: $before) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n"): (typeof documents)["\n  query CrudDemoItemListQuery($tenantId: ID!, $first: Int, $after: String, $last: Int, $before: String) {\n    allCrudDemoItems(tenantId: $tenantId, first: $first, after: $after, last: $last, before: $before) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n"];
+export function gql(source: "\n  query CrudDemoItemListQuery(\n    $tenantId: ID!\n    $search: String\n    $sort: CrudDemoItemSort\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    allCrudDemoItems(\n      tenantId: $tenantId\n      search: $search\n      sort: $sort\n      first: $first\n      after: $after\n      last: $last\n      before: $before\n    ) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n"): (typeof documents)["\n  query CrudDemoItemListQuery(\n    $tenantId: ID!\n    $search: String\n    $sort: CrudDemoItemSort\n    $first: Int\n    $after: String\n    $last: Int\n    $before: String\n  ) {\n    allCrudDemoItems(\n      tenantId: $tenantId\n      search: $search\n      sort: $sort\n      first: $first\n      after: $after\n      last: $last\n      before: $before\n    ) {\n      edges {\n        node {\n          id\n          ...crudDemoItemListItem\n        }\n      }\n      pageCursors {\n        ...pageCursorsFragment\n      }\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function gql(source: "\n  query crudDemoItemListItemTestQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n"): (typeof documents)["\n  query crudDemoItemListItemTestQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n"];
+export function gql(source: "\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n    createdBy {\n      firstName\n      lastName\n    }\n    tenant {\n      name\n    }\n  }\n"): (typeof documents)["\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n    createdBy {\n      firstName\n      lastName\n    }\n    tenant {\n      name\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function gql(source: "\n  mutation crudDemoItemListItemDeleteMutation($input: DeleteCrudDemoItemMutationInput!) {\n    deleteCrudDemoItem(input: $input) {\n      deletedIds\n    }\n  }\n"): (typeof documents)["\n  mutation crudDemoItemListItemDeleteMutation($input: DeleteCrudDemoItemMutationInput!) {\n    deleteCrudDemoItem(input: $input) {\n      deletedIds\n    }\n  }\n"];
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(source: "\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n  }\n"): (typeof documents)["\n  fragment crudDemoItemListItem on CrudDemoItemType {\n    id\n    name\n  }\n"];
-/**
- * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function gql(source: "\n  query crudDemoItemListItemDefaultStoryQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n"): (typeof documents)["\n  query crudDemoItemListItemDefaultStoryQuery {\n    item: crudDemoItem(id: \"test-id\") {\n      ...crudDemoItemListItem\n    }\n  }\n"];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */