@upstash/react-redis-browser 0.2.14-rc.7 → 0.2.14-rc.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +18 -4
  2. package/dist/index.d.mts +9 -1
  3. package/dist/index.d.ts +9 -1
  4. package/dist/index.js +133 -96
  5. package/dist/index.mjs +256 -219
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1185,6 +1185,9 @@
1185
1185
  .ups-db .max-w-32 {
1186
1186
  max-width: 8rem;
1187
1187
  }
1188
+ .ups-db .max-w-4xl {
1189
+ max-width: 56rem;
1190
+ }
1188
1191
  .ups-db .max-w-\[370px\] {
1189
1192
  max-width: 370px;
1190
1193
  }
@@ -1639,6 +1642,10 @@
1639
1642
  --tw-bg-opacity: 1;
1640
1643
  background-color: rgb(var(--color-emerald-500) / var(--tw-bg-opacity));
1641
1644
  }
1645
+ .ups-db .bg-emerald-600 {
1646
+ --tw-bg-opacity: 1;
1647
+ background-color: rgb(var(--color-emerald-600) / var(--tw-bg-opacity));
1648
+ }
1642
1649
  .ups-db .bg-emerald-800 {
1643
1650
  --tw-bg-opacity: 1;
1644
1651
  background-color: rgb(var(--color-emerald-800) / var(--tw-bg-opacity));
@@ -1847,6 +1854,9 @@
1847
1854
  padding-top: 5px;
1848
1855
  padding-bottom: 5px;
1849
1856
  }
1857
+ .ups-db .pb-1\.5 {
1858
+ padding-bottom: 0.375rem;
1859
+ }
1850
1860
  .ups-db .pb-5 {
1851
1861
  padding-bottom: 1.25rem;
1852
1862
  }
@@ -2452,6 +2462,10 @@
2452
2462
  --tw-bg-opacity: 1;
2453
2463
  background-color: rgb(var(--color-emerald-600) / var(--tw-bg-opacity));
2454
2464
  }
2465
+ .ups-db .hover\:bg-emerald-700:hover {
2466
+ --tw-bg-opacity: 1;
2467
+ background-color: rgb(var(--color-emerald-700) / var(--tw-bg-opacity));
2468
+ }
2455
2469
  .ups-db .hover\:bg-red-500\/90:hover {
2456
2470
  background-color: rgb(var(--color-red-500) / 0.9);
2457
2471
  }
@@ -2476,10 +2490,6 @@
2476
2490
  --tw-bg-opacity: 1;
2477
2491
  background-color: rgb(var(--color-zinc-50) / var(--tw-bg-opacity));
2478
2492
  }
2479
- .ups-db .hover\:bg-zinc-800:hover {
2480
- --tw-bg-opacity: 1;
2481
- background-color: rgb(var(--color-zinc-800) / var(--tw-bg-opacity));
2482
- }
2483
2493
  .ups-db .hover\:text-red-500:hover {
2484
2494
  --tw-text-opacity: 1;
2485
2495
  color: rgb(var(--color-red-500) / var(--tw-text-opacity));
@@ -2809,6 +2819,10 @@
2809
2819
  --tw-bg-opacity: 1;
2810
2820
  background-color: rgb(var(--color-zinc-200) / var(--tw-bg-opacity));
2811
2821
  }
2822
+ .ups-db .dark\:bg-zinc-300:is(.dark *) {
2823
+ --tw-bg-opacity: 1;
2824
+ background-color: rgb(var(--color-zinc-300) / var(--tw-bg-opacity));
2825
+ }
2812
2826
  .ups-db .dark\:text-red-400:is(.dark *) {
2813
2827
  --tw-text-opacity: 1;
2814
2828
  color: rgb(var(--color-red-400) / var(--tw-text-opacity));
package/dist/index.d.mts CHANGED
@@ -21,7 +21,7 @@ type RedisBrowserStorage = {
21
21
  get: () => string | null;
22
22
  };
23
23
  type TabType = "keys" | "search" | "all";
24
- declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
24
+ declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, allowSearch, }: RedisCredentials & {
25
25
  /**
26
26
  * Whether to disable telemetry.
27
27
  *
@@ -76,6 +76,14 @@ declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTe
76
76
  * ```
77
77
  */
78
78
  theme?: DarkModeOption;
79
+ /**
80
+ * Whether to allow picking the "Search Index" type filter in keys search.
81
+ *
82
+ * This option is temporary
83
+ *
84
+ * @default true
85
+ */
86
+ allowSearch?: boolean;
79
87
  }) => react_jsx_runtime.JSX.Element;
80
88
 
81
89
  export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };
package/dist/index.d.ts CHANGED
@@ -21,7 +21,7 @@ type RedisBrowserStorage = {
21
21
  get: () => string | null;
22
22
  };
23
23
  type TabType = "keys" | "search" | "all";
24
- declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, }: RedisCredentials & {
24
+ declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTelemetry, onFullScreenClick, theme, allowSearch, }: RedisCredentials & {
25
25
  /**
26
26
  * Whether to disable telemetry.
27
27
  *
@@ -76,6 +76,14 @@ declare const RedisBrowser: ({ url, token, hideTabs, tabType, storage, disableTe
76
76
  * ```
77
77
  */
78
78
  theme?: DarkModeOption;
79
+ /**
80
+ * Whether to allow picking the "Search Index" type filter in keys search.
81
+ *
82
+ * This option is temporary
83
+ *
84
+ * @default true
85
+ */
86
+ allowSearch?: boolean;
79
87
  }) => react_jsx_runtime.JSX.Element;
80
88
 
81
89
  export { type DarkModeOption, RedisBrowser, type RedisBrowserStorage };
package/dist/index.js CHANGED
@@ -3368,10 +3368,14 @@ function Toaster() {
3368
3368
  // src/components/databrowser/hooks/use-fetch-search-indexes.tsx
3369
3369
 
3370
3370
  var FETCH_SEARCH_INDEXES_QUERY_KEY = "fetch-search-indexes";
3371
- var useFetchSearchIndexes = (match) => {
3371
+ var useFetchSearchIndexes = ({
3372
+ match,
3373
+ enabled
3374
+ } = {}) => {
3372
3375
  const { redisNoPipeline: redis } = useRedis();
3373
3376
  return _reactquery.useQuery.call(void 0, {
3374
3377
  queryKey: [FETCH_SEARCH_INDEXES_QUERY_KEY],
3378
+ enabled: _nullishCoalesce(enabled, () => ( true)),
3375
3379
  queryFn: async () => {
3376
3380
  let cursor = "0";
3377
3381
  const finalResult = [];
@@ -3434,7 +3438,8 @@ var SCAN_COUNTS = [100, 300, 500];
3434
3438
  var KeysProvider = ({ children }) => {
3435
3439
  const { active, search, valuesSearch, isValuesSearchSelected } = useTab();
3436
3440
  const { data: searchIndexDetails, isLoading: isIndexDetailsLoading } = useFetchSearchIndex(
3437
- valuesSearch.index
3441
+ valuesSearch.index,
3442
+ { enabled: isValuesSearchSelected }
3438
3443
  );
3439
3444
  const { redisNoPipeline: redis } = useRedis();
3440
3445
  const parsedValueQuery = parseJSObjectLiteral(valuesSearch.query);
@@ -6968,7 +6973,7 @@ var EditorDisplay = ({ dataKey, type }) => {
6968
6973
  const { data } = useFetchSimpleKey(dataKey, type);
6969
6974
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full w-full flex-col gap-2", children: [
6970
6975
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DisplayHeader, { dataKey, type, content: _nullishCoalesce(data, () => ( void 0)) }),
6971
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md bg-zinc-100", children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey) })
6976
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full grow flex-col gap-2 rounded-md", children: data === void 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spinner, { isLoadingText: "", isLoading: true }) : data === null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplayForm, { dataKey, type, data }, dataKey) })
6972
6977
  ] });
6973
6978
  };
6974
6979
  var EditorDisplayForm = ({
@@ -7015,7 +7020,7 @@ var DataDisplay = () => {
7015
7020
  const { selectedKey } = useTab();
7016
7021
  const { query } = useKeys();
7017
7022
  const type = useKeyType(selectedKey);
7018
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl bg-zinc-100 p-5", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-zinc-500", children: [
7023
+ return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-xl bg-zinc-100 p-5 dark:bg-zinc-200", children: !selectedKey ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !type ? query.isLoading ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-zinc-500", children: "Loading..." }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}) : !DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-zinc-500", children: [
7019
7024
  "Unrecognized key type: ",
7020
7025
  type
7021
7026
  ] }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: SIMPLE_DATA_TYPES.includes(type) ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, EditorDisplay, { dataKey: selectedKey, type }) : type === "search" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchDisplay, { indexName: selectedKey }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ListDisplay, { dataKey: selectedKey, type }) }) });
@@ -7186,7 +7191,7 @@ var EditIndexModal = ({
7186
7191
  ] }) });
7187
7192
  };
7188
7193
 
7189
- // src/components/databrowser/components/sidebar/search-input.tsx
7194
+ // src/components/databrowser/components/header/search-input.tsx
7190
7195
 
7191
7196
 
7192
7197
 
@@ -7311,11 +7316,15 @@ var SearchInput = () => {
7311
7316
  ] });
7312
7317
  };
7313
7318
 
7314
- // src/components/databrowser/components/sidebar/type-selector.tsx
7319
+ // src/components/databrowser/components/header/type-selector.tsx
7315
7320
 
7316
7321
  var ALL_TYPES_KEY = "all";
7317
- function DataTypeSelector() {
7322
+ function DataTypeSelector({ allowSearch }) {
7318
7323
  const { search, setSearchType } = useTab();
7324
+ const entries = [
7325
+ [ALL_TYPES_KEY, "All Types"],
7326
+ ...Object.entries(DATA_TYPE_NAMES).filter(([key]) => allowSearch || key !== "search")
7327
+ ];
7319
7328
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
7320
7329
  Select,
7321
7330
  {
@@ -7329,13 +7338,7 @@ function DataTypeSelector() {
7329
7338
  value: search.type === void 0 ? ALL_TYPES_KEY : search.type,
7330
7339
  children: [
7331
7340
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectTrigger, { className: "!w-auto shrink-0 select-none whitespace-nowrap border-zinc-300 pr-8", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectValue, {}) }),
7332
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: (() => {
7333
- const entries = [
7334
- [ALL_TYPES_KEY, "All Types"],
7335
- ...Object.entries(DATA_TYPE_NAMES)
7336
- ];
7337
- return entries.map(([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key));
7338
- })() }) })
7341
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectContent, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectGroup, { children: entries.map(([key, value]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SelectItem, { value: key, children: value }, key)) }) })
7339
7342
  ]
7340
7343
  }
7341
7344
  );
@@ -7343,7 +7346,7 @@ function DataTypeSelector() {
7343
7346
 
7344
7347
  // src/components/databrowser/components/header/index.tsx
7345
7348
 
7346
- var Header = ({ tabType }) => {
7349
+ var Header = ({ tabType, allowSearch }) => {
7347
7350
  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
7348
7351
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between gap-1.5", children: [
7349
7352
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex grow items-center gap-1.5", children: [
@@ -7373,7 +7376,7 @@ var Header = ({ tabType }) => {
7373
7376
  }
7374
7377
  ),
7375
7378
  isValuesSearchSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, IndexSelector, {}) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
7376
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, {}),
7379
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DataTypeSelector, { allowSearch }),
7377
7380
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchInput, {})
7378
7381
  ] })
7379
7382
  ] }),
@@ -7388,8 +7391,14 @@ var IndexSelector = () => {
7388
7391
  valuesSearch: { index },
7389
7392
  setValuesSearchIndex
7390
7393
  } = useTab();
7391
- const { data: indexes } = useFetchSearchIndexes();
7394
+ const { data: indexes, isLoading } = useFetchSearchIndexes();
7392
7395
  const [open, setOpen] = _react.useState.call(void 0, false);
7396
+ _react.useEffect.call(void 0, () => {
7397
+ if (!indexes || isLoading) return;
7398
+ if (index && !indexes.includes(index)) {
7399
+ setValuesSearchIndex("");
7400
+ }
7401
+ }, [indexes, index, isLoading, setValuesSearchIndex]);
7393
7402
  const [search, setSearch] = _react.useState.call(void 0, "");
7394
7403
  const [editingIndex, setEditingIndex] = _react.useState.call(void 0, null);
7395
7404
  const filteredIndexes = _optionalChain([indexes, 'optionalAccess', _84 => _84.filter, 'call', _85 => _85((idx) => idx.toLowerCase().includes(search.toLowerCase()))]);
@@ -7559,6 +7568,9 @@ var HeaderError = () => {
7559
7568
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-red-600 dark:text-red-400", children: formatUpstashErrorMessage(query.error) });
7560
7569
  };
7561
7570
 
7571
+ // src/components/databrowser/components/query-builder.tsx
7572
+
7573
+
7562
7574
  // src/components/databrowser/components/search/query-editor.tsx
7563
7575
 
7564
7576
 
@@ -8191,17 +8203,32 @@ var QueryBuilder = () => {
8191
8203
  const { valuesSearch, setValuesSearchQuery } = useTab();
8192
8204
  const { data: indexDetails } = useFetchSearchIndex(valuesSearch.index);
8193
8205
  const editorValue = PREFIX + (valuesSearch.query || "{}");
8194
- return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full rounded-lg border border-zinc-300 bg-white px-[6px]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8195
- QueryEditor,
8196
- {
8197
- value: editorValue,
8198
- onChange: (value) => {
8199
- const queryPart = value.slice(PREFIX.length);
8200
- setValuesSearchQuery(queryPart);
8201
- },
8202
- schema: indexDetails
8203
- }
8204
- ) });
8206
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col rounded-lg border border-zinc-300 bg-white px-[6px]", children: [
8207
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8208
+ QueryEditor,
8209
+ {
8210
+ value: editorValue,
8211
+ onChange: (value) => {
8212
+ const queryPart = value.slice(PREFIX.length);
8213
+ setValuesSearchQuery(queryPart);
8214
+ },
8215
+ schema: indexDetails
8216
+ }
8217
+ ) }),
8218
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-end px-2 pb-1.5", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
8219
+ "a",
8220
+ {
8221
+ href: "https://upstash-search.mintlify.app/redis/search/query-operators/boolean-operators/overview",
8222
+ target: "_blank",
8223
+ rel: "noopener noreferrer",
8224
+ className: "flex items-center gap-1 text-xs text-zinc-400 transition-colors hover:text-zinc-600",
8225
+ children: [
8226
+ "Docs",
8227
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconExternalLink, { size: 12 })
8228
+ ]
8229
+ }
8230
+ ) })
8231
+ ] });
8205
8232
  };
8206
8233
 
8207
8234
  // src/components/databrowser/components/search-empty-state.tsx
@@ -8456,63 +8483,61 @@ var ImportSampleDatasetModal = ({
8456
8483
 
8457
8484
  var SearchEmptyState = () => {
8458
8485
  const [importModalOpen, setImportModalOpen] = _react.useState.call(void 0, false);
8459
- return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-1 justify-center", children: [
8460
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex gap-8 rounded-xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-8", children: [
8461
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
8462
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "mb-2 text-lg font-semibold text-zinc-900", children: "Redis Search" }),
8463
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-6 max-w-md text-sm leading-relaxed text-zinc-600", children: "Redis Search allows you to create indexes on your existing keys and perform fast, full-text searches across your data." }),
8464
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
8465
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-xs font-medium uppercase tracking-wider text-zinc-400", children: "How it works" }),
8466
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2.5", children: [
8467
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8468
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDatabase, { size: 16 }) }),
8469
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8470
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Store your data" }),
8471
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Add documents as JSON, Hash, or String keys (string content must be valid JSON)." })
8472
- ] })
8473
- ] }),
8474
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8475
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCode, { size: 16 }) }),
8476
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8477
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Create an index" }),
8478
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Define a search index specifying which fields to search on." })
8479
- ] })
8480
- ] }),
8481
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8482
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 16 }) }),
8483
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8484
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Search your data" }),
8485
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Query with filters, full-text search, and sorted results." })
8486
- ] })
8486
+ return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mx-auto flex h-full max-w-4xl gap-8 rounded-xl border border-zinc-200 bg-gradient-to-b from-zinc-50 to-white p-8", children: [
8487
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImportSampleDatasetModal, { open: importModalOpen, onOpenChange: setImportModalOpen }),
8488
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
8489
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "mb-2 text-lg font-semibold text-zinc-900", children: "Redis Search" }),
8490
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-6 max-w-md text-sm leading-relaxed text-zinc-600", children: "Redis Search allows you to create indexes on your existing keys and perform fast, full-text searches across your data." }),
8491
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
8492
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-xs font-medium uppercase tracking-wider text-zinc-400", children: "How it works" }),
8493
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2.5", children: [
8494
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8495
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDatabase, { size: 16 }) }),
8496
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8497
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Store your data" }),
8498
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Add documents as JSON, Hash, or String keys (string content must be valid JSON)." })
8499
+ ] })
8500
+ ] }),
8501
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8502
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconCode, { size: 16 }) }),
8503
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8504
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Create an index" }),
8505
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Define a search index specifying which fields to search on." })
8506
+ ] })
8507
+ ] }),
8508
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
8509
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSearch, { size: 16 }) }),
8510
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
8511
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "text-sm font-medium text-zinc-900", children: "Search your data" }),
8512
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-zinc-500", children: "Query with filters, full-text search, and sorted results." })
8487
8513
  ] })
8488
8514
  ] })
8489
- ] }),
8490
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8491
- "a",
8492
- {
8493
- href: "https://upstash-search.mintlify.app/redis/search/introduction",
8494
- target: "_blank",
8495
- rel: "noopener noreferrer",
8496
- className: "mt-5 inline-block text-sm text-emerald-600 underline-offset-2 hover:underline",
8497
- children: "Learn more \u2192"
8498
- }
8499
- )
8515
+ ] })
8500
8516
  ] }),
8501
- /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-72 flex-col items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-white p-6", children: [
8502
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-zinc-100 text-zinc-500", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconDownload, { size: 24 }) }),
8503
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "mb-1 text-sm font-medium text-zinc-900", children: "Get started quickly" }),
8504
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-4 text-center text-xs text-zinc-500", children: "Import a sample dataset to try out Redis Search" }),
8505
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8506
- "button",
8507
- {
8508
- onClick: () => setImportModalOpen(true),
8509
- className: "rounded-lg bg-zinc-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-zinc-800",
8510
- children: "Import a sample dataset"
8511
- }
8512
- )
8513
- ] })
8517
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8518
+ "a",
8519
+ {
8520
+ href: "https://upstash-search.mintlify.app/redis/search/introduction",
8521
+ target: "_blank",
8522
+ rel: "noopener noreferrer",
8523
+ className: "mt-5 inline-block text-sm text-emerald-600 underline-offset-2 hover:underline",
8524
+ children: "Learn more \u2192"
8525
+ }
8526
+ )
8514
8527
  ] }),
8515
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ImportSampleDatasetModal, { open: importModalOpen, onOpenChange: setImportModalOpen })
8528
+ /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex w-72 flex-col items-center justify-center rounded-lg border bg-gradient-to-b from-zinc-50 to-white p-6 shadow-sm", children: [
8529
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconSparkles, { size: 24 }) }),
8530
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "mb-1 text-sm font-medium text-zinc-900", children: "Try it out" }),
8531
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "mb-4 text-center text-xs text-zinc-500", children: "Load a sample dataset to explore Redis Search" }),
8532
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
8533
+ "button",
8534
+ {
8535
+ onClick: () => setImportModalOpen(true),
8536
+ className: "rounded-lg bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-emerald-700",
8537
+ children: "Load sample data"
8538
+ }
8539
+ )
8540
+ ] })
8516
8541
  ] });
8517
8542
  };
8518
8543
 
@@ -8645,7 +8670,7 @@ var KeysList = () => {
8645
8670
  lastClickedIndexRef
8646
8671
  }
8647
8672
  ),
8648
- i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-[13px] h-px bg-zinc-200 dark:bg-zinc-200" })
8673
+ i !== keys.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "-z-10 mx-[13px] h-px bg-zinc-200 dark:bg-zinc-300" })
8649
8674
  ] }, data[0]))
8650
8675
  ] }) });
8651
8676
  };
@@ -8727,7 +8752,7 @@ function Sidebar() {
8727
8752
  {
8728
8753
  query,
8729
8754
  disableRoundedInherit: true,
8730
- className: "min-h-0 rounded-xl bg-zinc-100 px-2 py-5 pr-4",
8755
+ className: "min-h-0 rounded-xl bg-zinc-100 px-2 py-5 pr-4 dark:bg-zinc-200",
8731
8756
  scrollBarClassName: "py-5",
8732
8757
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, KeysList, {})
8733
8758
  }
@@ -10099,7 +10124,8 @@ var InnerGroup = ({
10099
10124
  "button",
10100
10125
  {
10101
10126
  type: "button",
10102
- className: "flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-zinc-700",
10127
+ disabled: fieldInfos.length === 0,
10128
+ className: "flex h-[26px] w-[26px] items-center justify-center rounded-md border border-zinc-300 text-zinc-500 transition-colors hover:text-zinc-700 disabled:cursor-not-allowed disabled:opacity-50",
10103
10129
  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _iconsreact.IconPlus, { size: 16 })
10104
10130
  }
10105
10131
  ) }),
@@ -10551,12 +10577,7 @@ var QueryBuilderContent = () => {
10551
10577
  ] });
10552
10578
  };
10553
10579
  var SearchContent = () => {
10554
- const { valuesSearch, setValuesSearchIndex } = useTab();
10555
10580
  const { data: indexes, isLoading } = useFetchSearchIndexes();
10556
- _react.useEffect.call(void 0, () => {
10557
- if (!indexes || isLoading) return;
10558
- if (valuesSearch.index && !indexes.includes(valuesSearch.index)) setValuesSearchIndex("");
10559
- }, [indexes, valuesSearch.index, isLoading, setValuesSearchIndex]);
10560
10581
  if (isLoading) {
10561
10582
  return null;
10562
10583
  }
@@ -10566,10 +10587,13 @@ var SearchContent = () => {
10566
10587
  };
10567
10588
  var DatabrowserInstance = ({
10568
10589
  hidden,
10569
- tabType
10590
+ tabType,
10591
+ allowSearch
10570
10592
  }) => {
10571
10593
  const { isValuesSearchSelected, setIsValuesSearchSelected } = useTab();
10572
- const { data: indexes, isLoading } = useFetchSearchIndexes();
10594
+ const { data: indexes, isLoading } = useFetchSearchIndexes({
10595
+ enabled: tabType === "search"
10596
+ });
10573
10597
  _react.useEffect.call(void 0, () => {
10574
10598
  if (tabType === "keys" && isValuesSearchSelected) {
10575
10599
  setIsValuesSearchSelected(false);
@@ -10587,7 +10611,7 @@ var DatabrowserInstance = ({
10587
10611
  ),
10588
10612
  children: [
10589
10613
  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3 py-5", children: [
10590
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, { tabType }),
10614
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Header, { tabType, allowSearch }),
10591
10615
  isValuesSearchSelected && !showEmptyState && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SearchContent, {}),
10592
10616
  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, HeaderError, {})
10593
10617
  ] }),
@@ -11159,7 +11183,8 @@ var RedisBrowser = ({
11159
11183
  storage,
11160
11184
  disableTelemetry,
11161
11185
  onFullScreenClick,
11162
- theme = "light"
11186
+ theme = "light",
11187
+ allowSearch = false
11163
11188
  }) => {
11164
11189
  const credentials = _react.useMemo.call(void 0, () => ({ token, url }), [token, url]);
11165
11190
  const rootRef = _react.useRef.call(void 0, null);
@@ -11169,6 +11194,7 @@ var RedisBrowser = ({
11169
11194
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RedisProvider, { redisCredentials: credentials, telemetry: !disableTelemetry, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DarkModeProvider, { theme, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserProvider, { storage, rootRef, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reacttooltip.TooltipProvider, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
11170
11195
  RedisBrowserRoot,
11171
11196
  {
11197
+ allowSearch,
11172
11198
  hideTabs,
11173
11199
  tabType,
11174
11200
  rootRef,
@@ -11179,6 +11205,7 @@ var RedisBrowser = ({
11179
11205
  var RedisBrowserRoot = ({
11180
11206
  hideTabs,
11181
11207
  tabType,
11208
+ allowSearch,
11182
11209
  rootRef,
11183
11210
  onFullScreenClick
11184
11211
  }) => {
@@ -11197,20 +11224,30 @@ var RedisBrowserRoot = ({
11197
11224
  ref: rootRef,
11198
11225
  children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full flex-col overflow-hidden rounded-[14px] border-[4px] border-zinc-300 text-zinc-700", children: [
11199
11226
  !hideTabs && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserTabs, { onFullScreenClick }),
11200
- /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, { tabType })
11227
+ /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstances, { tabType, allowSearch })
11201
11228
  ] })
11202
11229
  }
11203
11230
  )
11204
11231
  );
11205
11232
  };
11206
- var DatabrowserInstances = ({ tabType }) => {
11233
+ var DatabrowserInstances = ({
11234
+ tabType,
11235
+ allowSearch
11236
+ }) => {
11207
11237
  const { tabs, selectedTab, selectTab, addTab } = useDatabrowserStore();
11208
11238
  _react.useEffect.call(void 0, () => {
11209
11239
  if (tabs.length === 0) addTab();
11210
11240
  else if (!selectedTab) selectTab(tabs[0][0]);
11211
11241
  }, [tabs, selectedTab, addTab, selectTab]);
11212
11242
  if (!selectedTab) return;
11213
- return tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DatabrowserInstance, { hidden: id !== selectedTab, tabType }) }, id));
11243
+ return tabs.map(([id]) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabIdProvider, { value: id, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
11244
+ DatabrowserInstance,
11245
+ {
11246
+ hidden: id !== selectedTab,
11247
+ tabType,
11248
+ allowSearch
11249
+ }
11250
+ ) }, id));
11214
11251
  };
11215
11252
 
11216
11253