feat(FR-1409): implementing import and delete for revision

packages/backend.ai-ui/package.json

@@ -105,18 +105,16 @@
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^19.0.3",
     "@types/react-relay": "^18.2.1",
+    "@types/relay-runtime": "^19.0.2",
     "@types/react-resizable": "^3.0.8",
     "@types/relay-test-utils": "^19.0.0",
     "@vitejs/plugin-react": "^4.5.0",
-    "ahooks": "^3.8.4",
-    "dayjs": "^1.11.13",
     "eslint": "^8.57.1",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-storybook": "^9.1.1",
     "fast-glob": "^3.3.3",
-    "graphql": "^16.10.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "storybook": "^9.1.1",

packages/backend.ai-ui/src/components/BAIGraphQLPropertyFilter.tsx

@@ -136,8 +136,25 @@ interface FilterCondition {
 }
 
 const OPERATORS_BY_TYPE: Record<FilterPropertyType, FilterOperator[]> = {
-  string: ['equals', 'notEquals', 'contains', 'startsWith', 'endsWith', 'in', 'notIn'],
-  number: ['equals', 'notEquals', 'greaterThan', 'greaterOrEqual', 'lessThan', 'lessOrEqual', 'in', 'notIn'],
+  string: [
+    'equals',
+    'notEquals',
+    'contains',
+    'startsWith',
+    'endsWith',
+    'in',
+    'notIn',
+  ],
+  number: [
+    'equals',
+    'notEquals',
+    'greaterThan',
+    'greaterOrEqual',
+    'lessThan',
+    'lessOrEqual',
+    'in',
+    'notIn',
+  ],
   boolean: ['equals'],
   enum: ['equals', 'notEquals', 'in', 'notIn'],
 };

packages/backend.ai-ui/src/components/BAIImportFromHuggingFaceModal.tsx

@@ -0,0 +1,150 @@
+import { BAIImportFromHuggingFaceModalScanArtifactModelsMutation } from '../__generated__/BAIImportFromHuggingFaceModalScanArtifactModelsMutation.graphql';
+import BAIFlex from './BAIFlex';
+import BAIText from './BAIText';
+import BAIUnmountAfterClose from './BAIUnmountAfterClose';
+import { App, Form, Input, Modal, ModalProps } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { graphql, useMutation } from 'react-relay';
+
+export interface BAIImportFromHuggingFaceModalProps
+  extends Omit<ModalProps, 'onOk'> {
+  onOk: (e: React.MouseEvent<HTMLElement>, artifactId: string) => void;
+}
+
+const BAIImportFromHuggingFaceModal = ({
+  onOk,
+  onCancel,
+  ...modalProps
+}: BAIImportFromHuggingFaceModalProps) => {
+  const { t } = useTranslation();
+  const [form] = Form.useForm();
+  const { message } = App.useApp();
+
+  const [scanArtifactModels, isInflightScanArtifactModels] =
+    useMutation<BAIImportFromHuggingFaceModalScanArtifactModelsMutation>(
+      graphql`
+        mutation BAIImportFromHuggingFaceModalScanArtifactModelsMutation(
+          $input: ScanArtifactModelsInput!
+        ) {
+          scanArtifactModels(input: $input) {
+            artifactRevision {
+              count
+              edges {
+                node {
+                  artifact {
+                    id
+                  }
+                }
+              }
+            }
+          }
+        }
+      `,
+    );
+  return (
+    <BAIUnmountAfterClose>
+      <Modal
+        title={t('comp:BAIImportFromHuggingFaceModal.ModalTitle')}
+        okText={t('comp:BAIImportFromHuggingFaceModal.Import')}
+        centered
+        cancelText={t('general.button.Close')}
+        {...modalProps}
+        okButtonProps={{
+          loading: isInflightScanArtifactModels,
+          disabled: isInflightScanArtifactModels,
+        }}
+        onOk={(e) => {
+          form
+            .validateFields()
+            .then((values) => {
+              scanArtifactModels({
+                variables: {
+                  input: {
+                    models: [
+                      {
+                        modelId: values.modelId,
+                        revision: values.revision ?? null,
+                      },
+                    ],
+                  },
+                },
+                onCompleted: (res, errors) => {
+                  if (errors && errors.length > 0) {
+                    errors.forEach((err) =>
+                      message.error(
+                        err.message ??
+                          t(
+                            'comp:BAIImportFromHuggingFaceModal.Failed to import model from hugging face',
+                          ),
+                      ),
+                    );
+                    return;
+                  }
+                  message.success(
+                    t(
+                      'comp:BAIImportFromHuggingFaceModal.SuccessfullyImportedModelFromHuggingFace',
+                    ),
+                  );
+                  onOk(
+                    e,
+                    res.scanArtifactModels.artifactRevision.edges[0].node
+                      .artifact.id,
+                  );
+                },
+                onError: (error) => {
+                  message.error(
+                    error.message ??
+                      t(
+                        'comp:BAIImportFromHuggingFaceModal.Failed to import model from hugging face',
+                      ),
+                  );
+                },
+              });
+            })
+            .catch(() => {});
+        }}
+        onCancel={(e) => {
+          onCancel?.(e);
+        }}
+        afterClose={() => {
+          form.resetFields();
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <BAIFlex direction="column" gap="md" align="stretch">
+            <BAIText>
+              {t('comp:BAIImportFromHuggingFaceModal.ModalDescription')}
+            </BAIText>
+            <Form.Item
+              label={t('comp:BAIImportFromHuggingFaceModal.ModelID')}
+              name="modelId"
+              required
+              rules={[{ required: true }]}
+              style={{
+                marginBottom: 0,
+              }}
+            >
+              <Input
+                placeholder={t(
+                  'comp:BAIImportFromHuggingFaceModal.EnterAModelID',
+                )}
+              />
+            </Form.Item>
+            <Form.Item
+              label={t('comp:BAIImportFromHuggingFaceModal.Version')}
+              name="revision"
+            >
+              <Input
+                placeholder={t(
+                  'comp:BAIImportFromHuggingFaceModal.EnterAVersion',
+                )}
+              />
+            </Form.Item>
+          </BAIFlex>
+        </Form>
+      </Modal>
+    </BAIUnmountAfterClose>
+  );
+};
+
+export default BAIImportFromHuggingFaceModal;

packages/backend.ai-ui/src/components/BAISelect.tsx

@@ -0,0 +1,180 @@
+import BAIFlex from './BAIFlex';
+import { Divider, Select, SelectProps, theme, Tooltip, Typography } from 'antd';
+import { createStyles } from 'antd-style';
+import { BaseOptionType, DefaultOptionType } from 'antd/es/select';
+import { GetRef } from 'antd/lib';
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, { useLayoutEffect, useRef } from 'react';
+
+const useStyles = createStyles(({ css, token }) => ({
+  ghostSelect: css`
+    &.ant-select {
+      .ant-select-selector {
+        background-color: transparent;
+        border-color: ${token.colorBgBase} !important;
+        /* box-shadow: none; */
+        color: ${token.colorBgBase};
+        /* transition: color 0.3s, border-color 0.3s; */
+      }
+
+      &:hover .ant-select-selector {
+        background-color: rgb(255 255 255 / 10%);
+      }
+
+      &:active .ant-select-selector {
+        background-color: rgb(255 255 255 / 10%);
+      }
+
+      .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+
+      &:hover .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+
+      &:active .ant-select-arrow {
+        color: ${token.colorBgBase};
+      }
+    }
+  `,
+}));
+
+export interface BAISelectProps<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+> extends SelectProps<ValueType, OptionType> {
+  ref?: React.RefObject<GetRef<typeof Select<ValueType, OptionType>> | null>;
+  ghost?: boolean;
+  autoSelectOption?:
+    | boolean
+    | ((options: SelectProps<ValueType, OptionType>['options']) => ValueType);
+  tooltip?: string;
+  atBottomThreshold?: number;
+  atBottomStateChange?: (atBottom: boolean) => void;
+  bottomLoading?: boolean;
+  footer?: React.ReactNode;
+  endReached?: () => void; // New prop for endReached
+}
+
+function BAISelect<
+  ValueType = any,
+  OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+>({
+  ref,
+  autoSelectOption,
+  ghost,
+  tooltip = '',
+  atBottomThreshold = 30,
+  atBottomStateChange,
+  bottomLoading,
+  footer,
+  endReached, // Destructure the new prop
+  ...selectProps
+}: BAISelectProps<ValueType, OptionType>): React.ReactElement {
+  const { value, options, onChange } = selectProps;
+  const { styles } = useStyles();
+  // const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const lastScrollTop = useRef<number>(0);
+  const isAtBottom = useRef<boolean>(false);
+  const { token } = theme.useToken();
+
+  useLayoutEffect(() => {
+    if (autoSelectOption && _.isEmpty(value) && options?.[0]) {
+      if (_.isBoolean(autoSelectOption)) {
+        onChange?.(options?.[0].value || options?.[0], options?.[0]);
+      } else if (_.isFunction(autoSelectOption)) {
+        onChange?.(autoSelectOption(options), options?.[0]);
+      }
+    }
+  }, [value, options, onChange, autoSelectOption]);
+
+  // Function to check if the scroll has reached the bottom
+  const handlePopupScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    if (!atBottomStateChange && !endReached) return; // Check for endReached
+
+    const target = e.target as HTMLElement;
+    const scrollTop = target.scrollTop;
+    // const scrollDirection = scrollTop > lastScrollTop.current ? 'down' : 'up';
+    lastScrollTop.current = scrollTop;
+
+    const isAtBottomNow =
+      target.scrollHeight - scrollTop - target.clientHeight <=
+      atBottomThreshold;
+
+    // Only notify when the state changes
+    // ~~or when scrolling down at the bottom~~
+    if (
+      isAtBottomNow !== isAtBottom.current
+      // ||
+      // (isAtBottomNow && scrollDirection === 'down')
+    ) {
+      isAtBottom.current = isAtBottomNow;
+      atBottomStateChange?.(isAtBottomNow);
+
+      if (isAtBottomNow) {
+        endReached?.(); // Call endReached when at the bottom
+      }
+    }
+  };
+
+  return (
+    <Tooltip title={tooltip}>
+      <Select<ValueType, OptionType>
+        {...selectProps}
+        ref={ref}
+        className={
+          ghost
+            ? classNames(styles.ghostSelect, selectProps.className)
+            : selectProps.className
+        }
+        onPopupScroll={(e) => {
+          if (atBottomStateChange || endReached) handlePopupScroll(e);
+          selectProps.onPopupScroll?.(e);
+        }}
+        dropdownRender={
+          footer
+            ? (menu) => {
+                // Process with custom dropdownRender if provided
+                // const renderedMenu = selectProps.dropdownRender
+                //   ? selectProps.dropdownRender(menu)
+                //   : menu;
+
+                return (
+                  <BAIFlex direction="column" align="stretch">
+                    {menu}
+                    <Divider
+                      style={{
+                        margin: 0,
+                        marginBottom: token.paddingXS,
+                      }}
+                    />
+                    <BAIFlex
+                      direction="column"
+                      align="end"
+                      gap={'xs'}
+                      style={{
+                        paddingBottom: token.paddingXXS,
+                        paddingInline: token.paddingSM,
+                      }}
+                    >
+                      {_.isString(footer) ? (
+                        <Typography.Text type="secondary">
+                          {footer}
+                        </Typography.Text>
+                      ) : (
+                        footer
+                      )}
+                    </BAIFlex>
+                  </BAIFlex>
+                );
+              }
+            : undefined
+        }
+      />
+    </Tooltip>
+  );
+}
+
+export default BAISelect;