@orsetra/shared-ui 1.1.9 → 1.1.11

package/components/extends/ImageSecretSelect/index.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Check, ChevronsUpDown, X, Loader2 } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '@/components/ui/command';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import i18n from '@/i18n';
+import type { GetImageReposResponse, ImageRegistry } from '@/api/repository';
+
+
+type Props = {
+  value?: string[];
+  onChange: (value: string[]) => void;
+  id: string;
+  disabled: boolean;
+  project?: string;
+  getImageRepos: (params: { project: string }) => Promise<GetImageReposResponse>;
+};
+
+const ImageSecretSelect: React.FC<Props> = ({
+  value = [],
+  id,
+  onChange,
+  disabled,
+  project,
+  getImageRepos,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [registries, setRegistries] = useState<ImageRegistry[]>([]);
+  const [searchValue, setSearchValue] = useState('');
+
+  useEffect(() => {
+    if (project) {
+      setLoading(true);
+      getImageRepos({ project })
+        .then((res) => {
+          if (res) {
+            setRegistries(res.registries || []);
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [project]);
+
+  const convertImageRegistryOptions = (data: ImageRegistry[]): Array<{ label: string; value: string }> => {
+    return (data || []).map((item: ImageRegistry) => {
+      let label = item.secretName;
+      if (item.domain) {
+        label = `${item.secretName} (${item.domain})`;
+      }
+      return { label, value: item.secretName };
+    });
+  };
+
+  const handleSelect = (selectedValue: string) => {
+    const newValue = value.includes(selectedValue)
+      ? value.filter((v) => v !== selectedValue)
+      : [...value, selectedValue];
+    onChange(newValue);
+  };
+
+  const handleRemove = (valueToRemove: string) => {
+    onChange(value.filter((v) => v !== valueToRemove));
+  };
+
+  const dataSource = [...registries];
+  if (searchValue && !dataSource.some(r => r.secretName === searchValue)) {
+    dataSource.unshift({ secretName: searchValue, name: searchValue });
+  }
+
+  const options = convertImageRegistryOptions(dataSource);
+  const selectedLabels = options
+    .filter((opt) => value.includes(opt.value))
+    .map((opt) => opt.label);
+
+  return (
+    <div className="w-full">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            variant="secondary"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled || loading}
+            className="w-full justify-between h-auto min-h-[40px] px-3 py-2"
+            style={{ borderRadius: 0 }}
+          >
+            <div className="flex flex-wrap gap-1 flex-1">
+              {loading ? (
+                <div className="flex items-center gap-2">
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  <span className="text-ibm-gray-50">Loading...</span>
+                </div>
+              ) : value.length === 0 ? (
+                <span className="text-ibm-gray-50">
+                  {i18n.t('Please select or input your owner image registry secret')}
+                </span>
+              ) : (
+                selectedLabels.map((label, index) => (
+                  <Badge
+                    key={value[index]}
+                    variant="secondary"
+                    className="mr-1"
+                    style={{ borderRadius: 0 }}
+                  >
+                    {label}
+                    <button
+                      className="ml-1 hover:text-ibm-red-60"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleRemove(value[index]);
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </button>
+                  </Badge>
+                ))
+              )}
+            </div>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-full p-0" style={{ borderRadius: 0 }}>
+          <Command>
+            <CommandInput 
+              placeholder="Search or enter custom secret name..." 
+              value={searchValue}
+              onValueChange={setSearchValue}
+            />
+            <CommandEmpty>
+              {searchValue ? (
+                <div className="p-2 text-sm">
+                  Press Enter to add "{searchValue}"
+                </div>
+              ) : (
+                'No registry found.'
+              )}
+            </CommandEmpty>
+            <CommandGroup className="max-h-64 overflow-auto">
+              {options.map((option) => (
+                <CommandItem
+                  key={option.value}
+                  value={option.value}
+                  onSelect={() => handleSelect(option.value)}
+                >
+                  <Check
+                    className={cn(
+                      "mr-2 h-4 w-4",
+                      value.includes(option.value) ? "opacity-100" : "opacity-0"
+                    )}
+                  />
+                  {option.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+};
+
+export default ImageSecretSelect;

package/components/extends/KV/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { KVInput } from '../../ui/kv-input';
+
+type Props = {
+  value?: Record<string, string>;
+  onChange?: (value: Record<string, string>) => void;
+  id: string;
+  disabled: boolean;
+};
+
+const KV: React.FC<Props> = ({ value, onChange, disabled }) => {
+  return (
+    <KVInput
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      keyPlaceholder="Key"
+      valuePlaceholder="Value"
+    />
+  );
+};
+
+export default KV;

package/components/extends/MemoryNumber/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Input } from '../../ui/input';
+
+type Props = {
+  id: string;
+  onChange: (value: any) => void;
+  value?: any;
+  disabled: boolean;
+};
+
+const MemoryNumber: React.FC<Props> = ({ value, id, onChange, disabled }) => {
+  const initValue = value ? parseInt(value.replace('Mi', ''), 10) : undefined;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value + 'Mi');
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Input
+        id={id}
+        type="number"
+        min="0"
+        disabled={disabled}
+        onChange={handleChange}
+        value={initValue}
+        className="flex-1"
+      />
+      <span className="text-sm text-ibm-gray-70">Mi</span>
+    </div>
+  );
+};
+
+export default MemoryNumber;

package/components/extends/Numbers/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { NumbersInput } from '@/components/ui/numbers-input';
+
+type Props = {
+  label?: string;
+  value?: number[];
+  id: string;
+  onChange: (value: number[]) => void;
+  disabled: boolean;
+};
+
+const Numbers: React.FC<Props> = ({ value, onChange, disabled }) => {
+  return (
+    <NumbersInput
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      placeholder="Enter number"
+    />
+  );
+};
+
+export default Numbers;

package/components/extends/PVCSelect/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+type Props = {
+  clusterName: string;
+  namespace: string;
+};
+
+const PVCSelect: React.FC<Props> = ({ clusterName, namespace }) => {
+  return <div />;
+};
+
+export default PVCSelect;

package/components/extends/PolicySelect/index.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { MultiSelect } from '../../ui/multi-select';
+import type { ApplicationPolicyBase } from '@/api';
+
+type Props = {
+  onChange: (value: any) => void;
+  value?: any;
+  id: string;
+  disabled: boolean;
+  appName: string;
+  getPolicyList: (params: { appName: string }) => Promise<{ policies: ApplicationPolicyBase[] }>;
+};
+
+const PolicySelect: React.FC<Props> = ({ value, id, disabled, onChange, appName, getPolicyList }) => {
+  const [policySelectDataSource, setPolicySelectDataSource] = useState<Array<{ label: string; value: string }>>([]);
+
+  useEffect(() => {
+    const fetchPolicyList = async () => {
+      if (appName) {
+        try {
+          const res = await getPolicyList({ appName });
+          if (res && res.policies) {
+            const policyListData = (res.policies || []).map((item: ApplicationPolicyBase) => ({
+              label: `${item.name}(${item.type})`,
+              value: item.name,
+            }));
+            setPolicySelectDataSource(policyListData);
+          } else {
+            setPolicySelectDataSource([]);
+          }
+        } catch {
+          setPolicySelectDataSource([]);
+        }
+      }
+    };
+
+    fetchPolicyList();
+  }, [appName, getPolicyList]);
+
+  return (
+    <MultiSelect
+      placeholder="Please select"
+      onChange={onChange}
+      id={id}
+      disabled={disabled}
+      defaultValue={value || []}
+      value={value || []}
+      dataSource={policySelectDataSource}
+    />
+  );
+};
+
+export default PolicySelect;

package/components/extends/SecretKeySelect/index.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+import { Button } from '../../ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from '../../ui/command';
+import { cn } from '../../../lib/utils';
+import i18n from '@/i18n';
+
+type Props = {
+  onChange: (value: any) => void;
+  secretKeys?: string[];
+  value?: any;
+  id: string;
+  disabled: boolean;
+};
+
+const SecretKeySelect: React.FC<Props> = ({ onChange, value, secretKeys, id, disabled }) => {
+  const [open, setOpen] = useState(false);
+  const [searchValue, setSearchValue] = useState('');
+
+  const dataSource = [...(secretKeys || [])];
+  if (searchValue && !dataSource.includes(searchValue)) {
+    dataSource.unshift(searchValue);
+  }
+
+  const options = dataSource.map((item) => ({
+    label: item,
+    value: item,
+  }));
+
+  const handleSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setOpen(false);
+  };
+
+  const selectedLabel = options.find((opt) => opt.value === value)?.label || value;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          id={id}
+          variant="secondary"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="w-full justify-between h-[40px] px-3"
+          style={{ borderRadius: 0 }}
+        >
+          <span className={cn(!value && "text-ibm-gray-50")}>
+            {value ? selectedLabel : i18n.t('Please select or input a secret key')}
+          </span>
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-full p-0" style={{ borderRadius: 0 }}>
+        <Command>
+          <CommandInput 
+            placeholder="Search or enter custom secret key..." 
+            value={searchValue}
+            onValueChange={setSearchValue}
+          />
+          <CommandEmpty>
+            {searchValue ? (
+              <div className="p-2 text-sm">
+                Press Enter to add "{searchValue}"
+              </div>
+            ) : (
+              'No secret key found.'
+            )}
+          </CommandEmpty>
+          <CommandGroup className="max-h-64 overflow-auto">
+            {options.map((option) => (
+              <CommandItem
+                key={option.value}
+                value={option.value}
+                onSelect={() => handleSelect(option.value)}
+              >
+                <Check
+                  className={cn(
+                    "mr-2 h-4 w-4",
+                    value === option.value ? "opacity-100" : "opacity-0"
+                  )}
+                />
+                {option.label}
+              </CommandItem>
+            ))}
+          </CommandGroup>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default SecretKeySelect;

package/components/extends/SecretSelect/index.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Combobox } from '../../ui/combobox';
+
+import { locale } from '@/utils/locale';
+import type { Secret } from '@/api';
+
+type Props = {
+  onChange: (value: any) => void;
+  setKeys: (keys: string[]) => void;
+  value?: any;
+  id: string;
+  appNamespace?: string;
+  disabled: boolean;
+  listCloudResourceSecrets: (params: { appNs: string }) => Promise<{ secrets: Secret[] }>;
+};
+
+const SecretSelect: React.FC<Props> = ({ value, id, disabled, appNamespace, onChange, setKeys, listCloudResourceSecrets }) => {
+  const [secrets, setSecrets] = useState<Secret[]>([]);
+
+  const getSecretKeys = useCallback((name: string) => {
+    let keys: string[] = [];
+    secrets?.forEach((secret) => {
+      if (secret.metadata.labels['app.oam.dev/sync-alias'] === name && 'data' in secret) {
+        keys = Object.keys(secret.data);
+      }
+    });
+    return keys;
+  }, [secrets]);
+
+  useEffect(() => {
+    const loadSecrets = async () => {
+      if (appNamespace) {
+        try {
+          const res = await listCloudResourceSecrets({ appNs: appNamespace });
+          if (res) {
+            setSecrets(res.secrets);
+            const keys = getSecretKeys(value);
+            setKeys(keys);
+          }
+        } catch {
+          setSecrets([]);
+        }
+      }
+    };
+
+    loadSecrets();
+  }, [appNamespace, value, setKeys, getSecretKeys, listCloudResourceSecrets]);
+
+  const handleChange = (selectedValue: string) => {
+    const keys = getSecretKeys(selectedValue);
+    onChange(selectedValue);
+    setKeys(keys);
+  };
+
+  const filters = secrets?.filter((secret) => secret.metadata.labels['app.oam.dev/sync-alias']);
+  const dataSource =
+    filters?.map((secret) => ({
+      label: secret.metadata.labels['app.oam.dev/sync-alias'],
+      value: secret.metadata.labels['app.oam.dev/sync-alias'],
+    })) || [];
+
+  return (
+    <Combobox
+      locale={locale().Select}
+      onChange={handleChange}
+      value={value}
+      id={id}
+      disabled={disabled}
+      placeholder="Please select or input a secret name"
+      enableInput={true}
+      dataSource={dataSource}
+    />
+  );
+};
+
+export default SecretSelect;

package/components/extends/StepSelect/index.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useContext } from 'react';
+
+import { MultiSelect } from '@/components/ui/multi-select';
+import { WorkflowContext, WorkflowEditContext } from '@/context';
+import i18n from '@/i18n';
+import type { WorkflowStep, WorkflowStepBase } from '@/api';
+import { showAlias } from '@/utils/common';
+import { locale } from '@/utils/locale';
+
+type Props = {
+  value?: string[];
+  id: string;
+  onChange: (value: string[]) => void;
+  disabled?: boolean;
+};
+
+export const StepSelect = (props: Props) => {
+  const { value, id, disabled } = props;
+  const { stepName, steps } = useContext(WorkflowEditContext);
+  const { workflow } = useContext(WorkflowContext);
+  const stepOptions: Array<{ label: string; value: string }> = [];
+  let inGroup = false;
+  let groupStep: WorkflowStep | undefined;
+  steps?.map((step) => {
+    step.subSteps?.map((subStep) => {
+      if (subStep.name === stepName) {
+        inGroup = true;
+        groupStep = step;
+      }
+    });
+  });
+  if (workflow?.mode === 'DAG' && (workflow.subMode === 'DAG' || (workflow.subMode === 'StepByStep' && !inGroup))) {
+    steps
+      ?.filter((s) => s.name !== stepName)
+      .map((step: WorkflowStep) => {
+        stepOptions.push({
+          label: showAlias(step.name, step.alias),
+          value: step.name,
+        });
+        step.subSteps
+          ?.filter((s) => s.name !== stepName)
+          .map((b: WorkflowStepBase) => {
+            stepOptions.push({
+              label: `${showAlias(step.name, step.alias)}/${showAlias(b.name, b.alias)}`,
+              value: b.name,
+            });
+          });
+      });
+  }
+
+  if (workflow?.mode === 'StepByStep' && workflow.subMode === 'DAG' && inGroup && groupStep) {
+    groupStep.subSteps
+      ?.filter((s) => s.name !== stepName)
+      .map((step: WorkflowStep) => {
+        stepOptions.push({
+          label: showAlias(step.name, step.alias),
+          value: step.name,
+        });
+      });
+  }
+
+  return (
+    <MultiSelect
+      placeholder={i18n.t('Please select the steps')}
+      onChange={props.onChange}
+      id={id}
+      disabled={disabled}
+      defaultValue={value || []}
+      value={value || []}
+      dataSource={stepOptions}
+      locale={locale().Select}
+    />
+  );
+};

package/components/extends/Strings/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StringsInput } from '@/components/ui/strings-input';
+
+type Props = {
+  label?: string;
+  value?: string[];
+  id: string;
+  onChange: (value: string[]) => void;
+  disabled: boolean;
+};
+
+const Strings: React.FC<Props> = ({ value, onChange, disabled }) => {
+  return (
+    <StringsInput
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      placeholder="Enter value"
+    />
+  );
+};
+
+export default Strings;

package/components/extends/Switch/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Switch } from '@/components/ui/switch';
+
+type Props = {
+  value: boolean;
+  id: string;
+  onChange: (value: any) => void;
+};
+
+const SwitchComponent: React.FC<Props> = ({ value, id, onChange }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch
+        id={id}
+        checked={value}
+        onCheckedChange={onChange}
+      />
+      <span className="text-xs text-ibm-gray-70">{value ? 'on' : 'off'}</span>
+    </div>
+  );
+};
+
+export default SwitchComponent;

package/components/extends/index.ts

@@ -0,0 +1,21 @@
+// Extended UI Components for Dynamic Forms
+export { default as CPUNumber } from './CPUNumber'
+export { default as ClassStorageSelect } from './ClassStorageSelect'
+export { default as ClusterSelect } from './ClusterSelect'
+export { default as ComponentSelect } from './ComponentSelect'
+export { default as DiskNumber } from './DiskNumber'
+export { default as EnvSelect } from './EnvSelect'
+export { default as Group } from './Group'
+export { default as Ignore } from './Ignore'
+export { default as ImageInput } from './ImageInput'
+export { default as ImageSecretSelect } from './ImageSecretSelect'
+export { default as KV } from './KV'
+export { default as MemoryNumber } from './MemoryNumber'
+export { default as Numbers } from './Numbers'
+export { default as PVCSelect } from './PVCSelect'
+export { default as PolicySelect } from './PolicySelect'
+export { default as SecretKeySelect } from './SecretKeySelect'
+export { default as SecretSelect } from './SecretSelect'
+export { StepSelect } from './StepSelect'
+export { default as Strings } from './Strings'
+export { default as FormSwitch } from './Switch'