From b40aa45cf53447808e115ea54fba8200e7256aaa Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Fri, 5 Nov 2021 11:34:53 +0100
Subject: [PATCH] init search in ML CM

---
 .../AssetDialog/BrowseStep/index.js           | 60 ++++++++++++-------
 .../MediaLibraryInput/AssetDialog/index.js    |  4 +-
 .../src/components/MediaLibraryInput/index.js | 20 +++----
 .../useModalAssets/useModalQueryParams.js     | 13 ++++
 4 files changed, 66 insertions(+), 31 deletions(-)

diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js
index 4f1331d12c..c91925863a 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/BrowseStep/index.js
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
 import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
+import { Searchbar, SearchForm } from '@strapi/design-system/Searchbar';
 import { AssetList } from '../../../AssetList';
 import getTrad from '../../../../utils/getTrad';
 import PaginationFooter from './PaginationFooter';
@@ -14,10 +15,12 @@ export const BrowseStep = ({
   assets,
   onChangePage,
   onChangePageSize,
+  onChangeSearch,
   onChangeSort,
   onEditAsset,
   onSelectAllAsset,
   onSelectAsset,
+  onSubmitSearch,
   pagination,
   queryObject,
   selectedAssets,
@@ -28,26 +31,39 @@ export const BrowseStep = ({
     <>
       <Stack size={4}>
         {onSelectAllAsset && (
-          <Stack horizontal size={2}>
-            <Flex
-              paddingLeft={2}
-              paddingRight={2}
-              background="neutral0"
-              hasRadius
-              borderColor="neutral200"
-              height={`${32 / 16}rem`}
-            >
-              <BaseCheckbox
-                aria-label={formatMessage({
-                  id: getTrad('bulk.select.label'),
-                  defaultMessage: 'Select all assets',
-                })}
-                value={assets?.length > 0 && selectedAssets.length === assets?.length}
-                onChange={onSelectAllAsset}
-              />
-            </Flex>
-            <SortPicker onChangeSort={onChangeSort} />
-          </Stack>
+          <Flex justifyContent="space-between">
+            <Stack horizontal size={2}>
+              <Flex
+                paddingLeft={2}
+                paddingRight={2}
+                background="neutral0"
+                hasRadius
+                borderColor="neutral200"
+                height={`${32 / 16}rem`}
+              >
+                <BaseCheckbox
+                  aria-label={formatMessage({
+                    id: getTrad('bulk.select.label'),
+                    defaultMessage: 'Select all assets',
+                  })}
+                  value={assets?.length > 0 && selectedAssets.length === assets?.length}
+                  onChange={onSelectAllAsset}
+                />
+              </Flex>
+              <SortPicker onChangeSort={onChangeSort} />
+            </Stack>
+            <SearchForm onSubmit={onSubmitSearch}>
+              <Searchbar
+                name="searchbar"
+                onClear={() => {}}
+                onChange={onChangeSearch}
+                clearLabel="Clearing the asset search"
+                size="S"
+              >
+                Searching for an asset
+              </Searchbar>
+            </SearchForm>
+          </Flex>
         )}
 
         <AssetList
@@ -71,7 +87,9 @@ export const BrowseStep = ({
 };
 
 BrowseStep.defaultProps = {
+  onChangeSearch: undefined,
   onSelectAllAsset: undefined,
+  onSubmitSearch: undefined,
 };
 
 BrowseStep.propTypes = {
@@ -79,9 +97,11 @@ BrowseStep.propTypes = {
   onChangePage: PropTypes.func.isRequired,
   onChangePageSize: PropTypes.func.isRequired,
   onChangeSort: PropTypes.func.isRequired,
+  onChangeSearch: PropTypes.func,
   onEditAsset: PropTypes.func.isRequired,
   onSelectAsset: PropTypes.func.isRequired,
   onSelectAllAsset: PropTypes.func,
+  onSubmitSearch: PropTypes.func,
   queryObject: PropTypes.shape({
     page: PropTypes.number.isRequired,
     pageSize: PropTypes.number.isRequired,
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js
index bcf768806d..cab894d9c0 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/AssetDialog/index.js
@@ -31,7 +31,7 @@ export const AssetDialog = ({
   const { canRead, canCreate, isLoading: isLoadingPermissions } = useMediaLibraryPermissions();
   const [
     { rawQuery, queryObject },
-    { onChangePage, onChangePageSize, onChangeSort },
+    { onChangePage, onChangePageSize, onChangeSort, onChangeSearch, onSubmitSearch },
   ] = useModalQueryParams();
   const { data, isLoading, error } = useModalAssets({ skipWhen: !canRead, rawQuery });
 
@@ -166,6 +166,8 @@ export const AssetDialog = ({
                 onChangePage={onChangePage}
                 onChangePageSize={onChangePageSize}
                 onChangeSort={onChangeSort}
+                onChangeSearch={onChangeSearch}
+                onSubmitSearch={onSubmitSearch}
               />
             </ModalBody>
           </TabPanel>
diff --git a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js
index 55c3484b23..b2a9d6b6e6 100644
--- a/packages/core/upload/admin/src/components/MediaLibraryInput/index.js
+++ b/packages/core/upload/admin/src/components/MediaLibraryInput/index.js
@@ -145,16 +145,16 @@ export const MediaLibraryInput = ({
         selectedAssetIndex={selectedIndex}
       />
 
-      {step === Steps.SelectAsset && (
-        <AssetDialog
-          initiallySelectedAssets={initiallySelectedAssets}
-          onClose={() => setStep(undefined)}
-          onValidate={handleValidation}
-          multiple={multiple}
-          onAddAsset={() => setStep(Steps.UploadAsset)}
-          uploadedFiles={uploadedFiles}
-        />
-      )}
+      {/* {step === Steps.SelectAsset && ( */}
+      <AssetDialog
+        initiallySelectedAssets={initiallySelectedAssets}
+        onClose={() => setStep(undefined)}
+        onValidate={handleValidation}
+        multiple={multiple}
+        onAddAsset={() => setStep(Steps.UploadAsset)}
+        uploadedFiles={uploadedFiles}
+      />
+      {/* )} */}
 
       {step === Steps.UploadAsset && (
         <UploadAssetDialog
diff --git a/packages/core/upload/admin/src/hooks/useModalAssets/useModalQueryParams.js b/packages/core/upload/admin/src/hooks/useModalAssets/useModalQueryParams.js
index 902f89b02f..26e768abde 100644
--- a/packages/core/upload/admin/src/hooks/useModalAssets/useModalQueryParams.js
+++ b/packages/core/upload/admin/src/hooks/useModalAssets/useModalQueryParams.js
@@ -21,12 +21,25 @@ const useModalQueryParams = () => {
     setQueryObject(prev => ({ ...prev, sort }));
   };
 
+  const handleChangeSearch = () => {
+    console.log('change search');
+  };
+
+  const handleSubmitSearch = e => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    console.log('submit search');
+  };
+
   return [
     { queryObject, rawQuery: stringify(queryObject, { encode: false }) },
     {
       onChangePage: handeChangePage,
       onChangePageSize: handleChangePageSize,
       onChangeSort: handleChangeSort,
+      onChangeSearch: handleChangeSearch,
+      onSubmitSearch: handleSubmitSearch,
     },
   ];
 };