@orsetra/shared-ui 1.1.8 → 1.1.10

package/components/extends/ArrayItemGroup/index.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { ChevronDown, ChevronUp, Trash2 } from 'lucide-react';
+import { Card, CardContent, CardHeader } from '../../ui/card';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../../ui/collapsible';
+import { cn } from '../../../lib/utils';
+
+type Props = {
+  id: string;
+  children?: React.ReactNode;
+  loading?: boolean;
+  labelTitle: string | React.ReactElement;
+  delete: (id: string) => void;
+};
+
+const ArrayItemGroup: React.FC<Props> = ({ id, children, loading, labelTitle, delete: onDelete }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Card className={cn(
+      "mb-4 border border-ui-border hover:border-ibm-blue-60 transition-colors",
+      loading && "opacity-50 pointer-events-none"
+    )}>
+      <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+        <CardHeader className="p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex-1">{labelTitle}</div>
+            <div className="flex items-center gap-2">
+              <CollapsibleTrigger asChild>
+                <button
+                  className="p-1 hover:bg-ibm-gray-10 rounded transition-colors"
+                  aria-label={isOpen ? "Collapse" : "Expand"}
+                >
+                  {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                </button>
+              </CollapsibleTrigger>
+              <button
+                onClick={() => onDelete(id)}
+                className="p-1 hover:bg-ibm-red-10 text-ibm-red-60 rounded transition-colors"
+                aria-label="Delete"
+              >
+                <Trash2 className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+        </CardHeader>
+        <CollapsibleContent>
+          <CardContent className="p-4 bg-white border-t border-ui-border">
+            {children}
+          </CardContent>
+        </CollapsibleContent>
+      </Collapsible>
+    </Card>
+  );
+};
+
+export default ArrayItemGroup;

package/components/extends/CPUNumber/index.tsx

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

package/components/extends/ClassStorageSelect/index.tsx

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

package/components/extends/ClusterSelect/index.tsx

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

package/components/extends/ComponentSelect/index.tsx

@@ -0,0 +1,112 @@
+import React, { useState } from 'react';
+import { Check, ChevronsUpDown, X } 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';
+
+type Props = {
+  value?: string[];
+  id: string;
+  onChange: (value: string[]) => void;
+  disabled: boolean;
+  options?: Array<{ label: string; value: string }>;
+  placeholder?: string;
+};
+
+const ComponentSelect: React.FC<Props> = ({ 
+  value = [], 
+  id, 
+  onChange, 
+  disabled,
+  options = [],
+  placeholder = 'Please select the components'
+}) => {
+  const [open, setOpen] = useState(false);
+
+  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 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}
+            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">
+              {value.length === 0 ? (
+                <span className="text-ibm-gray-50">{placeholder}</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 components..." />
+            <CommandEmpty>No component 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 ComponentSelect;

package/components/extends/DiskNumber/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 DiskNumber: React.FC<Props> = ({ value, id, onChange, disabled }) => {
+  const initValue = value ? parseInt(value.replace('Gi', ''), 10) : undefined;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value + 'Gi');
+  };
+
+  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">Gi</span>
+    </div>
+  );
+};
+
+export default DiskNumber;

package/components/extends/EnvSelect/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+type Props = {
+  clusterName: string;
+};
+
+const EnvSelect: React.FC<Props> = ({ clusterName }) => {
+  return <div className="env-container"></div>;
+};
+
+export default EnvSelect;

package/components/extends/Group/index.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { Switch } from '@/components/ui/switch';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { cn } from '@/lib/utils';
+
+type Props = {
+  title?: string | React.ReactNode;
+  description?: string | React.ReactNode;
+  children?: React.ReactNode;
+  // if required is false, this will be effective
+  closed?: boolean;
+  // If set is true, in any case, the group is closed initially.
+  initClose?: boolean;
+  loading?: boolean;
+  hasToggleIcon?: boolean;
+  required?: boolean;
+  field?: any;
+  jsonKey?: string;
+  propertyValue?: any;
+  alwaysShow?: boolean;
+  disableAddon?: boolean;
+  onChange?: (values: any) => void;
+};
+
+const Group: React.FC<Props> = (props) => {
+  const { title, description, children, hasToggleIcon, loading, required, disableAddon = false, jsonKey = '', propertyValue = {}, alwaysShow = false, closed: initialClosed, initClose, field, onChange } = props;
+  
+  const [isOpen, setIsOpen] = useState(true);
+  const [enable, setEnable] = useState(required);
+  const [checked, setChecked] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+
+  useEffect(() => {
+    const findKey = propertyValue && Object.keys(propertyValue).find((item) => item === jsonKey);
+    if (findKey || alwaysShow) {
+      setEnable(true);
+      setIsOpen(!initClose);
+      setChecked(true);
+    } else if (required) {
+      setEnable(true);
+      setIsOpen(!initClose);
+      setChecked(true);
+    } else {
+      setEnable(false);
+      setIsOpen(!(initialClosed || initClose));
+      setChecked(false);
+    }
+  }, [jsonKey, propertyValue, alwaysShow, required, initialClosed, initClose]);
+
+  const removeJsonKeyValue = () => {
+    if (field && onChange) {
+      field.remove(jsonKey);
+      const values = field.getValues();
+      onChange(values);
+    }
+  };
+
+  const handleSwitchChange = (event: boolean) => {
+    if (event === true) {
+      setEnable(true);
+      setIsOpen(true);
+      setChecked(true);
+    } else {
+      setShowConfirmDialog(true);
+    }
+  };
+
+  const handleConfirmDisable = () => {
+    setEnable(false);
+    setIsOpen(true);
+    setChecked(false);
+    removeJsonKeyValue();
+    setShowConfirmDialog(false);
+  };
+
+  return (
+    <>
+      <Card className={cn(
+        "mb-4 border border-ui-border hover:border-ibm-blue-60 transition-colors",
+        loading && "opacity-50 pointer-events-none"
+      )}>
+        {title && (
+          <CardHeader className="p-4">
+            <div className="flex items-start justify-between gap-4">
+              <div className="flex-1">
+                <div className="flex items-center gap-1">
+                  {required && <span className="text-ibm-red-60">*</span>}
+                  <span className="text-sm font-medium">{title}</span>
+                </div>
+                {description && (
+                  <div className="text-xs text-ibm-gray-70 mt-1">{description}</div>
+                )}
+              </div>
+              <div className="flex items-center gap-2">
+                {!required && (
+                  <Switch
+                    checked={checked}
+                    disabled={disableAddon}
+                    onCheckedChange={handleSwitchChange}
+                  />
+                )}
+                {enable && hasToggleIcon && (
+                  <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+                    <CollapsibleTrigger asChild>
+                      <button
+                        className="p-1 hover:bg-ibm-gray-10 rounded transition-colors"
+                        aria-label={isOpen ? "Collapse" : "Expand"}
+                      >
+                        {isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                      </button>
+                    </CollapsibleTrigger>
+                  </Collapsible>
+                )}
+              </div>
+            </div>
+          </CardHeader>
+        )}
+        {enable && (
+          <Collapsible open={isOpen}>
+            <CollapsibleContent>
+              <CardContent className="p-4 bg-white">
+                {children}
+              </CardContent>
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+      </Card>
+
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+            <AlertDialogDescription>
+              The configuration will be reset if the switch is turned off. Are you sure want to do this?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleConfirmDisable}>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
+
+export default Group;

package/components/extends/Ignore/index.tsx

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

package/components/extends/ImageInput/index.less

@@ -0,0 +1,49 @@
+.image-input-container {
+  display: flex;
+}
+
+.image-info {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px;
+  overflow-x: hidden;
+  background: rgba(171, 205, 239, 0.2);
+  .container-base {
+    display: flex;
+    padding: 8px;
+    .docker-base {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+    }
+    .docker-logo {
+      width: 50px;
+      margin: 0 16px 0 0;
+    }
+    .name {
+      display: flex;
+      flex-direction: column;
+      font-weight: 500;
+      font-size: 14px;
+      .desc {
+        padding: 0 8px;
+      }
+    }
+    .desc {
+      margin-top: 8px;
+      font-size: 14px;
+    }
+  }
+  .image-item {
+    display: flex;
+    padding: 8px;
+    svg {
+      margin-right: 6px;
+      font-size: 24px;
+      line-height: 60px;
+    }
+  }
+  .message {
+    color: var(--danger-color);
+  }
+}

package/components/extends/ImageInput/index.tsx

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from 'react';
+import { HardDrive, Upload, Container, Loader2 } from 'lucide-react';
+import { getImageInfo, getImageRepos, type ImageInfo } from '@/api/repository';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import { beautifyTime, beautifyBinarySize } from '@/utils/common';
+import ImageSecretSelect from '../ImageSecretSelect';
+import { cn } from '@/lib/utils';
+
+type Props = {
+  value?: string;
+  id: string;
+  label: string;
+  required?: boolean;
+  onChange: (value: string) => void;
+  disabled: boolean;
+  project?: string;
+  secretValue?: string[];
+  onSecretChange: (value?: string[]) => void;
+  secretID: string;
+  getImageRepos: (params: { project: string }) => Promise<any>;
+};
+
+const ImageInput: React.FC<Props> = ({
+  value,
+  id,
+  label,
+  required,
+  onChange,
+  disabled,
+  project,
+  secretValue,
+  onSecretChange,
+  secretID,
+  getImageRepos,
+}) => {
+  const [imageInfo, setImageInfo] = useState<ImageInfo | undefined>(undefined);
+  const [imageName, setImageName] = useState(value || '');
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (value && value !== imageName) {
+      setImageName(value);
+      loadImageInfo(value);
+    }
+  }, [value]);
+
+  const loadImageInfo = (name?: string) => {
+    const imageToLoad = name || imageName;
+    if (project && imageToLoad) {
+      onChange(imageToLoad);
+      setLoading(true);
+      getImageInfo({ project: project, name: imageToLoad })
+        .then((res: ImageInfo) => {
+          if (res) {
+            setImageInfo(res);
+            if (res.secretNames) {
+              onSecretChange(res.secretNames);
+            } else {
+              onSecretChange(undefined);
+            }
+          }
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  };
+
+  const secrets = imageInfo?.secretNames || secretValue;
+  const secretDisabled = disabled || !!imageInfo?.secretNames;
+
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="md:col-span-2">
+          <Label htmlFor={id} className={cn(required && 'after:content-["*"] after:ml-0.5 after:text-red-500')}>
+            {label}
+          </Label>
+          <Input
+            id={id}
+            value={imageName}
+            onChange={(e) => setImageName(e.target.value)}
+            disabled={disabled}
+            onBlur={() => loadImageInfo()}
+            placeholder="Enter image name"
+            className="mt-1"
+          />
+          <p className="text-sm text-ibm-gray-70 mt-1">
+            To deploy from a private registry, you need to create a config configuration
+          </p>
+        </div>
+        <div>
+          <Label htmlFor={secretID}>Secret</Label>
+          <ImageSecretSelect
+            id={secretID}
+            disabled={secretDisabled}
+            onChange={onSecretChange}
+            value={secrets}
+            project={project}
+            getImageRepos={getImageRepos}
+          />
+        </div>
+      </div>
+
+      {loading && (
+        <div className="flex items-center justify-center py-8">
+          <Loader2 className="h-6 w-6 animate-spin text-ibm-blue-60" />
+        </div>
+      )}
+
+      {!loading && imageInfo && (
+        <Card>
+          <CardContent className="p-4">
+            {imageInfo.info ? (
+              <div className="space-y-4">
+                <div className="flex items-start gap-3">
+                  <Container className="h-8 w-8 text-ibm-blue-60 flex-shrink-0" />
+                  <div className="flex-1">
+                    <div className="font-semibold text-lg">{imageInfo.name}</div>
+                    <div className="flex flex-wrap gap-3 text-sm text-ibm-gray-70 mt-1">
+                      <span title={imageInfo.info.created}>
+                        {beautifyTime(imageInfo.info.created)}
+                      </span>
+                      <span>{beautifyBinarySize(imageInfo.size || 0)}</span>
+                      {imageInfo.info.architecture && (
+                        <span>{imageInfo.info.architecture}</span>
+                      )}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 pt-4 border-t">
+                  <div className="flex items-start gap-2">
+                    <HardDrive className="h-5 w-5 text-ibm-gray-70 flex-shrink-0 mt-0.5" />
+                    <div className="flex-1">
+                      <div className="text-sm font-medium mb-1">Volumes</div>
+                      {imageInfo.info.config?.Volumes ? (
+                        <div className="flex flex-wrap gap-1">
+                          {Object.keys(imageInfo.info.config.Volumes).map((path, idx) => (
+                            <Badge key={idx} variant="outline" className="bg-green-50 text-green-700 border-green-200">
+                              {path}
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-sm text-ibm-gray-70">No default Volume config</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-2">
+                    <Upload className="h-5 w-5 text-ibm-gray-70 flex-shrink-0 mt-0.5" />
+                    <div className="flex-1">
+                      <div className="text-sm font-medium mb-1">Exposed Ports</div>
+                      {imageInfo.info.config?.ExposedPorts ? (
+                        <div className="flex flex-wrap gap-1">
+                          {Object.keys(imageInfo.info.config.ExposedPorts).map((port, idx) => (
+                            <Badge key={idx} variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
+                              {port}
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : (
+                        <span className="text-sm text-ibm-gray-70">No default Port config</span>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-2">
+                    <Container className="h-5 w-5 text-ibm-gray-70 flex-shrink-0 mt-0.5" />
+                    <div className="flex-1">
+                      <div className="text-sm font-medium mb-1">Registry</div>
+                      <Badge variant="outline" title={imageInfo.registry}>
+                        {imageInfo.registry}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ) : imageInfo.message ? (
+              <div className="text-sm text-ibm-red-60">{imageInfo.message}</div>
+            ) : null}
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+};
+
+export default ImageInput;