-
This is where the models table will be
-
-
- Example model page
-
-
+ {models.length > 0 && (
+
{
+ return {
+ columns: [
+ {
+ content: (
+
+ {model.name}
+
+ ),
+ },
+ {
+ content: maskString(model["api-key"]),
+ className: "u-align--right",
+ },
+ {
+ content: format(
+ new Date(model["modified-at"]),
+ "dd/MM/yyyy"
+ ),
+ className: "u-align--right",
+ },
+ {
+ content: format(
+ new Date(model["created-at"]),
+ "dd/MM/yyyy"
+ ),
+ className: "u-align--right",
+ },
+ ],
+ sortData: {
+ name: model.name,
+ "modified-at": model["modified-at"],
+ "created-at": model["created-at"],
+ },
+ };
+ })}
+ />
+ )}
diff --git a/static/js/brand-store/components/Models/models-data.js b/static/js/brand-store/components/Models/models-data.js
new file mode 100644
index 0000000000..43509454b1
--- /dev/null
+++ b/static/js/brand-store/components/Models/models-data.js
@@ -0,0 +1,106 @@
+const modelsData = {
+ success: true,
+ message: "The request has been successful",
+ data: [
+ {
+ name: "model-1",
+ "api-key": "e15a9abc390b4514a35752f5851e27b8",
+ "created-at": "2022-03-29T13:03:11.095Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-27T13:06:25.541Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-2",
+ "api-key": "80eb997804364d1a9008777584082e3d",
+ "created-at": "2018-07-14T13:03:35.452Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:06:52.630Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-3",
+ "api-key": "fea502ee59c249369073b96034b56770",
+ "created-at": "2021-10-31T13:07:10.090Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:03:35.452Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-4",
+ "api-key": "a19e3ac3d7d442e39c0d",
+ "created-at": "2022-03-29T13:03:11.095Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-27T13:06:25.541Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-5",
+ "api-key": "d24277fd31a8450ca326",
+ "created-at": "2018-07-14T13:03:35.452Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:06:52.630Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-6",
+ "api-key": "e9797541fbe44cf6b788",
+ "created-at": "2021-10-31T13:07:10.090Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:03:35.452Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-7",
+ "api-key": "9d022dcdb4b4413bb1a0",
+ "created-at": "2022-03-29T13:03:11.095Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-27T13:06:25.541Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-8",
+
+ "api-key": "892f97b614bf4c70a6ac",
+ "created-at": "2018-07-14T13:03:35.452Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:06:52.630Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-9",
+ "api-key": "48135fc256a840638dba",
+
+ "created-at": "2021-10-31T13:07:10.090Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:03:35.452Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-10",
+ "api-key": "87a5cf9c6bc84f219c34",
+ "created-at": "2022-03-29T13:03:11.095Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-27T13:06:25.541Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-11",
+ "api-key": "1f7a61567e944e53a584",
+ "created-at": "2018-07-14T13:03:35.452Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:06:52.630Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-12",
+ "api-key": "437d5599c88a4d15840d",
+ "created-at": "2021-10-31T13:07:10.090Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:03:35.452Z",
+ "modified-by": "publisherId",
+ },
+ ],
+};
+
+export default modelsData;
diff --git a/static/js/brand-store/types/shared.ts b/static/js/brand-store/types/shared.ts
index 26fb4b539f..8f56dcd362 100644
--- a/static/js/brand-store/types/shared.ts
+++ b/static/js/brand-store/types/shared.ts
@@ -94,3 +94,12 @@ export type Store = {
snaps: SnapsList;
userHasAccess: boolean;
};
+
+export type Model = {
+ name: string;
+ "api-key": string;
+ "created-at": string;
+ "created-by": string;
+ "modified-at": string;
+ "modified-by": string;
+};
diff --git a/static/js/brand-store/utils/getFilteredModels.test.ts b/static/js/brand-store/utils/getFilteredModels.test.ts
new file mode 100644
index 0000000000..acdeac63b6
--- /dev/null
+++ b/static/js/brand-store/utils/getFilteredModels.test.ts
@@ -0,0 +1,46 @@
+import getFilteredModels from "./getFilteredModels";
+
+const mockModels = [
+ {
+ name: "model-1",
+ "api-key": "e15a9abc390b4514a35752f5851e27b8",
+ "created-at": "2022-03-29T13:03:11.095Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-27T13:06:25.541Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-2",
+ "api-key": "80eb997804364d1a9008777584082e3d",
+ "created-at": "2018-07-14T13:03:35.452Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:06:52.630Z",
+ "modified-by": "publisherId",
+ },
+ {
+ name: "model-3",
+ "api-key": "fea502ee59c249369073b96034b56770",
+ "created-at": "2021-10-31T13:07:10.090Z",
+ "created-by": "publisherId",
+ "modified-at": "2023-06-29T13:03:35.452Z",
+ "modified-by": "publisherId",
+ },
+];
+
+describe("getFilteredModels", () => {
+ it("returns unfiltered models if no filter query", () => {
+ expect(getFilteredModels(mockModels).length).toEqual(mockModels.length);
+ expect(getFilteredModels(mockModels)[0].name).toEqual(mockModels[0].name);
+ expect(getFilteredModels(mockModels)[1].name).toEqual(mockModels[1].name);
+ expect(getFilteredModels(mockModels)[2].name).toEqual(mockModels[2].name);
+ });
+
+ it("returns no models if filter query doesn't match", () => {
+ expect(getFilteredModels(mockModels, "foobar").length).toEqual(0);
+ });
+
+ it("returns filtered models if query matches", () => {
+ expect(getFilteredModels(mockModels, "model-2").length).toBe(1);
+ expect(getFilteredModels(mockModels, "model-2")[0].name).toEqual("model-2");
+ });
+});
diff --git a/static/js/brand-store/utils/getFilteredModels.ts b/static/js/brand-store/utils/getFilteredModels.ts
new file mode 100644
index 0000000000..4bd1d2f550
--- /dev/null
+++ b/static/js/brand-store/utils/getFilteredModels.ts
@@ -0,0 +1,22 @@
+import type { Model } from "../types/shared";
+
+function getFilteredModels(models: Array