@orchestrator-ui/orchestrator-ui-components 7.4.1 → 7.5.0

package/package.json

@@ -1,95 +1,95 @@
 {
-    "name": "@orchestrator-ui/orchestrator-ui-components",
-    "version": "7.4.1",
-    "license": "Apache-2.0",
-    "description": "Library of UI Components used to display the workflow orchestrator frontend",
-    "author": {
-        "name": "Workflow Orchestrator Programme",
-        "email": "workfloworchestrator.board@commonsconservancy.org",
-        "url": "https://www.workfloworchestrator.org"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/workfloworchestrator/orchestrator-ui-library.git"
-    },
-    "publishConfig": {
-        "access": "public",
-        "provenance": true
-    },
-    "homepage": "https://www.workfloworchestrator.org",
-    "bugs": "https://github.com/workfloworchestrator/orchestrator-ui-library/issues",
-    "keywords": [
-        "orchestrator",
-        "workflow",
-        "workflow orchestrator",
-        "network",
-        "automation"
-    ],
-    "scripts": {
-        "test": "jest",
-        "generate-version": "node -p \"'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/configuration/version.ts && prettier --write src/configuration/version.ts",
-        "build": "npm run generate-version && tsup src/index.ts",
-        "tsc": "tsc --noEmit",
-        "lint": "eslint",
-        "dev": "tsup --watch"
-    },
-    "dependencies": {
-        "@ag-ui/client": "0.0.39",
-        "@copilotkit/react-core": "1.10.6",
-        "@copilotkit/react-ui": "1.10.6",
-        "@copilotkit/runtime": "1.10.6",
-        "@elastic/charts": "^64.1.0",
-        "@emotion/css": "^11.11.2",
-        "@emotion/react": "^11.11.4",
-        "@monaco-editor/react": "^4.7.0",
-        "@rtk-query/graphql-request-base-query": "^2.3.1",
-        "@tanstack/react-virtual": "^3.13.13",
-        "graphql-request": "^6.1.0",
-        "invariant": "^2.2.4",
-        "lodash": "^4.17.21",
-        "moment": "^2.29.4",
-        "moment-timezone": "^0.5.32",
-        "next-auth": "^4.24.5",
-        "next-intl": "^3.26.5",
-        "next-query-params": "^5.0.0",
-        "object-hash": "^3.0.0",
-        "prism-themes": "^1.9.0",
-        "pydantic-forms": "^1.0.4",
-        "react-diff-view": "^3.2.0",
-        "react-draggable": "^4.4.6",
-        "react-redux": "^9.1.2",
-        "react-select": "^5.8.0",
-        "scroll-into-view": "^1.16.2",
-        "unidiff": "^1.0.4",
-        "use-query-params": "2.2.1"
-    },
-    "devDependencies": {
-        "@orchestrator-ui/eslint-config-custom": "*",
-        "@orchestrator-ui/jest-config": "*",
-        "@reduxjs/toolkit": "^2.0.1",
-        "@testing-library/jest-dom": "^6.9.0",
-        "@testing-library/react": "^16.0.1",
-        "@testing-library/user-event": "^14.5.2",
-        "@types/invariant": "^2.2.33",
-        "@types/jest": "^30.0.0",
-        "@types/object-hash": "^3.0.6",
-        "@types/scroll-into-view": "^1.16.3",
-        "babel-jest": "^30.2.0",
-        "jest": "^30.2.0",
-        "jest-environment-jsdom": "^30.2.0",
-        "jest-watch-typeahead": "^3.0.1",
-        "tsup": "^8.5.0",
-        "typescript": "^5.5.2",
-        "@elastic/eui": "^111.0.0"
-    },
-    "peerDependencies": {
-        "next": "^15.5.9",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
-        "@elastic/eui": "^111.0.0"
-    },
-    "type": "module",
-    "main": "./dist/index.js",
-    "browser": "./dist/index.js",
-    "types": "./dist/index.d.ts"
+  "name": "@orchestrator-ui/orchestrator-ui-components",
+  "version": "7.5.0",
+  "license": "Apache-2.0",
+  "description": "Library of UI Components used to display the workflow orchestrator frontend",
+  "author": {
+    "name": "Workflow Orchestrator Programme",
+    "email": "workfloworchestrator.board@commonsconservancy.org",
+    "url": "https://www.workfloworchestrator.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/workfloworchestrator/orchestrator-ui-library.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "homepage": "https://www.workfloworchestrator.org",
+  "bugs": "https://github.com/workfloworchestrator/orchestrator-ui-library/issues",
+  "keywords": [
+    "orchestrator",
+    "workflow",
+    "workflow orchestrator",
+    "network",
+    "automation"
+  ],
+  "scripts": {
+    "test": "jest",
+    "generate-version": "node -p \"'export const ORCHESTRATOR_UI_LIBRARY_VERSION = ' + JSON.stringify(require('./package.json').version) + ';'\" > src/configuration/version.ts && prettier --write src/configuration/version.ts",
+    "build": "npm run generate-version && tsup src/index.ts",
+    "tsc": "tsc --noEmit",
+    "lint": "eslint",
+    "dev": "tsup --watch"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.42",
+    "@copilotkit/react-core": "1.10.6",
+    "@copilotkit/react-ui": "1.10.6",
+    "@copilotkit/runtime": "1.10.6",
+    "@elastic/charts": "^64.1.0",
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.4",
+    "@monaco-editor/react": "^4.7.0",
+    "@rtk-query/graphql-request-base-query": "^2.3.1",
+    "@tanstack/react-virtual": "^3.13.13",
+    "graphql-request": "^6.1.0",
+    "invariant": "^2.2.4",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "moment-timezone": "^0.6.0",
+    "next-auth": "^4.24.5",
+    "next-intl": "^3.26.5",
+    "next-query-params": "^5.0.0",
+    "object-hash": "^3.0.0",
+    "prism-themes": "^1.9.0",
+    "pydantic-forms": "^1.0.4",
+    "react-diff-view": "^3.2.0",
+    "react-draggable": "^4.4.6",
+    "react-redux": "^9.1.2",
+    "react-select": "^5.8.0",
+    "scroll-into-view": "^1.16.2",
+    "unidiff": "^1.0.4",
+    "use-query-params": "^2.2.2"
+  },
+  "devDependencies": {
+    "@elastic/eui": "^113.1.0",
+    "@orchestrator-ui/eslint-config-custom": "*",
+    "@orchestrator-ui/jest-config": "*",
+    "@reduxjs/toolkit": "^2.0.1",
+    "@testing-library/jest-dom": "^6.9.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/invariant": "^2.2.33",
+    "@types/jest": "^30.0.0",
+    "@types/object-hash": "^3.0.6",
+    "@types/scroll-into-view": "^1.16.3",
+    "babel-jest": "^30.2.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-watch-typeahead": "^3.0.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.5.2"
+  },
+  "peerDependencies": {
+    "@elastic/eui": "^113.1.0",
+    "next": "^15.5.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "browser": "./dist/index.js",
+  "types": "./dist/index.d.ts"
 }

package/src/api/types.ts

@@ -2,52 +2,52 @@
 // When replacing the REST calls with GraphQL, these types should be removed
 
 export type LegacyFixedInput = {
-    name: string;
-    value: string;
-    created_at: number;
-    fixed_input_id: string;
-    product_id: string;
+  name: string;
+  value: string;
+  created_at: number;
+  fixed_input_id: string;
+  product_id: string;
 };
 
 export type LegacyWorkflow = {
-    name: string;
-    description: string;
-    target: string;
-    created_at: number;
-    workflow_id: string;
+  name: string;
+  description: string;
+  target: string;
+  created_at: number;
+  workflow_id: string;
 };
 
 export type LegacyResourceType = {
-    resource_type_id: string;
-    resource_type: string;
-    description: string;
+  resource_type_id: string;
+  resource_type: string;
+  description: string;
 };
 
 export type LegacyProductBlock = {
-    product_block_id: string;
-    name: string;
-    tag: string;
-    description: string;
-    status: string;
-    created_at: number;
-    end_date: number;
-    resource_types: LegacyResourceType[];
-    parent_ids: string[];
+  product_block_id: string;
+  name: string;
+  tag: string;
+  description: string;
+  status: string;
+  created_at: number;
+  end_date: number;
+  resource_types: LegacyResourceType[];
+  parent_ids: string[];
 };
 
 export type LegacyProduct = {
-    name: string;
-    tag: string;
-    description: string;
-    product_id: string;
-    created_at: number;
-    product_type: string;
-    end_date: number;
-    status: string;
-    fixed_inputs: LegacyFixedInput[];
-    workflows: LegacyWorkflow[];
-    product_blocks: LegacyProductBlock[];
-    create_subscription_workflow_key: string;
-    modify_subscription_workflow_key: string;
-    terminate_subscription_workflow_key: string;
+  name: string;
+  tag: string;
+  description: string;
+  product_id: string;
+  created_at: number;
+  product_type: string;
+  end_date: number;
+  status: string;
+  fixed_inputs: LegacyFixedInput[];
+  workflows: LegacyWorkflow[];
+  product_blocks: LegacyProductBlock[];
+  create_subscription_workflow_key: string;
+  modify_subscription_workflow_key: string;
+  terminate_subscription_workflow_key: string;
 };

package/src/components/WfoAgent/ExportButton/ExportButton.tsx

@@ -13,84 +13,80 @@ import { csvDownloadHandler } from '@/utils/csvDownload';
 import { getExportButtonStyles } from './styles';
 
 export type ExportData = {
-    action: string;
-    download_url: string;
-    message: string;
+  action: string;
+  download_url: string;
+  message: string;
 };
 
 export type ExportButtonProps = {
-    exportData: ExportData;
+  exportData: ExportData;
 };
 
 type ExportApiResponse = {
-    page: object[];
-    pageInfo?: GraphQLPageInfo;
+  page: object[];
+  pageInfo?: GraphQLPageInfo;
 };
 
 export function ExportButton({ exportData }: ExportButtonProps) {
-    const { showToastMessage } = useShowToastMessage();
-    const tError = useTranslations('errors');
-    const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
+  const { showToastMessage } = useShowToastMessage();
+  const tError = useTranslations('errors');
+  const [triggerExport, { isFetching }] = useLazyGetAgentExportQuery();
 
-    const {
-        containerStyle,
-        buttonWrapperStyle,
-        titleStyle,
-        fileRowStyle,
-        fileInfoStyle,
-        filenameStyle,
-        downloadButtonStyle,
-    } = useWithOrchestratorTheme(getExportButtonStyles);
+  const {
+    containerStyle,
+    buttonWrapperStyle,
+    titleStyle,
+    fileRowStyle,
+    fileInfoStyle,
+    filenameStyle,
+    downloadButtonStyle,
+  } = useWithOrchestratorTheme(getExportButtonStyles);
 
-    const filename = getCsvFileNameWithDate('export');
+  const filename = getCsvFileNameWithDate('export');
 
-    const onDownloadClick = async () => {
-        const data = await triggerExport(exportData.download_url).unwrap();
+  const onDownloadClick = async () => {
+    const data = await triggerExport(exportData.download_url).unwrap();
 
-        const keyOrder = data.page.length > 0 ? Object.keys(data.page[0]) : [];
+    const keyOrder = data.page.length > 0 ? Object.keys(data.page[0]) : [];
 
-        const handleExport = csvDownloadHandler(
-            async () => data,
-            (data: ExportApiResponse) => data.page,
-            (data: ExportApiResponse) =>
-                data.pageInfo ?? {
-                    totalItems: data.page.length,
-                    startCursor: 0,
-                    endCursor: data.page.length - 1,
-                    hasNextPage: false,
-                    hasPreviousPage: false,
-                    sortFields: [],
-                    filterFields: [],
-                },
-            keyOrder,
-            filename,
-            showToastMessage,
-            tError,
-        );
+    const handleExport = csvDownloadHandler(
+      async () => data,
+      (data: ExportApiResponse) => data.page,
+      (data: ExportApiResponse) =>
+        data.pageInfo ?? {
+          totalItems: data.page.length,
+          startCursor: 0,
+          endCursor: data.page.length - 1,
+          hasNextPage: false,
+          hasPreviousPage: false,
+          sortFields: [],
+          filterFields: [],
+        },
+      keyOrder,
+      filename,
+      showToastMessage,
+      tError,
+    );
 
-        await handleExport();
-    };
+    await handleExport();
+  };
 
-    return (
-        <div css={containerStyle}>
-            <div css={buttonWrapperStyle}>
-                {exportData.message && (
-                    <div css={titleStyle}>{exportData.message}</div>
-                )}
-                <div css={fileRowStyle} onClick={onDownloadClick}>
-                    <div css={fileInfoStyle}>
-                        <EuiIcon type="document" size="m" />
-                        <span css={filenameStyle}>{filename}</span>
-                    </div>
-                    <div css={downloadButtonStyle}>
-                        {isFetching ? (
-                            <EuiLoadingSpinner size="m" />
-                        ) : (
-                            <EuiIcon type="download" size="m" />
-                        )}
-                    </div>
-                </div>
-            </div>
+  return (
+    <div css={containerStyle}>
+      <div css={buttonWrapperStyle}>
+        {exportData.message && <div css={titleStyle}>{exportData.message}</div>}
+        <div css={fileRowStyle} onClick={onDownloadClick}>
+          <div css={fileInfoStyle}>
+            <EuiIcon type="document" size="m" />
+            <span css={filenameStyle}>{filename}</span>
+          </div>
+          <div css={downloadButtonStyle}>
+            {isFetching ?
+              <EuiLoadingSpinner size="m" />
+            : <EuiIcon type="download" size="m" />}
+          </div>
         </div>
-    );
+      </div>
+    </div>
+  );
 }

package/src/components/WfoAgent/ExportButton/styles.ts

@@ -3,67 +3,67 @@ import { css } from '@emotion/react';
 import { WfoThemeHelpers } from '@/hooks';
 
 export const getExportButtonStyles = ({ theme }: WfoThemeHelpers) => {
-    const containerStyle = css({
-        marginTop: theme.size.xl,
-        marginBottom: theme.size.xl,
-        width: '50%',
-    });
+  const containerStyle = css({
+    marginTop: theme.size.xl,
+    marginBottom: theme.size.xl,
+    width: '50%',
+  });
 
-    const buttonWrapperStyle = css({
-        backgroundColor: theme.colors.backgroundBaseNeutral,
-        padding: `${theme.size.xl} ${theme.size.xl}`,
-        border: `${theme.border.width.thin} solid transparent`,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: theme.size.l,
-    });
+  const buttonWrapperStyle = css({
+    backgroundColor: theme.colors.backgroundBaseNeutral,
+    padding: `${theme.size.xl} ${theme.size.xl}`,
+    border: `${theme.border.width.thin} solid transparent`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.size.l,
+  });
 
-    const titleStyle = css({
-        fontSize: theme.size.m,
-        fontWeight: theme.font.weight.semiBold,
-        color: theme.colors.textParagraph,
-    });
+  const titleStyle = css({
+    fontSize: theme.size.m,
+    fontWeight: theme.font.weight.semiBold,
+    color: theme.colors.textParagraph,
+  });
 
-    const fileRowStyle = css({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        gap: theme.size.m,
-        border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
-        borderRadius: theme.border.radius.medium,
-        padding: `${theme.size.m} ${theme.size.l}`,
-        backgroundColor: theme.colors.backgroundBaseNeutral,
-        cursor: 'pointer',
-    });
+  const fileRowStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.size.m,
+    border: `${theme.border.width.thin} solid ${theme.colors.borderBaseSubdued}`,
+    borderRadius: theme.border.radius.medium,
+    padding: `${theme.size.m} ${theme.size.l}`,
+    backgroundColor: theme.colors.backgroundBaseNeutral,
+    cursor: 'pointer',
+  });
 
-    const fileInfoStyle = css({
-        display: 'flex',
-        alignItems: 'center',
-        gap: theme.size.m,
-        flex: 1,
-        color: theme.colors.textParagraph,
-    });
+  const fileInfoStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.size.m,
+    flex: 1,
+    color: theme.colors.textParagraph,
+  });
 
-    const filenameStyle = css({
-        fontSize: theme.size.m,
-        fontWeight: theme.font.weight.medium,
-        color: theme.colors.textParagraph,
-    });
+  const filenameStyle = css({
+    fontSize: theme.size.m,
+    fontWeight: theme.font.weight.medium,
+    color: theme.colors.textParagraph,
+  });
 
-    const downloadButtonStyle = css({
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        color: theme.colors.textParagraph,
-    });
+  const downloadButtonStyle = css({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.colors.textParagraph,
+  });
 
-    return {
-        containerStyle,
-        buttonWrapperStyle,
-        titleStyle,
-        fileRowStyle,
-        fileInfoStyle,
-        filenameStyle,
-        downloadButtonStyle,
-    };
+  return {
+    containerStyle,
+    buttonWrapperStyle,
+    titleStyle,
+    fileRowStyle,
+    fileInfoStyle,
+    filenameStyle,
+    downloadButtonStyle,
+  };
 };