feat: add known facts drawer ui

src/components/KnownFacts/KnownFacts.css

@@ -0,0 +1,19 @@
+.memori-known-facts-modal {
+    z-index: 10000;
+}
+
+.memori-known-facts-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    margin: 1rem 0;
+}
+
+.memori-known-facts-actions .memori-button[disabled] {
+    opacity: 0.4;
+}
+
+.memori-known-facts-delete-selected {
+    margin-left: auto;
+}

src/components/KnownFacts/KnownFacts.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { memori, sessionID, knownFact } from '../../mocks/data';
+import I18nWrapper from '../../I18nWrapper';
+import KnownFacts, { Props } from './KnownFacts';
+
+import './KnownFacts.css';
+
+const meta: Meta = {
+  title: 'Known Facts',
+  component: KnownFacts,
+  argTypes: {
+    visible: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+export default meta;
+
+const Template: Story<Props> = args => (
+  <I18nWrapper>
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      sessionID={sessionID}
+      memori={memori}
+      closeDrawer={() => {}}
+      {...args}
+    />
+  </I18nWrapper>
+);
+
+// By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
+// https://storybook.js.org/docs/react/workflows/unit-testing
+export const Default = Template.bind({});
+Default.args = {
+  visible: true,
+};
+
+export const WithData = Template.bind({});
+WithData.args = {
+  visible: true,
+  initialKnownFacts: [knownFact],
+};
+
+export const WithPaginatedData = Template.bind({});
+WithPaginatedData.args = {
+  visible: true,
+  initialKnownFacts: new Array(26).fill(knownFact).map((fact, index) => ({
+    ...fact,
+    knownFactID: fact.knownFactID + index,
+  })),
+};
+
+export const WithRealDataLocalhost = Template.bind({});
+WithRealDataLocalhost.args = {
+  visible: true,
+  sessionID: '5841f5f9-3315-4a5a-9b62-33b13d5a27fd',
+  apiURL: 'http://localhost:7778',
+  memori: {
+    memoriName: 'test memori',
+    ownerUserName: 'nicola',
+    memoriID: '1a9c75e8-57aa-4ce3-8ea5-256185fa79a7',
+    ownerUserID: '04a8cff9-13d6-4367-9cb2-72b9af9ee494',
+    tenantID: 'app.memorytwin.com',
+    apiURL: 'http://localhost:7778',
+    baseURL: 'http://localhost:3000',
+    uiLang: 'EN',
+    lang: 'IT',
+    layout: 'FULLPAGE',
+    showShare: 'true',
+    integrationID: '82f017cc-450b-4c47-acf5-47910d336ce9',
+  },
+};

src/components/KnownFacts/KnownFacts.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import KnownFacts from './KnownFacts';
+import { knownFact, memori, sessionID } from '../../mocks/data';
+
+beforeEach(() => {
+  // @ts-ignore
+  window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+    takeRecords: jest.fn(),
+  }));
+});
+
+it('renders KnownFacts hidden unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={false}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders KnownFacts visible unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={true}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});
+
+it('renders KnownFacts with data unchanged', () => {
+  const { container } = render(
+    <KnownFacts
+      apiURL="https://backend.memori.ai"
+      memori={memori}
+      sessionID={sessionID}
+      visible={true}
+      initialKnownFacts={[knownFact]}
+      closeDrawer={jest.fn()}
+    />
+  );
+  expect(container).toMatchSnapshot();
+});