From 7656400fd906047c6d2f1b7a27a4b1b877798c4e Mon Sep 17 00:00:00 2001 From: Valera Melnikov Date: Fri, 27 Dec 2024 17:14:42 +0300 Subject: [PATCH] chore: CE code for datasource managment --- .../packages/design-system/ads/jest.config.js | 1 + .../design-system/ads/src/Badge/Badge.mdx | 15 +++ .../ads/src/Badge/Badge.stories.tsx | 50 +++++++ .../ads/src/Badge/Badge.styles.tsx | 24 ++++ .../ads/src/Badge/Badge.test.tsx | 12 ++ .../design-system/ads/src/Badge/Badge.tsx | 15 +++ .../ads/src/Badge/Badge.types.ts | 10 ++ .../design-system/ads/src/Badge/index.ts | 2 + .../ads/src/Icon/Icon.provider.tsx | 62 +++++++++ .../ads/src/Table/Table.stories.tsx | 27 ++-- .../ads/src/Table/Table.styles.tsx | 22 +++- .../ads/src/Table/Table.test.tsx | 123 ++++++++++++++++++ .../design-system/ads/src/Table/Table.tsx | 77 ++++++++++- .../ads/src/Table/Table.types.ts | 25 +++- .../design-system/ads/src/Text/Text.mdx | 2 +- .../ads/src/__assets__/icons/ads/csv-file.svg | 1 + .../ads/src/__assets__/icons/ads/doc-file.svg | 1 + .../src/__assets__/icons/ads/google-drive.svg | 1 + .../src/__assets__/icons/ads/json-file.svg | 1 + .../ads/src/__assets__/icons/ads/md-file.svg | 1 + .../ads/src/__assets__/icons/ads/notion.svg | 1 + .../ads/src/__assets__/icons/ads/pdf-file.svg | 1 + .../ads/src/__assets__/icons/ads/ppt-file.svg | 1 + .../ads/src/__assets__/icons/ads/rtf-file.svg | 1 + .../src/__assets__/icons/ads/salesforce.svg | 1 + .../ads/src/__assets__/icons/ads/tsv-file.svg | 1 + .../ads/src/__assets__/icons/ads/txt-file.svg | 1 + .../ads/src/__assets__/icons/ads/xls-file.svg | 1 + .../ads/src/__assets__/icons/ads/zendesk.svg | 1 + .../packages/design-system/ads/src/index.ts | 1 + .../editorComponents/Debugger/constants.ts | 1 + .../CarbonButton/CarbonButton.tsx | 7 - .../formControls/CarbonButton/index.ts | 1 - .../RagDocuments/RagDocuments.tsx | 13 ++ .../formControls/RagDocuments/index.ts | 1 + .../DataSourceEditor/DatasourceSection.tsx | 13 ++ .../utils/formControl/FormControlRegistry.tsx | 14 +- .../src/utils/formControl/formControlTypes.ts | 1 + 38 files changed, 503 insertions(+), 30 deletions(-) create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.mdx create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.test.tsx create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.tsx create mode 100644 app/client/packages/design-system/ads/src/Badge/Badge.types.ts create mode 100644 app/client/packages/design-system/ads/src/Badge/index.ts create mode 100644 app/client/packages/design-system/ads/src/Table/Table.test.tsx create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/csv-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/doc-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/google-drive.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/json-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/md-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/notion.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/pdf-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/ppt-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/rtf-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/salesforce.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/tsv-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/txt-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/xls-file.svg create mode 100644 app/client/packages/design-system/ads/src/__assets__/icons/ads/zendesk.svg delete mode 100644 app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx delete mode 100644 app/client/src/ee/components/formControls/CarbonButton/index.ts create mode 100644 app/client/src/ee/components/formControls/RagDocuments/RagDocuments.tsx create mode 100644 app/client/src/ee/components/formControls/RagDocuments/index.ts diff --git a/app/client/packages/design-system/ads/jest.config.js b/app/client/packages/design-system/ads/jest.config.js index b9025f10e6db..05dd461a6813 100644 --- a/app/client/packages/design-system/ads/jest.config.js +++ b/app/client/packages/design-system/ads/jest.config.js @@ -17,6 +17,7 @@ module.exports = { "\\.(svg)$": "/fileTransformer.js", // Create this file for SVG handling (see below) }, moduleNameMapper: { + "\\.(css|less)$": "/../../../test/__mocks__/styleMock.js", // this mocks all binary files so jest doesn't try to convert it into js "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/fileTransformer.js", diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.mdx b/app/client/packages/design-system/ads/src/Badge/Badge.mdx new file mode 100644 index 000000000000..566eaaa3fa40 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.mdx @@ -0,0 +1,15 @@ +import { Canvas, Meta } from "@storybook/blocks"; + +import * as BadgeStories from "./Badge.stories"; + + + +# Badge + +A Badge component is a small visual element used to display additional information, typically in the form of status, count, or notification. + + + +## Usage + +Badge component often used to enhance the user's understanding of a piece of content or interface element. diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx b/app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx new file mode 100644 index 000000000000..96495ac49e06 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx @@ -0,0 +1,50 @@ +import React from "react"; +import type { StoryObj } from "@storybook/react"; +import { Badge } from "./Badge"; +import styled from "styled-components"; +import type { BadgeProps } from "./Badge.types"; + +export default { + title: "ADS/Components/Badge", + component: Badge, + argTypes: { + kind: { + options: ["success", "error", "warning"], + control: { type: "radio" }, + }, + }, +}; + +const Template = (args: BadgeProps) => { + return ( + + + + ); +}; + +const Box = styled.div` + width: 8vh; + height: 8vh; + + display: flex; + align-items: center; + justify-content: center; +`; + +export const BadgeStory = Template.bind({}) as StoryObj; + +export const ButtonSuccessStory = Template.bind({}) as StoryObj; +ButtonSuccessStory.args = { + kind: "success", +}; + +export const ButtonErrorStory = Template.bind({}) as StoryObj; +ButtonErrorStory.args = { + kind: "error", +}; + +export const ButtonWarningStory = Template.bind({}) as StoryObj; +ButtonWarningStory.args = { + kind: "warning", +}; diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx b/app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx new file mode 100644 index 000000000000..195913bd4ada --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx @@ -0,0 +1,24 @@ +import styled, { css } from "styled-components"; +import type { BadgeKind } from "./Badge.types"; + +const Kind = { + error: css` + --badge-color-bg: var(--ads-v2-color-fg-error); + `, + warning: css` + --badge-color-bg: var(--ads-v2-color-fg-warning); + `, + success: css` + --badge-color-bg: var(--ads-v2-color-fg-success); + `, +}; + +export const StyledBadge = styled.div<{ + kind?: BadgeKind; +}>` + width: 8px; + height: 8px; + background-color: var(--badge-color-bg); + border-radius: 50%; + ${({ kind }) => kind && Kind[kind]} +`; diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.test.tsx b/app/client/packages/design-system/ads/src/Badge/Badge.test.tsx new file mode 100644 index 000000000000..09c14d5c62ee --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.test.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { render, screen } from "@testing-library/react"; +import { Badge } from "./Badge"; + +describe("Badge", () => { + it("renders", () => { + render(); + const badge = screen.getByTestId("t--badge"); + + expect(badge).toBeInTheDocument(); + }); +}); diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.tsx b/app/client/packages/design-system/ads/src/Badge/Badge.tsx new file mode 100644 index 000000000000..87da65a36012 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import type { BadgeProps } from "./Badge.types"; +import { StyledBadge } from "./Badge.styles"; + +/** + * The Badge component is a small visual element used to display additional information, + * typically in the form of status, count, or notification. + * + * @param kind + * @param className + * @constructor + */ +export function Badge({ className, kind = "success", ...rest }: BadgeProps) { + return ; +} diff --git a/app/client/packages/design-system/ads/src/Badge/Badge.types.ts b/app/client/packages/design-system/ads/src/Badge/Badge.types.ts new file mode 100644 index 000000000000..e7ce9a9b6944 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/Badge.types.ts @@ -0,0 +1,10 @@ +import type { Kind } from "../__config__/types"; + +export type BadgeKind = Exclude; + +export interface BadgeProps { + /** visual style to be used indicating type of badge */ + kind?: BadgeKind; + /** (try not to) pass addition classes here */ + className?: string; +} diff --git a/app/client/packages/design-system/ads/src/Badge/index.ts b/app/client/packages/design-system/ads/src/Badge/index.ts new file mode 100644 index 000000000000..4e1d38688a35 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Badge/index.ts @@ -0,0 +1,2 @@ +export * from "./Badge"; +export * from "./Badge.types"; diff --git a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx index 8db9b910c9b1..d12bc1f519d5 100644 --- a/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx +++ b/app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx @@ -1103,6 +1103,54 @@ const ContentTypeRaw = importSvg( async () => import("../__assets__/icons/ads/content-type-raw.svg"), ); +const NotionIcon = importSvg( + async () => import("../__assets__/icons/ads/notion.svg"), +); + +const ZendeskIcon = importSvg( + async () => import("../__assets__/icons/ads/zendesk.svg"), +); + +const GoogleDriveIcon = importSvg( + async () => import("../__assets__/icons/ads/google-drive.svg"), +); + +const SalesforceIcon = importSvg( + async () => import("../__assets__/icons/ads/salesforce.svg"), +); + +const MdFileIcon = importSvg( + async () => import("../__assets__/icons/ads/md-file.svg"), +); +const PdfFileIcon = importSvg( + async () => import("../__assets__/icons/ads/pdf-file.svg"), +); +const TxtFileIcon = importSvg( + async () => import("../__assets__/icons/ads/txt-file.svg"), +); + +const CsvFileIcon = importSvg( + async () => import("../__assets__/icons/ads/csv-file.svg"), +); +const DocFileIcon = importSvg( + async () => import("../__assets__/icons/ads/doc-file.svg"), +); +const JsonFileIcon = importSvg( + async () => import("../__assets__/icons/ads/json-file.svg"), +); +const PptFileIcon = importSvg( + async () => import("../__assets__/icons/ads/ppt-file.svg"), +); +const RtfFileIcon = importSvg( + async () => import("../__assets__/icons/ads/rtf-file.svg"), +); +const TsvFileIcon = importSvg( + async () => import("../__assets__/icons/ads/tsv-file.svg"), +); +const XlsFileIcon = importSvg( + async () => import("../__assets__/icons/ads/xls-file.svg"), +); + import PlayIconPNG from "../__assets__/icons/control/play-icon.png"; function PlayIconPNGWrapper() { @@ -1493,6 +1541,20 @@ const ICON_LOOKUP = { widget: WidgetIcon, workflows: WorkflowsIcon, workspace: WorkspaceIcon, + notion: NotionIcon, + "md-file": MdFileIcon, + "pdf-file": PdfFileIcon, + "txt-file": TxtFileIcon, + "csv-file": CsvFileIcon, + "doc-file": DocFileIcon, + "json-file": JsonFileIcon, + "ppt-file": PptFileIcon, + "rtf-file": RtfFileIcon, + "tsv-file": TsvFileIcon, + "xls-file": XlsFileIcon, + zendesk: ZendeskIcon, + "google-drive": GoogleDriveIcon, + salesforce: SalesforceIcon, }; export const IconCollection = Object.keys(ICON_LOOKUP); diff --git a/app/client/packages/design-system/ads/src/Table/Table.stories.tsx b/app/client/packages/design-system/ads/src/Table/Table.stories.tsx index 56c5c8b37ac8..c3acb1112ae5 100644 --- a/app/client/packages/design-system/ads/src/Table/Table.stories.tsx +++ b/app/client/packages/design-system/ads/src/Table/Table.stories.tsx @@ -150,32 +150,32 @@ export const TableStory: Story = { { title: "Column 1", dataIndex: "col1", - width: 100, + width: 110, }, { title: "Column 2", dataIndex: "col2", - width: 100, + width: 110, }, { title: "Column 3", dataIndex: "col3", - width: 100, + width: 110, }, { title: "Column 4", dataIndex: "col4", - width: 100, + width: 110, }, { title: "Column 5", dataIndex: "col5", - width: 100, + width: 110, }, { title: "Column 6", dataIndex: "col6", - width: 100, + width: 110, ellipsis: { showTitle: false, }, @@ -188,7 +188,7 @@ export const TableStory: Story = { { title: "Column 7", dataIndex: "col7", - width: 100, + width: 110, }, ], data: [ @@ -198,7 +198,7 @@ export const TableStory: Story = { col3: "Row 1, Column 3", col4: "Row 1, Column 4", col5: "Row 1, Column 5", - col6: "Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6", + col6: "Row 1, Column 6", col7: "Row 1, Column 7", col8: "Row 1, Column 8", col9: "Row 1, Column 9", @@ -432,3 +432,14 @@ export const TableColumnStory: ColumnStory = { }, }, }; + +/** + * Sorting in the table can be enabled by passing the `isSortable` prop. For primitive data types, sorting will work automatically. + * To enable sorting for objects, the `sortBy` prop must also be passed in columns data. The value of the `sortBy` property will be used as the key for sorting. + */ +export const SortableTable: Story = { + args: { + ...TableStory.args, + isSortable: true, + }, +}; diff --git a/app/client/packages/design-system/ads/src/Table/Table.styles.tsx b/app/client/packages/design-system/ads/src/Table/Table.styles.tsx index 5ea487b5e56f..3328bc74bc74 100644 --- a/app/client/packages/design-system/ads/src/Table/Table.styles.tsx +++ b/app/client/packages/design-system/ads/src/Table/Table.styles.tsx @@ -9,6 +9,7 @@ import { TableHeaderClassName, TableHeaderRowClassName, } from "./Table.constants"; +import { Icon, type IconProps } from "../Icon"; export const StyledTable = styled.table.attrs(({ className }) => ({ className: clsx(TableClassName, className), @@ -28,9 +29,14 @@ export const StyledHeaderRow = styled.tr.attrs(({ className }) => ({ height: var(--ads-v2-spaces-13); `; +export const StyledIcon = styled(Icon)` + display: inline-flex; + visibility: ${({ isVisible }) => (isVisible ? "unset" : "hidden")}; +`; + export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ className: clsx(TableHeaderCellClassName, className), -}))` +}))<{ isSortable?: boolean }>` && { font-size: var(--ads-v2-font-size-4); font-style: normal; @@ -44,6 +50,14 @@ export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ background-color: var(--ads-v2-colors-content-surface-neutral-bg); border-bottom: 1px solid var(--ads-v2-colors-content-surface-default-border); text-align: left; + + &:has(${StyledIcon}) { + cursor: pointer; + user-select: none; + } + + &:hover ${StyledIcon} { + visibility: visible; } `; @@ -73,3 +87,9 @@ export const StyledCell = styled.td.attrs(({ className }) => ({ background: var(--ads-v2-colors-content-surface-neutral-bg); } `; + +export const StyledTitle = styled.span` + display: inline-flex; + align-items: center; + gap: var(--ads-v2-spaces-2); +`; diff --git a/app/client/packages/design-system/ads/src/Table/Table.test.tsx b/app/client/packages/design-system/ads/src/Table/Table.test.tsx new file mode 100644 index 000000000000..d623bba94695 --- /dev/null +++ b/app/client/packages/design-system/ads/src/Table/Table.test.tsx @@ -0,0 +1,123 @@ +import React from "react"; +import { render, screen, fireEvent } from "@testing-library/react"; +import "@testing-library/jest-dom/extend-expect"; +import { Table } from "./Table"; + +const columns = [ + { + title: "Name", + dataIndex: "name", + }, + { + title: "Age", + dataIndex: "age", + }, + { + title: "Address", + dataIndex: "address", + render: (value: { city: string }) => `${value.city}`, + sortBy: "city", + }, +]; + +const fakeData = [ + { + key: "1", + name: "Ash", + age: 28, + address: { city: "New York" }, + }, + { + key: "2", + name: "Jane", + age: 22, + address: { city: "Los Angeles" }, + }, + { + key: "3", + name: "Doe", + age: 32, + address: { city: "Chicago" }, + }, +]; + +const ashRowText = `${fakeData[0].name}${fakeData[0].age}${fakeData[0].address.city}`; +const janeRowText = `${fakeData[1].name}${fakeData[1].age}${fakeData[1].address.city}`; +const doeRowText = `${fakeData[2].name}${fakeData[2].age}${fakeData[2].address.city}`; + +describe("Table Component", () => { + it("sorts table by name in ascending order", async () => { + render(); + + fireEvent.click(screen.getByText("Name")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(ashRowText); + expect(rows[2]).toHaveTextContent(doeRowText); + expect(rows[3]).toHaveTextContent(janeRowText); + }); + + it("sorts table by name in descending order", async () => { + render(
); + + fireEvent.click(screen.getByText("Name")); + fireEvent.click(screen.getByText("Name")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(janeRowText); + expect(rows[2]).toHaveTextContent(doeRowText); + expect(rows[3]).toHaveTextContent(ashRowText); + }); + + it("sorts table by age in ascending order", async () => { + render(
); + + fireEvent.click(screen.getByText("Age")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(janeRowText); + expect(rows[2]).toHaveTextContent(ashRowText); + expect(rows[3]).toHaveTextContent(doeRowText); + }); + + it("sorts table by age in descending order", async () => { + render(
); + + fireEvent.click(screen.getByText("Age")); + fireEvent.click(screen.getByText("Age")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(doeRowText); + expect(rows[2]).toHaveTextContent(ashRowText); + expect(rows[3]).toHaveTextContent(janeRowText); + }); + + it("sorts table by city in ascending order", async () => { + render(
); + + fireEvent.click(screen.getByText("Address")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(doeRowText); + expect(rows[2]).toHaveTextContent(janeRowText); + expect(rows[3]).toHaveTextContent(ashRowText); + }); + + it("sorts table by city in descending order", async () => { + render(
); + + fireEvent.click(screen.getByText("Address")); + fireEvent.click(screen.getByText("Address")); + + const rows = screen.getAllByRole("row"); + + expect(rows[1]).toHaveTextContent(ashRowText); + expect(rows[2]).toHaveTextContent(janeRowText); + expect(rows[3]).toHaveTextContent(doeRowText); + }); +}); diff --git a/app/client/packages/design-system/ads/src/Table/Table.tsx b/app/client/packages/design-system/ads/src/Table/Table.tsx index 4f2a4c6b673c..675f9c44597d 100644 --- a/app/client/packages/design-system/ads/src/Table/Table.tsx +++ b/app/client/packages/design-system/ads/src/Table/Table.tsx @@ -1,31 +1,35 @@ -import React from "react"; +import React, { useState } from "react"; import RcTable from "rc-table"; import clsx from "classnames"; - import "rc-table/assets/index.css"; import "./reset.css"; - +import type { DataIndex } from "rc-table/es/interface"; import type { DefaultRecordType } from "rc-table/lib/interface"; -import type { TableProps } from "./Table.types"; +import type { TableColumn, TableProps, TableSorter } from "./Table.types"; import { StyledBody, StyledCell, StyledHeader, StyledHeaderCell, StyledHeaderRow, + StyledIcon, StyledRow, StyledTable, + StyledTitle, } from "./Table.styles"; import { TableWrapperClassName } from "./Table.constants"; import { Icon } from "../Icon"; import { Text } from "../Text"; import { Flex } from "../Flex"; +import { orderBy } from "lodash"; function Table({ className, emptyText = NoData, ...props }: TableProps) { + const { columns, data, isSortable = false } = props; + const components = { table: StyledTable, header: { @@ -40,11 +44,76 @@ function Table({ }, }; + const [sorter, setSorter] = useState({ + field: undefined, + order: undefined, + path: undefined, + }); + + const handleSort = (field?: DataIndex, sortBy?: string) => { + setSorter((prev) => { + const isAsc = prev.field === field && prev.order === "asc"; + + return { + field, + order: isAsc ? "desc" : "asc", + path: sortBy ? `${field}.${sortBy}` : field, + }; + }); + }; + + const renderTitle = (col: TableColumn) => { + if (col.isSortable === false) return col.title; + + return ( + + {col.title} + + + ); + }; + + const getColumns = () => { + if (!isSortable) return columns; + + return columns?.map((col: TableColumn) => ({ + ...col, + onHeaderCell: () => ({ + onClick: () => { + if (col.isSortable === false) return; + + handleSort(col?.dataIndex, col?.sortBy); + }, + }), + title: renderTitle(col), + })); + }; + + const getData = () => { + if (!Array.isArray(data)) return; + + if (!isSortable || !sorter.field) return data; + + if (sorter.order === "asc") { + return orderBy(data, sorter.path, "asc"); + } + + if (sorter.order === "desc") { + return orderBy(data, sorter.path, "desc"); + } + }; + return ( {...props} className={clsx(TableWrapperClassName, className)} + columns={getColumns()} components={components} + data={getData()} emptyText={emptyText} /> ); diff --git a/app/client/packages/design-system/ads/src/Table/Table.types.ts b/app/client/packages/design-system/ads/src/Table/Table.types.ts index 80b87b9aa5fb..fb51677e86a5 100644 --- a/app/client/packages/design-system/ads/src/Table/Table.types.ts +++ b/app/client/packages/design-system/ads/src/Table/Table.types.ts @@ -1,7 +1,26 @@ import type { TableProps as RcTableProps } from "rc-table"; -import type { DefaultRecordType } from "rc-table/lib/interface"; +import type { DataIndex } from "rc-table/es/interface"; +import type { ColumnType, DefaultRecordType } from "rc-table/lib/interface"; + +export interface TableColumn + extends ColumnType { + // the key for sorting columns with objects. possible to pass both a simple `key` and `key.key` for nested object. + sortBy?: string; + // By default, the columns are sortable. Explicitly passing isSortable === false makes the column non-sortable, + isSortable?: boolean; +} export type TableProps = Omit< RcTableProps, - "styles" | "components" ->; + "styles" | "components" | "columns" +> & { + columns: TableColumn[]; + sortBy?: string; + isSortable?: boolean; +}; + +export interface TableSorter { + field?: DataIndex; + order?: "desc" | "asc"; + path?: string | DataIndex; +} diff --git a/app/client/packages/design-system/ads/src/Text/Text.mdx b/app/client/packages/design-system/ads/src/Text/Text.mdx index fdd8c6b185e9..547cc720aed5 100644 --- a/app/client/packages/design-system/ads/src/Text/Text.mdx +++ b/app/client/packages/design-system/ads/src/Text/Text.mdx @@ -12,4 +12,4 @@ Use the text component for displaying textual information to the user (as headin - Only use text tokens (text styles in figma) when the Text component doesn’t meet your need. - Use sentence case. No capital letters. -To know more about how to use typography, refer [Typography](https://design-system.appsmith.com/?path=/docs/typography--documentation) +To know more about how to use typography, refer [Typography](https://design-system.appsmith.com/?path=/docs/ads-docs-typography--docs) diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/csv-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/csv-file.svg new file mode 100644 index 000000000000..997796d51593 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/csv-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/doc-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/doc-file.svg new file mode 100644 index 000000000000..0b8482067ad4 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/doc-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/google-drive.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/google-drive.svg new file mode 100644 index 000000000000..6c680d701919 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/google-drive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/json-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/json-file.svg new file mode 100644 index 000000000000..47686ed38293 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/json-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/md-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/md-file.svg new file mode 100644 index 000000000000..21036e766256 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/md-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/notion.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/notion.svg new file mode 100644 index 000000000000..3c29501520b7 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/notion.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/pdf-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/pdf-file.svg new file mode 100644 index 000000000000..c6a245fbbabd --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/pdf-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/ppt-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/ppt-file.svg new file mode 100644 index 000000000000..3593de41e2e0 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/ppt-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/rtf-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/rtf-file.svg new file mode 100644 index 000000000000..e4cec820c04d --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/rtf-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/salesforce.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/salesforce.svg new file mode 100644 index 000000000000..edb151c10c72 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/salesforce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/tsv-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tsv-file.svg new file mode 100644 index 000000000000..b0061e1d6bfe --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/tsv-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/txt-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/txt-file.svg new file mode 100644 index 000000000000..f62cdb0ddfba --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/txt-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/xls-file.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/xls-file.svg new file mode 100644 index 000000000000..3dd518087d93 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/xls-file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/__assets__/icons/ads/zendesk.svg b/app/client/packages/design-system/ads/src/__assets__/icons/ads/zendesk.svg new file mode 100644 index 000000000000..de3fc5411f23 --- /dev/null +++ b/app/client/packages/design-system/ads/src/__assets__/icons/ads/zendesk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/app/client/packages/design-system/ads/src/index.ts b/app/client/packages/design-system/ads/src/index.ts index 4afae937fda1..4a9cee88b871 100644 --- a/app/client/packages/design-system/ads/src/index.ts +++ b/app/client/packages/design-system/ads/src/index.ts @@ -37,3 +37,4 @@ export * from "./ToggleButton"; export * from "./Tooltip"; export * from "./ToggleButtonGroup"; export * from "./Templates"; +export * from "./Badge"; diff --git a/app/client/src/components/editorComponents/Debugger/constants.ts b/app/client/src/components/editorComponents/Debugger/constants.ts index 7dfd9c6eebac..86dda1d56040 100644 --- a/app/client/src/components/editorComponents/Debugger/constants.ts +++ b/app/client/src/components/editorComponents/Debugger/constants.ts @@ -1,4 +1,5 @@ export enum DEBUGGER_TAB_KEYS { + DATA_TAB = "DATA_TAB", DATASOURCE_TAB = "DATASOURCE_TAB", RESPONSE_TAB = "RESPONSE_TAB", HEADER_TAB = "HEADERS_TAB", diff --git a/app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx b/app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx deleted file mode 100644 index e98751ee4d19..000000000000 --- a/app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import type { ControlProps } from "../../../../components/formControls/BaseControl"; - -export interface CarbonButtonProps extends ControlProps {} - -export const CarbonButton = () => { - return null; -}; diff --git a/app/client/src/ee/components/formControls/CarbonButton/index.ts b/app/client/src/ee/components/formControls/CarbonButton/index.ts deleted file mode 100644 index a0c07b92bb9d..000000000000 --- a/app/client/src/ee/components/formControls/CarbonButton/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./CarbonButton"; diff --git a/app/client/src/ee/components/formControls/RagDocuments/RagDocuments.tsx b/app/client/src/ee/components/formControls/RagDocuments/RagDocuments.tsx new file mode 100644 index 000000000000..ccf324f9c8e3 --- /dev/null +++ b/app/client/src/ee/components/formControls/RagDocuments/RagDocuments.tsx @@ -0,0 +1,13 @@ +interface RagDocumentsProps { + datasourceId?: string; + workspaceId?: string; + isDeletedAvailable?: boolean; + isImportDataAvailable?: boolean; + setCount?: (count: number) => void; +} + +// Used in EE +// eslint-disable-next-line @typescript-eslint/no-unused-vars +export const RagDocuments = (props: RagDocumentsProps) => { + return null; +}; diff --git a/app/client/src/ee/components/formControls/RagDocuments/index.ts b/app/client/src/ee/components/formControls/RagDocuments/index.ts new file mode 100644 index 000000000000..6975cdc03cfc --- /dev/null +++ b/app/client/src/ee/components/formControls/RagDocuments/index.ts @@ -0,0 +1 @@ +export { RagDocuments } from "./RagDocuments"; diff --git a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx b/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx index 677849f7a85f..5d1b79d32693 100644 --- a/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx +++ b/app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx @@ -22,6 +22,7 @@ import { selectFeatureFlags } from "ee/selectors/featureFlagsSelectors"; import { Text } from "@appsmith/ads"; import { Table } from "@appsmith/ads-old"; import type { FeatureFlags } from "ee/entities/FeatureFlag"; +import { RagDocuments } from "ee/components/formControls/RagDocuments"; const Key = styled.div` color: var(--ads-v2-color-fg-muted); @@ -185,6 +186,18 @@ export function renderDatasourceSection( `datasourceStorages.${currentEnvironment}.` + configProperty; const reactKey = datasource.id + "_" + label; + if (controlType === "RAG_DOCUMENTS") { + return ( + + ); + } + if (controlType === "FIXED_KEY_INPUT") { return ( diff --git a/app/client/src/utils/formControl/FormControlRegistry.tsx b/app/client/src/utils/formControl/FormControlRegistry.tsx index 3d174d27ad4e..b6fc6785c321 100644 --- a/app/client/src/utils/formControl/FormControlRegistry.tsx +++ b/app/client/src/utils/formControl/FormControlRegistry.tsx @@ -37,8 +37,7 @@ import MultiFilePickerControl from "components/formControls/MultiFilePickerContr import type { MultipleFilePickerControlProps } from "components/formControls/MultiFilePickerControl"; import type { RadioButtonControlProps } from "components/formControls/RadioButtonControl"; import RadioButtonControl from "components/formControls/RadioButtonControl"; -import type { CarbonButtonProps } from "ee/components/formControls/CarbonButton"; -import { CarbonButton } from "ee/components/formControls/CarbonButton"; +import { RagDocuments } from "ee/components/formControls/RagDocuments"; /** * NOTE: If you are adding a component that uses FormControl @@ -192,9 +191,14 @@ class FormControlRegistry { return ; }, }); - FormControlFactory.registerControlBuilder(formControlTypes.CARBON_BUTTON, { - buildPropertyControl(controlProps: CarbonButtonProps): JSX.Element { - return ; + FormControlFactory.registerControlBuilder(formControlTypes.RAG_DOCUMENTS, { + buildPropertyControl(controlProps): JSX.Element { + return ( + + ); }, }); } diff --git a/app/client/src/utils/formControl/formControlTypes.ts b/app/client/src/utils/formControl/formControlTypes.ts index ff068339385b..fe8458cf87ea 100644 --- a/app/client/src/utils/formControl/formControlTypes.ts +++ b/app/client/src/utils/formControl/formControlTypes.ts @@ -20,4 +20,5 @@ export default { MULTIPLE_FILE_PICKER: "MULTIPLE_FILE_PICKER", RADIO_BUTTON: "RADIO_BUTTON", CARBON_BUTTON: "CARBON_BUTTON", + RAG_DOCUMENTS: "RAG_DOCUMENTS", };