Merge pull request #124 from lumapps/chore/search-template-settings

Feat/DIS-1165 - Add settings to search template

Author: radiuso

.gitignore

@@ -10,3 +10,4 @@ _site
 versionBump.json
 config.trans.js
 .idea
+template-search-extension/bundle.zip

template-search-extension/src/config.js

@@ -59,10 +59,10 @@ const links = {
 /**
  * The components available for your extensions
  * 'content' : For the Widget content itself (required)
- * 'settings' : For your widget settings
+ * 'settings' : For your search settings that will be used in a Tab context
  * 'globalSettings' : For global settings used by platform admin.
  */
-const components = ['content'];
+const components = ['content', 'settings', 'global_settings'];
 
 // Whether the extension is public or not in the marketplace.
 const isPublic = true;
@@ -78,7 +78,7 @@ const whitelist = [];
 // do not change the following unless you know what you are doing
 const config = {
     availability,
-    category: 'search',
+    category: 'widget',
     components,
     description,
     extensionId,

template-search-extension/src/index.content.ts

@@ -1,6 +1,6 @@
 /**
  *  Do not modify unless you know what you are doing
  */
-import { Search } from './widget/Search';
+import { Search } from './search/Search';
 
 export { Search };

template-search-extension/src/index.global_settings.ts

@@ -0,0 +1,4 @@
+/**
+ *  Do not modify unless you know what you are doing
+ */
+export { SearchGlobalSettings } from './search/SearchGlobalSettings';

template-search-extension/src/index.settings.ts

@@ -0,0 +1,4 @@
+/**
+ *  Do not modify unless you know what you are doing
+ */
+export { SearchSettings } from './search/SearchSettings';

template-search-extension/src/index.tsx

@@ -1,18 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-
 import { Playground, store } from '@lumapps-extensions-playground/devenv';
 
 import '@lumx/core/lumx.css';
 
 import config from './config.js';
+import { SearchSettings } from './index.settings';
+import { SearchGlobalSettings } from './index.global_settings';
 
 ReactDOM.render(
     <React.StrictMode>
         <Provider store={store}>
             <Playground
-                config={config as import('lumapps-sdk-js').ExtensionConfig}
+                config={config as any}
+                SettingsComponent={SearchSettings}
+                GlobalSettingsComponent={SearchGlobalSettings}
             />
         </Provider>
     </React.StrictMode>,

template-search-extension/src/widget/Search.tsx renamed to template-search-extension/src/search/Search.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { GlobalSettingsComponent, useExportProps } from 'lumapps-sdk-js';
+import { TextField } from '@lumx/react';
+
+import { SampleSearchGlobalParams } from './types';
+import { DEFAULT_GLOBAL_SETTINGS } from './constants';
+
+type SearchGlobalSettings = GlobalSettingsComponent<SampleSearchGlobalParams>;
+
+/**
+ * Render the widget Picsum settings form.
+ *
+ * @param {Object} props The settings component properties.
+ */
+export const SearchGlobalSettings: SearchGlobalSettings = ({ properties = DEFAULT_GLOBAL_SETTINGS, exportProp }) => {
+    const [currentBaseUrl, setCurrentBaseUrl] = React.useState(properties.baseUrl || DEFAULT_GLOBAL_SETTINGS.baseUrl);
+
+    useExportProps(currentBaseUrl, 'baseUrl', properties, exportProp);
+
+    return (
+            <TextField
+                label="Base URL"
+                value={currentBaseUrl}
+                onChange={setCurrentBaseUrl}
+            />
+    );
+};

template-search-extension/src/widget/Search/useSearch.ts renamed to template-search-extension/src/search/Search/useSearch.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextField } from '@lumx/react';
+import { SettingsComponent, useExportProps } from 'lumapps-sdk-js';
+
+import { SampleSearchGlobalParams, SampleSearchParams } from './types';
+import { DEFAULT_GLOBAL_SETTINGS, DEFAULT_SETTINGS } from './constants';
+
+type SearchSettingsProps = SettingsComponent<SampleSearchGlobalParams, SampleSearchParams>;
+
+export const SearchSettings: SearchSettingsProps = ({ exportProp, properties = DEFAULT_SETTINGS, globalProperties }) => {
+    const [currentSearchId, setCurrentSearchId] = React.useState(properties.searchId || DEFAULT_SETTINGS.searchId);
+
+    useExportProps(currentSearchId, 'searchId', properties, exportProp);
+
+    return (
+            <TextField
+                label={`Search identifier for "${globalProperties?.baseUrl || DEFAULT_GLOBAL_SETTINGS.baseUrl}"`}
+                value={currentSearchId}
+                onChange={setCurrentSearchId}
+            />
+    );
+};