Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: CE code for datasource management (#38394)

Browse Source 
## Description
EE PR https://github.com/appsmithorg/appsmith-ee/pull/5821

## Automation

/ok-to-test tags="@tag.Datasource"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12518278301>
> Commit: 7656400fd906047c6d2f1b7a27a4b1b877798c4e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12518278301&attempt=2&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Datasource
> Spec: 
> The following are new failures, please fix them before merging the PR:
<ol>
> <li>cypress/e2e/Sanity/Datasources/MockDBs_Spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 27 Dec 2024 17:23:33 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new `Badge` component with documentation and stories for
usage.
- Added a new `RagDocuments` component for handling RAG documents in the
editor.
	- Enhanced the `Table` component with sorting functionality.
	- Expanded the icon collection with new icons.
	- Updated documentation links for the Text component.
	- Added a new `DATA_TAB` entry to the debugger tab keys.

- **Bug Fixes**
- Adjusted column widths and content in the Table stories for better
presentation.

- **Chores**
	- Removed unused `CarbonButton` component and related files.
- Updated the test suite for the `Table` component to validate sorting
functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Valera Melnikov 2024-12-27 20:29:59 +03:00 committed by GitHub
parent ec51cf0956
commit cf534946b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
38 changed files with 503 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/packages/design-system/ads/jest.config.js
View File

@ -17,6 +17,7 @@ module.exports = {
"\\.(svg)$": "<rootDir>/fileTransformer.js", // Create this file for SVG handling (see below)
},
moduleNameMapper: {
"\\.(css|less)$": "<rootDir>/../../../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)$":
"<rootDir>/fileTransformer.js",

15
app/client/packages/design-system/ads/src/Badge/Badge.mdx Normal file
View File

@ -0,0 +1,15 @@
import { Canvas, Meta } from "@storybook/blocks";
import * as BadgeStories from "./Badge.stories";
<Meta of={BadgeStories} />
# Badge
A Badge component is a small visual element used to display additional information, typically in the form of status, count, or notification.
<Canvas of={BadgeStories.BadgeStory} />
## Usage
Badge component often used to enhance the user's understanding of a piece of content or interface element.

50
app/client/packages/design-system/ads/src/Badge/Badge.stories.tsx Normal file
View File

@ -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 (
<Box>
<Badge {...args} />
</Box>
);
};
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",
};

24
app/client/packages/design-system/ads/src/Badge/Badge.styles.tsx Normal file
View File

@ -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]}
`;

12
app/client/packages/design-system/ads/src/Badge/Badge.test.tsx Normal file
View File

@ -0,0 +1,12 @@
import React from "react";
import { render, screen } from "@testing-library/react";
import { Badge } from "./Badge";
describe("Badge", () => {
it("renders", () => {
render(<Badge data-testid="t--badge" />);
const badge = screen.getByTestId("t--badge");
expect(badge).toBeInTheDocument();
});
});

15
app/client/packages/design-system/ads/src/Badge/Badge.tsx Normal file
View File

@ -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 <StyledBadge className={className} kind={kind} {...rest} />;
}

10
app/client/packages/design-system/ads/src/Badge/Badge.types.ts Normal file
View File

@ -0,0 +1,10 @@
import type { Kind } from "../__config__/types";
export type BadgeKind = Exclude<Kind, "info" | undefined>;
export interface BadgeProps {
/** visual style to be used indicating type of badge */
kind?: BadgeKind;
/** (try not to) pass addition classes here */
className?: string;
}

2
app/client/packages/design-system/ads/src/Badge/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./Badge";
export * from "./Badge.types";

62
app/client/packages/design-system/ads/src/Icon/Icon.provider.tsx
View File

@ -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);

27
app/client/packages/design-system/ads/src/Table/Table.stories.tsx
View File

@ -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,
},
};

22
app/client/packages/design-system/ads/src/Table/Table.styles.tsx
View File

@ -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)<IconProps & { isVisible: boolean }>`
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);
`;

123
app/client/packages/design-system/ads/src/Table/Table.test.tsx Normal file
View File

@ -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(<Table columns={columns} data={fakeData} isSortable />);
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(<Table columns={columns} data={fakeData} isSortable />);
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(<Table columns={columns} data={fakeData} isSortable />);
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(<Table columns={columns} data={fakeData} isSortable />);
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(<Table columns={columns} data={fakeData} isSortable />);
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(<Table columns={columns} data={fakeData} isSortable />);
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);
});
});

77
app/client/packages/design-system/ads/src/Table/Table.tsx
View File

@ -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<T extends DefaultRecordType = DefaultRecordType>({
className,
emptyText = NoData,
...props
}: TableProps<T>) {
const { columns, data, isSortable = false } = props;
const components = {
table: StyledTable,
header: {
@ -40,11 +44,76 @@ function Table<T extends DefaultRecordType = DefaultRecordType>({
},
};
const [sorter, setSorter] = useState<TableSorter>({
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<T>) => {
if (col.isSortable === false) return col.title;
return (
<StyledTitle>
{col.title}
<StyledIcon
isVisible={sorter.field === col?.dataIndex}
name={sorter.order === "asc" ? "down-arrow-2" : "arrow-up-line"}
size="sm"
/>
</StyledTitle>
);
};
const getColumns = () => {
if (!isSortable) return columns;
return columns?.map((col: TableColumn<T>) => ({
...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 (
<RcTable<T>
{...props}
className={clsx(TableWrapperClassName, className)}
columns={getColumns()}
components={components}
data={getData()}
emptyText={emptyText}
/>
);

25
app/client/packages/design-system/ads/src/Table/Table.types.ts
View File

@ -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<T extends DefaultRecordType>
extends ColumnType<T> {
// 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<T extends DefaultRecordType> = Omit<
RcTableProps<T>,
"styles" | "components"
>;
"styles" | "components" | "columns"
> & {
columns: TableColumn<T>[];
sortBy?: string;
isSortable?: boolean;
};
export interface TableSorter {
field?: DataIndex;
order?: "desc" | "asc";
path?: string | DataIndex;
}

2
app/client/packages/design-system/ads/src/Text/Text.mdx
View File

@ -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)

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/csv-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="m12.409 15.31-2.063-6.22H11.8l1.158 4.063.117.418.127-.423 1.162-4.058h1.454l-2.068 6.22h-1.34ZM9.073 13.687a.749.749 0 0 0-.276-.586 1.656 1.656 0 0 0-.404-.226 3.797 3.797 0 0 0-.609-.197 5.53 5.53 0 0 1-.998-.341 2.966 2.966 0 0 1-.699-.44 1.685 1.685 0 0 1-.412-.53 1.474 1.474 0 0 1-.136-.633c0-.261.06-.5.183-.713.121-.214.29-.396.506-.547.215-.15.47-.266.764-.346.294-.082.612-.124.956-.124.356 0 .681.047.975.141.297.094.552.225.764.393.213.171.378.373.497.607.119.234.178.49.178.769H9.078a1.093 1.093 0 0 0-.085-.384.818.818 0 0 0-.21-.304 1.028 1.028 0 0 0-.361-.192 1.528 1.528 0 0 0-.497-.073c-.175 0-.332.02-.47.06-.133.037-.248.09-.341.158a.68.68 0 0 0-.286.56c0 .117.031.222.094.316.065.094.159.178.28.252.123.077.27.147.441.21.175.062.372.12.591.175.234.06.458.132.67.217.213.086.408.184.586.295.27.182.483.395.643.637.159.242.239.521.239.837 0 .274-.061.517-.183.73-.119.212-.285.39-.497.535-.213.148-.466.26-.76.337a3.923 3.923 0 0 1-.96.111c-.341 0-.679-.045-1.013-.136a2.727 2.727 0 0 1-.867-.41 2.07 2.07 0 0 1-.558-.624 1.69 1.69 0 0 1-.202-.842h1.294c.006.188.042.35.108.483a.87.87 0 0 0 .277.329c.115.085.254.148.417.188.165.04.347.06.544.06.175 0 .33-.019.464-.056.137-.037.253-.088.347-.154a.693.693 0 0 0 .215-.235.645.645 0 0 0 .075-.307ZM4.983 13.362a2.17 2.17 0 0 1-.225.846c-.125.25-.294.464-.506.64a2.3 2.3 0 0 1-.76.411 3.187 3.187 0 0 1-.975.141c-.281 0-.542-.033-.783-.098a2.336 2.336 0 0 1-.642-.29 2.19 2.19 0 0 1-.469-.424 2.648 2.648 0 0 1-.342-.547c-.09-.199-.16-.418-.21-.658a3.95 3.95 0 0 1-.071-.76v-.837c0-.251.022-.489.066-.714.043-.228.109-.438.197-.632.1-.237.23-.447.393-.633.163-.185.347-.341.553-.47.185-.108.386-.19.605-.247.222-.06.46-.09.713-.09.375 0 .707.048.998.145.294.097.544.235.75.415.206.18.369.398.487.658.12.259.194.55.226.876H3.675a1.808 1.808 0 0 0-.094-.488.916.916 0 0 0-.206-.35.887.887 0 0 0-.352-.205 1.503 1.503 0 0 0-.496-.073c-.104 0-.2.01-.291.03a.945.945 0 0 0-.572.384 1.612 1.612 0 0 0-.21.44c-.041.132-.071.277-.09.437a4.29 4.29 0 0 0-.028.508v.846c0 .248.014.47.042.667.031.193.078.363.14.508.044.1.096.188.155.265a.95.95 0 0 0 .492.32c.107.026.224.039.352.039.172 0 .327-.02.464-.06a.903.903 0 0 0 .352-.188.89.89 0 0 0 .23-.33c.056-.133.09-.294.103-.482h1.317Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/doc-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="M15.338 13.362a2.168 2.168 0 0 1-.225.846c-.125.25-.293.464-.506.64a2.3 2.3 0 0 1-.76.411 3.187 3.187 0 0 1-.974.141c-.281 0-.542-.033-.783-.098a2.336 2.336 0 0 1-.642-.29 2.19 2.19 0 0 1-.469-.424 2.645 2.645 0 0 1-.342-.547c-.09-.199-.161-.418-.211-.658a3.956 3.956 0 0 1-.07-.76v-.837c0-.251.021-.489.065-.714a2.82 2.82 0 0 1 .197-.632c.1-.237.231-.447.394-.633.162-.185.347-.341.553-.47.184-.108.386-.19.605-.247.222-.06.46-.09.712-.09.375 0 .708.048.999.145.293.097.543.235.75.415.206.18.368.398.487.658.119.259.194.55.225.876h-1.312a1.808 1.808 0 0 0-.094-.488.915.915 0 0 0-.206-.35.887.887 0 0 0-.352-.205 1.503 1.503 0 0 0-.497-.073c-.103 0-.2.01-.29.03a.945.945 0 0 0-.572.384 1.611 1.611 0 0 0-.211.44c-.04.132-.07.277-.09.437a4.28 4.28 0 0 0-.027.508v.846c0 .248.014.47.042.667.031.193.078.363.14.508.044.1.096.188.155.265a.95.95 0 0 0 .492.32 1.5 1.5 0 0 0 .352.039c.172 0 .326-.02.464-.06a.902.902 0 0 0 .351-.188.889.889 0 0 0 .23-.33c.056-.133.09-.294.103-.482h1.317ZM10.076 12.657c0 .268-.026.523-.08.765-.053.24-.13.461-.23.666a2.617 2.617 0 0 1-.393.564c-.156.171-.334.314-.534.428-.181.1-.382.176-.6.23a2.73 2.73 0 0 1-.699.086c-.265 0-.51-.032-.736-.094a2.373 2.373 0 0 1-.614-.265 2.321 2.321 0 0 1-.848-1.009 3.076 3.076 0 0 1-.202-.64 3.917 3.917 0 0 1-.065-.73v-.907c0-.273.025-.532.075-.777.053-.245.13-.472.23-.68a2.52 2.52 0 0 1 .35-.534c.142-.16.302-.296.484-.41.178-.11.378-.196.6-.256.222-.06.462-.09.722-.09.262 0 .507.032.736.094.23.06.439.147.623.26.184.11.345.24.483.394.14.154.26.323.36.508.11.211.193.442.25.692.059.251.088.517.088.8v.905Zm-1.336-.914c0-.16-.01-.31-.028-.453a2.158 2.158 0 0 0-.08-.402 1.596 1.596 0 0 0-.187-.41 1.08 1.08 0 0 0-.277-.299 1.026 1.026 0 0 0-.285-.132A1.192 1.192 0 0 0 7.536 10c-.122 0-.233.014-.333.042a.907.907 0 0 0-.263.124 1.1 1.1 0 0 0-.272.3c-.071.119-.128.259-.168.418a2.868 2.868 0 0 0-.07.402 5.335 5.335 0 0 0-.02.457v.914c0 .151.007.296.02.436.012.14.034.27.065.389.034.15.084.289.15.414.069.123.148.222.24.3.083.068.179.12.285.157.11.037.233.056.37.056.132 0 .252-.017.361-.052a.914.914 0 0 0 .29-.149c.107-.08.196-.18.268-.3.075-.122.134-.26.178-.413.035-.12.06-.251.075-.394.019-.142.028-.29.028-.444v-.914ZM0 15.31V9.09h1.767c.316 0 .611.035.886.107.275.068.525.166.75.294.197.106.372.235.525.39.156.15.292.315.408.495.134.219.237.461.31.726.074.265.112.547.112.846v.513c0 .287-.035.56-.103.816a2.85 2.85 0 0 1-.29.705c-.12.19-.259.367-.418.53a2.45 2.45 0 0 1-.525.4 2.881 2.881 0 0 1-.736.296c-.266.068-.55.102-.853.102H0Zm1.327-5.246v4.28h.506c.162 0 .314-.018.455-.055a1.306 1.306 0 0 0 .703-.444c.096-.117.18-.252.248-.406.056-.134.099-.282.127-.444.03-.166.046-.344.046-.534v-.522c0-.18-.015-.349-.046-.508a2.047 2.047 0 0 0-.127-.444 1.557 1.557 0 0 0-.272-.428 1.38 1.38 0 0 0-.76-.444 1.784 1.784 0 0 0-.44-.051h-.44Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/google-drive.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" fill="none" viewBox="0 0 24 24"><path fill="#0F0F0F" fill-rule="evenodd" d="M8.574 2a2 2 0 0 0-1.727.992L.45 13.957a2 2 0 0 0 .063 2.117l3.357 5.035A2 2 0 0 0 5.535 22h12.93a2 2 0 0 0 1.664-.89l3.357-5.036a2 2 0 0 0 .063-2.117L17.153 2.992A2 2 0 0 0 15.426 2H8.574Zm1.23 2h5.622l5.833 10h-5.205L9.804 4Zm3.892 10-1.787-2.86L10.24 14h3.455Zm-4.622 2-2.333 4h11.724l2.666-4H9.074Zm1.637-6.775-5.768 9.887-2.765-4.147L8.03 4.934l2.681 4.29Z" clip-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 531 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/json-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M15 4.5V9h-1V4.5h-2A1.5 1.5 0 0 1 10.5 3V1H5a1 1 0 0 0-1 1v7H3V2a2 2 0 0 1 2-2h5.5L15 4.5Z" clip-rule="evenodd"/><path d="M16 15.262h-1.027l-1.485-3.348v3.348H12.45v-5.19h1.038l1.474 3.333.004-3.334H16v5.191ZM12.07 13.048c0 .223-.02.436-.062.638-.042.2-.102.385-.18.556a2.191 2.191 0 0 1-.308.471 1.736 1.736 0 0 1-.418.357 1.858 1.858 0 0 1-.47.192c-.168.048-.35.071-.546.071-.208 0-.4-.026-.576-.078a1.8 1.8 0 0 1-.48-.221c-.142-.1-.27-.22-.382-.36a2.098 2.098 0 0 1-.282-.481 2.693 2.693 0 0 1-.158-.535 3.481 3.481 0 0 1-.051-.61v-.756c0-.228.02-.444.059-.649.041-.204.101-.393.18-.566.075-.164.167-.313.274-.446a1.679 1.679 0 0 1 .847-.556c.174-.05.362-.075.565-.075.206 0 .398.026.576.078.181.05.344.123.488.218.144.09.27.2.378.328.11.128.204.27.282.424.086.176.15.368.194.578.047.209.07.431.07.666v.756Zm-1.045-.763c0-.133-.008-.259-.022-.378a1.92 1.92 0 0 0-.063-.335 1.38 1.38 0 0 0-.146-.342.881.881 0 0 0-.217-.25.779.779 0 0 0-.223-.11.876.876 0 0 0-.272-.04.892.892 0 0 0-.26.036.69.69 0 0 0-.205.104.897.897 0 0 0-.213.25c-.056.1-.1.215-.132.349a2.539 2.539 0 0 0-.055.335 4.75 4.75 0 0 0-.015.381v.763c0 .126.005.247.015.364a2.106 2.106 0 0 0 .169.67.894.894 0 0 0 .187.25.727.727 0 0 0 .513.178.89.89 0 0 0 .282-.043.698.698 0 0 0 .228-.125.848.848 0 0 0 .209-.25c.059-.101.105-.217.14-.345a3.04 3.04 0 0 0 .08-.699v-.763ZM6.981 13.907a.66.66 0 0 0-.051-.26.618.618 0 0 0-.165-.228 1.278 1.278 0 0 0-.316-.19 2.843 2.843 0 0 0-.476-.163 4.146 4.146 0 0 1-.781-.285 2.305 2.305 0 0 1-.547-.367 1.397 1.397 0 0 1-.323-.442 1.299 1.299 0 0 1-.106-.528c0-.219.048-.417.143-.596.095-.178.227-.33.396-.456s.368-.222.598-.289c.23-.069.48-.103.748-.103.279 0 .533.04.763.118.232.078.431.187.598.328a1.472 1.472 0 0 1 .528 1.148H6.985a.964.964 0 0 0-.066-.321.685.685 0 0 0-.165-.253.789.789 0 0 0-.283-.16c-.11-.041-.24-.061-.388-.061-.137 0-.26.016-.367.05a.798.798 0 0 0-.268.131.612.612 0 0 0-.168.21.599.599 0 0 0-.055.257c0 .098.024.186.073.264a.734.734 0 0 0 .22.21c.095.065.21.123.345.175.137.053.29.101.462.146.183.05.358.11.524.182.166.072.32.154.459.246.21.152.377.33.502.531.125.202.187.435.187.7a1.272 1.272 0 0 1-.532 1.054 1.794 1.794 0 0 1-.594.282c-.23.062-.48.093-.752.093-.266 0-.53-.038-.792-.114a2.075 2.075 0 0 1-.678-.343 1.693 1.693 0 0 1-.437-.52 1.486 1.486 0 0 1-.157-.702h1.012c.005.156.033.29.084.402a.717.717 0 0 0 .217.275c.09.071.199.124.326.157.13.033.271.05.425.05.137 0 .258-.016.363-.047a.838.838 0 0 0 .272-.128.567.567 0 0 0 .169-.196.567.567 0 0 0 .058-.257ZM2.593 10.071h1.03l.004 3.597a1.621 1.621 0 0 1-.532 1.202 1.749 1.749 0 0 1-.58.342c-.22.08-.456.121-.71.121a2.53 2.53 0 0 1-.734-.1 1.553 1.553 0 0 1-.565-.299 1.32 1.32 0 0 1-.37-.495A1.77 1.77 0 0 1 0 13.736h1.034c0 .124.012.232.037.325a.663.663 0 0 0 .11.235.567.567 0 0 0 .25.175c.102.038.227.057.373.057a.796.796 0 0 0 .323-.065.758.758 0 0 0 .407-.452.99.99 0 0 0 .059-.343v-3.597Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/md-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M14 4.5V14a2 2 0 0 1-2 2h-2v-1h2a1 1 0 0 0 1-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v7H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path fill="#000" d="M4.946 16v-6h1.657c.296 0 .573.034.83.103.259.066.493.16.704.284.184.102.349.227.492.375.147.146.274.305.382.478.126.212.223.445.29.7.07.256.106.528.106.817v.494c0 .278-.032.54-.097.788a2.793 2.793 0 0 1-.272.68 2.948 2.948 0 0 1-.391.51c-.15.154-.314.283-.493.388a2.66 2.66 0 0 1-.69.284 3.117 3.117 0 0 1-.8.099H4.947Zm1.244-5.06v4.129h.475c.152 0 .294-.018.426-.054a1.238 1.238 0 0 0 .66-.429 1.696 1.696 0 0 0 .35-.82c.03-.159.045-.33.045-.515v-.502a2.62 2.62 0 0 0-.163-.92 1.508 1.508 0 0 0-.255-.411 1.3 1.3 0 0 0-.712-.429 1.628 1.628 0 0 0-.413-.05H6.19ZM1.534 10l.606 2.254L2.83 10h1.534v6H3.23v-1.776l.053-2.806-.84 2.604h-.61l-.752-2.493.053 2.695V16H0v-6h1.534Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 966 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/notion.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 122.88 128.1"><path d="M21.19 22.46c4 3.23 5.48 3 13 2.49l70.53-4.24c1.5 0 .25-1.49-.25-1.74L92.72 10.5a14.08 14.08 0 0 0-11-3.23l-68.29 5c-2.49.24-3 1.49-2 2.49l9.73 7.72Zm4.23 16.44v74.21c0 4 2 5.48 6.48 5.23l77.52-4.48c4.49-.25 5-3 5-6.23V33.91c0-3.23-1.25-5-4-4.73l-81 4.73c-3 .25-4 1.75-4 5Zm76.53 4c.49 2.24 0 4.48-2.25 4.73l-3.7.73v54.79c-3.24 1.74-6.23 2.73-8.72 2.73-4 0-5-1.24-8-5L54.83 62.55v37.11l7.73 1.74s0 4.48-6.23 4.48l-17.2 1c-.5-1 0-3.48 1.75-4l4.48-1.25V52.59l-6.23-.5a4.66 4.66 0 0 1 4.24-5.73l18.44-1.24L87.24 84V49.6l-6.48-.74a4.21 4.21 0 0 1 4-5l17.21-1ZM7.72 5.52l71-5.23C87.49-.46 89.73.05 95.21 4l22.68 16c3.74 2.74 5 3.48 5 6.47v87.42c0 5.47-2 8.71-9 9.21l-82.5 5c-5.24.25-7.73-.5-10.47-4L4.24 102.4c-3-4-4.24-7-4.24-10.46v-77.7C0 9.76 2 6 7.72 5.52Z" style="fill-rule:evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/pdf-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="M14.818 12.75h-2.925v2.65h-1.322V9h4.613v1.007h-3.29v1.74h2.924v1.002ZM5.173 15.4V9H6.94c.316 0 .611.037.886.11.275.07.525.171.75.303.197.109.372.242.525.4.156.155.292.325.408.51.134.226.238.475.31.747.074.273.112.563.112.87v.528c0 .296-.034.576-.103.84a2.98 2.98 0 0 1-.29.725 3.145 3.145 0 0 1-.418.545c-.16.164-.334.302-.525.413a2.836 2.836 0 0 1-.736.303c-.266.07-.55.106-.853.106H5.173ZM6.5 10.002v4.405h.506c.162 0 .314-.02.455-.057a1.322 1.322 0 0 0 .703-.457c.097-.12.18-.26.248-.418.056-.138.099-.29.127-.457a3.04 3.04 0 0 0 .047-.55v-.536c0-.185-.016-.36-.047-.523a2.154 2.154 0 0 0-.127-.457 1.608 1.608 0 0 0-.272-.44 1.39 1.39 0 0 0-.384-.316 1.486 1.486 0 0 0-.375-.141 1.74 1.74 0 0 0-.44-.053H6.5ZM1.317 13.053V15.4H0V9h2.334c.372 0 .708.051 1.008.154.3.1.556.239.769.417.21.182.37.399.483.651.115.252.173.532.173.84a1.829 1.829 0 0 1-.656 1.424 2.31 2.31 0 0 1-.769.417c-.3.1-.636.15-1.008.15H1.317Zm0-1.003h1.017c.188 0 .35-.026.488-.079a1.01 1.01 0 0 0 .347-.215.866.866 0 0 0 .201-.312c.047-.12.07-.245.07-.374 0-.15-.023-.288-.07-.417a.922.922 0 0 0-.201-.339.997.997 0 0 0-.347-.228 1.295 1.295 0 0 0-.488-.084H1.317v2.048Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/ppt-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path d="M15.502 10.007h-2.104V15.4h-1.322v-5.393H9.999V9h5.503v1.007ZM6.603 13.053V15.4H5.286V9H7.62c.372 0 .708.051 1.008.154.3.1.556.239.769.417.209.182.37.399.482.651.116.252.174.532.174.84a1.829 1.829 0 0 1-.656 1.424 2.31 2.31 0 0 1-.77.417c-.3.1-.635.15-1.007.15H6.603Zm0-1.003H7.62c.188 0 .35-.026.487-.079a1.01 1.01 0 0 0 .347-.215.866.866 0 0 0 .202-.312c.047-.12.07-.245.07-.374 0-.15-.023-.288-.07-.417a.922.922 0 0 0-.202-.339.997.997 0 0 0-.347-.228 1.295 1.295 0 0 0-.487-.084H6.603v2.048ZM1.317 13.053V15.4H0V9h2.334c.372 0 .708.051 1.008.154.3.1.556.239.769.417.21.182.37.399.483.651.115.252.173.532.173.84a1.83 1.83 0 0 1-.656 1.424 2.31 2.31 0 0 1-.769.417c-.3.1-.636.15-1.008.15H1.317Zm0-1.003h1.017c.188 0 .35-.026.488-.079a1.01 1.01 0 0 0 .347-.215.867.867 0 0 0 .201-.312c.047-.12.07-.245.07-.374 0-.15-.023-.288-.07-.417a.922.922 0 0 0-.201-.339.997.997 0 0 0-.347-.228 1.295 1.295 0 0 0-.488-.084H1.317v2.048Z"/><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/rtf-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="M14.902 12.75h-2.925v2.65h-1.321V9h4.612v1.007h-3.29v1.74h2.925v1.002ZM10.301 10.007H8.197V15.4H6.875v-5.393H4.798V9h5.503v1.007ZM2.316 13.009h-.999V15.4H0V9h2.288c.378 0 .72.042 1.026.127.306.083.569.204.788.365.215.161.38.362.496.602.12.24.179.52.179.836 0 .228-.03.435-.09.62a1.618 1.618 0 0 1-.637.87c-.15.108-.319.202-.506.281l1.467 2.642v.057H3.6l-1.284-2.391Zm-.999-1.002h.975c.203 0 .381-.027.535-.08a.95.95 0 0 0 .38-.237.786.786 0 0 0 .182-.294c.044-.115.066-.242.066-.383 0-.17-.028-.32-.085-.448a.766.766 0 0 0-.243-.325 1.042 1.042 0 0 0-.357-.176 1.727 1.727 0 0 0-.482-.062h-.97v2.005Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 951 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/salesforce.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="800" height="800" viewBox="0 0 52 52"><path d="M21.7 11.9c1.7-1.7 4-2.8 6.6-2.8 3.4 0 6.4 1.9 8 4.7 1.4-.6 2.9-1 4.5-1C47 12.8 52 17.8 52 24s-5 11.2-11.2 11.2c-.8 0-1.5-.1-2.2-.2-1.4 2.5-4.1 4.2-7.2 4.2-1.3 0-2.5-.3-3.6-.8-1.4 3.3-4.7 5.6-8.6 5.6-4 0-7.5-2.5-8.8-6.1-.6.1-1.2.2-1.8.2-4.8 0-8.7-3.9-8.7-8.7 0-3.2 1.7-6 4.3-7.5-.5-1.2-.8-2.6-.8-4 0-5.5 4.5-10 10.1-10 3.5.1 6.4 1.6 8.2 4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 462 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/tsv-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><path fill="#000" fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path fill="#000" d="M11.555 15.319 9.671 9.086H11l1.057 4.07.107.42.116-.424 1.061-4.066h1.327l-1.887 6.233h-1.225ZM8.509 13.692a.812.812 0 0 0-.06-.313.742.742 0 0 0-.193-.274 1.483 1.483 0 0 0-.368-.226 3.256 3.256 0 0 0-.556-.197 4.753 4.753 0 0 1-.912-.343 2.687 2.687 0 0 1-.638-.44 1.677 1.677 0 0 1-.377-.532 1.598 1.598 0 0 1-.124-.633c0-.263.056-.501.167-.715.111-.214.265-.397.462-.548.197-.151.43-.267.698-.347A2.95 2.95 0 0 1 7.481 9c.326 0 .623.047.89.141.272.094.505.226.699.394a1.81 1.81 0 0 1 .616 1.378H8.513a1.186 1.186 0 0 0-.077-.385.826.826 0 0 0-.193-.304.916.916 0 0 0-.33-.192 1.283 1.283 0 0 0-.453-.073c-.16 0-.303.02-.428.06a.92.92 0 0 0-.313.158.731.731 0 0 0-.197.253.736.736 0 0 0-.064.308c0 .117.029.223.086.317.06.094.145.178.257.252.111.077.245.147.402.21.16.063.34.122.54.176.214.06.418.132.612.218s.372.184.535.295c.245.183.44.396.586.638.146.243.219.523.219.84 0 .273-.056.517-.167.731-.109.212-.26.39-.454.536a2.07 2.07 0 0 1-.694.338c-.268.074-.56.111-.877.111-.311 0-.62-.046-.925-.137a2.4 2.4 0 0 1-.792-.411 2.02 2.02 0 0 1-.51-.625 1.827 1.827 0 0 1-.183-.843h1.181c.006.188.039.35.099.483.06.135.144.244.252.33.106.086.233.149.381.188.151.04.317.06.497.06.16 0 .3-.018.424-.055a.965.965 0 0 0 .316-.154A.675.675 0 0 0 8.44 14a.697.697 0 0 0 .069-.308ZM5.026 10.066H3.104v5.253H1.896v-5.253H0v-.98h5.026v.98Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/txt-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="M16.074 10.007H13.97V15.4h-1.322v-5.393H10.57V9h5.503v1.007Z"/><path d="M8.084 11.294 9.298 9h1.547l-1.922 3.174 1.969 3.226H9.354l-1.251-2.33-1.247 2.33H5.3l1.968-3.226L5.351 9H6.89l1.195 2.294Z"/><path d="M5.503 10.007H3.398V15.4H2.077v-5.393H0V9h5.503v1.007Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 612 B

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/xls-file.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><g fill="#000" clip-path="url(#a)"><path fill-rule="evenodd" d="M14 4.5V8h-1V4.5h-2A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v6H2V2a2 2 0 0 1 2-2h5.5L14 4.5Z" clip-rule="evenodd"/><path d="M14.588 13.692a.75.75 0 0 0-.276-.587 1.656 1.656 0 0 0-.403-.226 3.796 3.796 0 0 0-.61-.197 5.523 5.523 0 0 1-.998-.343 2.965 2.965 0 0 1-.699-.44 1.69 1.69 0 0 1-.412-.532 1.48 1.48 0 0 1-.136-.633c0-.263.061-.501.183-.715.122-.214.29-.397.506-.548.216-.151.47-.267.764-.347.294-.083.613-.124.956-.124.357 0 .682.047.975.141.297.094.552.226.764.394.213.171.379.374.497.608.12.234.178.49.178.77h-1.284a1.096 1.096 0 0 0-.084-.385.82.82 0 0 0-.211-.304 1.029 1.029 0 0 0-.361-.192 1.526 1.526 0 0 0-.497-.073c-.175 0-.331.02-.469.06-.134.037-.248.09-.342.158a.744.744 0 0 0-.216.253.683.683 0 0 0-.07.308.56.56 0 0 0 .094.317c.066.094.16.178.281.252.122.077.269.147.44.21.176.063.373.122.591.176.235.06.458.132.67.218.213.086.409.184.587.295.268.183.482.396.642.638.16.243.239.523.239.84 0 .273-.061.517-.183.731a1.59 1.59 0 0 1-.497.536 2.36 2.36 0 0 1-.76.338 3.918 3.918 0 0 1-.96.111c-.34 0-.678-.046-1.013-.137a2.723 2.723 0 0 1-.867-.411 2.07 2.07 0 0 1-.558-.625 1.696 1.696 0 0 1-.201-.843h1.294c.006.188.042.35.107.483a.872.872 0 0 0 .277.33c.116.086.255.149.417.188.166.04.347.06.544.06.175 0 .33-.018.464-.055a1.1 1.1 0 0 0 .347-.154.693.693 0 0 0 .215-.236.647.647 0 0 0 .075-.308ZM7.17 14.347h3.197v.972H5.848V9.086H7.17v5.26ZM2.784 11.32l1.214-2.234h1.547l-1.922 3.09 1.97 3.143H4.054l-1.252-2.27-1.247 2.27H0l1.969-3.143-1.917-3.09h1.537l1.195 2.234Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
app/client/packages/design-system/ads/src/__assets__/icons/ads/zendesk.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" aria-hidden="true" viewBox="0 0 14 14"><path d="M6.543 11.547H1l5.543-6.691v6.691zm6.457 0H7.457a2.77 2.77 0 1 1 5.543 0zM7.457 9.145V2.452H13L7.457 9.145zm-.914-6.692a2.772 2.772 0 0 1-5.543 0h5.543z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 274 B

1
app/client/packages/design-system/ads/src/index.ts
View File

@ -37,3 +37,4 @@ export * from "./ToggleButton";
export * from "./Tooltip";
export * from "./ToggleButtonGroup";
export * from "./Templates";
export * from "./Badge";

1
app/client/src/components/editorComponents/Debugger/constants.ts
View File

@ -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",

7
app/client/src/ee/components/formControls/CarbonButton/CarbonButton.tsx
View File

@ -1,7 +0,0 @@
import type { ControlProps } from "../../../../components/formControls/BaseControl";
export interface CarbonButtonProps extends ControlProps {}
export const CarbonButton = () => {
return null;
};

1
app/client/src/ee/components/formControls/CarbonButton/index.ts
View File

@ -1 +0,0 @@
export * from "./CarbonButton";

13
app/client/src/ee/components/formControls/RagDocuments/RagDocuments.tsx Normal file
View File

@ -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;
};

1
app/client/src/ee/components/formControls/RagDocuments/index.ts Normal file
View File

@ -0,0 +1 @@
export { RagDocuments } from "./RagDocuments";

13
app/client/src/pages/Editor/DataSourceEditor/DatasourceSection.tsx
View File

@ -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 (
<RagDocuments
datasourceId={datasource.id}
isDeletedAvailable={false}
isImportDataAvailable={false}
key={reactKey}
workspaceId={datasource.workspaceId}
/>
);
}
if (controlType === "FIXED_KEY_INPUT") {
return (
<FieldWrapper key={reactKey}>

14
app/client/src/utils/formControl/FormControlRegistry.tsx
View File

@ -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 <RadioButtonControl {...controlProps} />;
},
});
FormControlFactory.registerControlBuilder(formControlTypes.CARBON_BUTTON, {
buildPropertyControl(controlProps: CarbonButtonProps): JSX.Element {
return <CarbonButton {...controlProps} />;
FormControlFactory.registerControlBuilder(formControlTypes.RAG_DOCUMENTS, {
buildPropertyControl(controlProps): JSX.Element {
return (
<RagDocuments
datasourceId={controlProps.datasourceId}
workspaceId={controlProps.workspaceId}
/>
);
},
});
}

1
app/client/src/utils/formControl/formControlTypes.ts
View File

@ -20,4 +20,5 @@ export default {
MULTIPLE_FILE_PICKER: "MULTIPLE_FILE_PICKER",
RADIO_BUTTON: "RADIO_BUTTON",
CARBON_BUTTON: "CARBON_BUTTON",
RAG_DOCUMENTS: "RAG_DOCUMENTS",
};