storage-explorer 0.1.0 → 1.1.0

package/src/features/objects/ObjectExplorer.tsx

@@ -0,0 +1,142 @@
+import type { ObjectsPayload } from "../../shared/types/s3";
+import { PathBreadcrumb } from "./PathBreadcrumb";
+
+type ObjectExplorerProps = {
+  selectedBucket: string;
+  prefix: string;
+  objects: ObjectsPayload | null;
+  loadingObjects: boolean;
+  isNextPage: boolean;
+  nextToken: string | null;
+  onUpOneLevel: () => void;
+  onLoadFirstPage: () => void;
+  onLoadNextPage: () => void;
+  onOpenFolder: (folderPrefix: string) => void;
+  onNavigatePrefix: (prefix: string) => void;
+  onDownloadFile: (key: string) => void;
+  downloadingKey: string | null;
+};
+
+function formatObjectName(key: string, prefix: string): string {
+  if (!prefix) {
+    return key;
+  }
+
+  return key.startsWith(prefix) ? key.slice(prefix.length) : key;
+}
+
+function formatFolderName(prefixValue: string, currentPrefix: string): string {
+  const clean = prefixValue.replace(/\/$/, "");
+  const withoutCurrent =
+    currentPrefix && clean.startsWith(currentPrefix) ? clean.slice(currentPrefix.length) : clean;
+  const parts = withoutCurrent.split("/").filter(Boolean);
+  return parts.at(-1) ?? clean;
+}
+
+export function ObjectExplorer(props: ObjectExplorerProps) {
+  const {
+    selectedBucket,
+    prefix,
+    objects,
+    loadingObjects,
+    isNextPage,
+    nextToken,
+    onUpOneLevel,
+    onLoadFirstPage,
+    onLoadNextPage,
+    onOpenFolder,
+    onNavigatePrefix,
+    onDownloadFile,
+    downloadingKey,
+  } = props;
+
+  return (
+    <section className="panel object-panel">
+      <div className="panel-step">Step 3</div>
+      <div className="objects-header">
+        <div>
+          <h3>Objects</h3>
+          <p>Read-only view of folders and files.</p>
+        </div>
+        <div className="objects-actions">
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onUpOneLevel}
+            disabled={!selectedBucket || loadingObjects}
+          >
+            Up One Level
+          </button>
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onLoadFirstPage}
+            disabled={!selectedBucket || loadingObjects || !isNextPage}
+          >
+            First Page
+          </button>
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onLoadNextPage}
+            disabled={!nextToken || loadingObjects}
+          >
+            {loadingObjects ? "Loading..." : "Next Page"}
+          </button>
+        </div>
+      </div>
+
+      <PathBreadcrumb
+        bucket={selectedBucket}
+        prefix={prefix}
+        loading={loadingObjects}
+        onNavigatePrefix={onNavigatePrefix}
+      />
+
+      <div className="objects-list">
+        {!objects && <p className="empty-copy">Open a bucket to browse objects.</p>}
+
+        {objects && (
+          <>
+            {objects.folders.length === 0 && objects.files.length === 0 && (
+              <p className="empty-copy">This path is empty.</p>
+            )}
+
+            {objects.folders.map(folder => (
+              <button
+                key={folder}
+                type="button"
+                className="object-row folder"
+                onClick={() => onOpenFolder(folder)}
+                disabled={loadingObjects}
+              >
+                <span className="object-name">{formatFolderName(folder, prefix)}/</span>
+                <span className="object-meta">folder</span>
+                <span className="object-meta">-</span>
+                <span />
+              </button>
+            ))}
+
+            {objects.files.map(file => (
+              <div key={file.key} className="object-row file">
+                <span className="object-name">{formatObjectName(file.key, prefix)}</span>
+                <span className="object-meta">{file.size.toLocaleString()} bytes</span>
+                <span className="object-meta">
+                  {file.lastModified ? new Date(file.lastModified).toLocaleString() : "-"}
+                </span>
+                <button
+                  type="button"
+                  className="download-button"
+                  onClick={() => onDownloadFile(file.key)}
+                  disabled={downloadingKey === file.key}
+                >
+                  {downloadingKey === file.key ? "Downloading..." : "Download"}
+                </button>
+              </div>
+            ))}
+          </>
+        )}
+      </div>
+    </section>
+  );
+}

package/src/features/objects/PathBreadcrumb.tsx

@@ -0,0 +1,50 @@
+type PathBreadcrumbProps = {
+  bucket: string;
+  prefix: string;
+  loading: boolean;
+  onNavigatePrefix: (prefix: string) => void;
+};
+
+export function PathBreadcrumb(props: PathBreadcrumbProps) {
+  const { bucket, prefix, loading, onNavigatePrefix } = props;
+
+  if (!bucket) {
+    return (
+      <div className="path-breadcrumb muted">
+        <span>Bucket path will appear here.</span>
+      </div>
+    );
+  }
+
+  const segments = prefix.split("/").filter(Boolean);
+
+  return (
+    <div className="path-breadcrumb">
+      <button
+        type="button"
+        className="breadcrumb-link"
+        onClick={() => onNavigatePrefix("")}
+        disabled={loading}
+      >
+        {bucket}
+      </button>
+
+      {segments.map((segment, index) => {
+        const targetPrefix = `${segments.slice(0, index + 1).join("/")}/`;
+        return (
+          <span key={targetPrefix} className="breadcrumb-segment">
+            <span className="breadcrumb-separator">/</span>
+            <button
+              type="button"
+              className="breadcrumb-link"
+              onClick={() => onNavigatePrefix(targetPrefix)}
+              disabled={loading}
+            >
+              {segment}
+            </button>
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/src/features/profiles/ProfileSidebar.tsx

@@ -0,0 +1,167 @@
+import type { FormEvent } from "react";
+import type { EditableProfile, SavedProfile } from "../../shared/types/s3";
+
+type ProfileSidebarProps = {
+  profiles: SavedProfile[];
+  selectedProfileId: string | null;
+  isEditingExisting: boolean;
+  form: EditableProfile;
+  showSecret: boolean;
+  statusMessage: string;
+  statusError: string;
+  testingConnection: boolean;
+  onCreateNewProfile: () => void;
+  onSelectProfile: (profile: SavedProfile) => void;
+  onDeleteProfile: (profileId: string) => void;
+  onSaveProfile: (event: FormEvent<HTMLFormElement>) => void;
+  onTestConnection: () => void;
+  onToggleSecret: () => void;
+  onFormChange: <K extends keyof EditableProfile>(field: K, value: EditableProfile[K]) => void;
+};
+
+export function ProfileSidebar(props: ProfileSidebarProps) {
+  const {
+    profiles,
+    selectedProfileId,
+    isEditingExisting,
+    form,
+    showSecret,
+    statusMessage,
+    statusError,
+    testingConnection,
+    onCreateNewProfile,
+    onSelectProfile,
+    onDeleteProfile,
+    onSaveProfile,
+    onTestConnection,
+    onToggleSecret,
+    onFormChange,
+  } = props;
+
+  return (
+    <aside className="panel profile-panel">
+      <div className="panel-step">Step 1</div>
+      <div className="panel-header">
+        <h1>Connection Profile</h1>
+        <p>Save and reuse credentials in your browser.</p>
+      </div>
+
+      <div className="profiles-toolbar">
+        <strong>Saved Profiles</strong>
+        <button type="button" className="ghost-button" onClick={onCreateNewProfile}>
+          New
+        </button>
+      </div>
+
+      <div className="profiles-list" role="list" aria-label="Saved profiles">
+        {profiles.length === 0 && <p className="empty-copy">No saved profiles yet.</p>}
+        {profiles.map(profile => (
+          <div
+            key={profile.id}
+            className={`profile-card ${profile.id === selectedProfileId ? "active" : ""}`}
+            role="listitem"
+          >
+            <button type="button" className="profile-select" onClick={() => onSelectProfile(profile)}>
+              <span className="profile-name">{profile.name || "Unnamed profile"}</span>
+              <span className="profile-endpoint">{profile.endpoint}</span>
+            </button>
+            <button
+              type="button"
+              className="delete-button"
+              onClick={() => onDeleteProfile(profile.id)}
+              aria-label={`Delete ${profile.name || "profile"}`}
+            >
+              Delete
+            </button>
+          </div>
+        ))}
+      </div>
+
+      <form className="profile-form" onSubmit={onSaveProfile}>
+        <label>
+          Profile Name
+          <input
+            type="text"
+            value={form.name}
+            onChange={event => onFormChange("name", event.target.value)}
+            placeholder="MinIO dev, staging S3"
+          />
+        </label>
+
+        <label>
+          Endpoint URL *
+          <input
+            type="url"
+            value={form.endpoint}
+            onChange={event => onFormChange("endpoint", event.target.value)}
+            placeholder="https://s3.amazonaws.com"
+            required
+          />
+        </label>
+
+        <label>
+          Region
+          <input
+            type="text"
+            value={form.region}
+            onChange={event => onFormChange("region", event.target.value)}
+            placeholder="us-east-1"
+          />
+        </label>
+
+        <label>
+          Access Key ID *
+          <input
+            type="text"
+            value={form.accessKeyId}
+            onChange={event => onFormChange("accessKeyId", event.target.value)}
+            autoComplete="off"
+            required
+          />
+        </label>
+
+        <label>
+          Secret Access Key *
+          <div className="secret-row">
+            <input
+              type={showSecret ? "text" : "password"}
+              value={form.secretAccessKey}
+              onChange={event => onFormChange("secretAccessKey", event.target.value)}
+              autoComplete="off"
+              required
+            />
+            <button type="button" className="ghost-button" onClick={onToggleSecret}>
+              {showSecret ? "Hide" : "Show"}
+            </button>
+          </div>
+        </label>
+
+        <label className="checkbox-row">
+          <input
+            type="checkbox"
+            checked={form.forcePathStyle}
+            onChange={event => onFormChange("forcePathStyle", event.target.checked)}
+          />
+          Force path style
+        </label>
+
+        <div className="form-actions">
+          <button type="submit" className="primary-button">
+            {isEditingExisting ? "Update Profile" : "Save Profile"}
+          </button>
+          <button
+            type="button"
+            className="secondary-button"
+            onClick={onTestConnection}
+            disabled={testingConnection}
+          >
+            {testingConnection ? "Testing..." : "Test Connection"}
+          </button>
+        </div>
+      </form>
+
+      {statusMessage && <p className="status-ok">{statusMessage}</p>}
+      {statusError && <p className="status-error">{statusError}</p>}
+    </aside>
+  );
+}

package/src/frontend.tsx

@@ -0,0 +1,26 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const elem = document.getElementById("root")!;
+const app = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+if (import.meta.hot) {
+  // With hot module reloading, `import.meta.hot.data` is persisted.
+  const root = (import.meta.hot.data.root ??= createRoot(elem));
+  root.render(app);
+} else {
+  // The hot module reloading API is not available in production.
+  createRoot(elem).render(app);
+}