chore: CE code for datasource management

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

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

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";
+
+<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.

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 (
+    <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",
+};

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

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(<Badge data-testid="t--badge" />);
+    const badge = screen.getByTestId("t--badge");
+
+    expect(badge).toBeInTheDocument();
+  });
+});

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

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

app/client/packages/design-system/ads/src/Badge/index.ts

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

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

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

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)<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);
+`;