Update UI styles and switch import type in admin panels

fuel/app/classes/controller/widgets.php

@@ -240,9 +240,8 @@ public function get_preview_widget($inst_id, $is_embedded = false)
 	/**
 	 * Pass a zip file with the qset(s) and all the assets associated with it to the client
 	 * @param string $inst_id The instance id of the widget to export
-	 * @param bool $get_all_qsets (optional) Whether to get all qsets or just one
-	 * @param string $qset_id (optional) The qset id to export
 	 * @param string $asset (optional) The asset type to export. Can be either 'all', 'qset', or 'media'
+	 * @param string $timestamp (optional) The timestamp of the qset to export
 	 */
 	public function get_export(string $inst_id, string $asset = 'all', string $timestamp = '')
 	{
@@ -274,7 +273,8 @@ public function get_export(string $inst_id, string $asset = 'all', string $times
 
 		if ($asset == 'all')
 		{
-			$zip->addFromString('qset.json', json_encode($qset));
+			$inst->qset = $qset;
+			$zip->addFromString('instance.json', json_encode($inst));
 		}
 
 		$bytes = 0;

src/components/hooks/useExportType.jsx

@@ -23,7 +23,7 @@ export default function useExportType() {
 			onSuccess: (data) => {
                 const a = document.createElement('a')
                 a.href = URL.createObjectURL(new Blob([JSON.stringify(data)], {type: 'application/json'}))
-                a.download = 'instance.json'
+                a.download = `${data.clean_name}.json`
                 a.click()
 			},
             onError: (error, variables) => {
@@ -54,10 +54,10 @@ export default function useExportType() {
                     const apiEndpoint = asset_type === 'all' ? `/widgets/export/${inst_id}/all/${timestamp}`
                     : `/widgets/export/${inst_id}/media/${timestamp}`;
 
-                    const a = document.createElement('a');
-                    a.href = apiEndpoint;
-                    a.download = `${asset_type}.zip`;
-                    a.click();
+                    const a = document.createElement('a')
+                    a.href = apiEndpoint
+                    a.download = 'export.zip'
+                    a.click()
                 } catch (error) {
                     onError(error);
                 }

src/components/hooks/useImportInstance.jsx

@@ -1,18 +1,62 @@
-import { useMutation } from 'react-query'
+import { useMutation, useQueryClient } from 'react-query'
 import { apiImportInstance } from '../../util/api'
 
 export default function useImportInstance() {
+    const queryClient = useQueryClient()
+
     const importInstanceMutation = useMutation(
         apiImportInstance,
         {
-            onSuccess: (inst, variables) => {
-                if (inst.type === 'error') {
+			onMutate: async inst => {
+				await queryClient.cancelQueries('widgets', { exact: true, active: true, })
+				const previousValue = queryClient.getQueryData('widgets')
+
+				// dummy data that's appended to the query cache as an optimistic update
+				// this will be replaced with actual data returned from the API
+				const newInst = {
+					id: 'tmp',
+					widget: {
+						name: inst.widgetName,
+						dir: inst.dir
+					},
+					name: inst.title,
+					is_draft: false,
+					is_fake: true
+				}
+
+				// setQueryClient must treat the query cache as immutable!!!
+				// previous will contain the cached value, the function argument creates a new object from previous
+				queryClient.setQueryData('widgets', (previous) => ({
+					...previous,
+					pages: previous.pages.map((page, index) => {
+						if (index == 0) return { ...page, pagination: [ newInst, ...page.pagination] }
+						else return page
+					}),
+					modified: Math.floor(Date.now() / 1000)
+				}))
+
+				return { previousValue }
+			},
+            onSuccess: (data, variables) => {
+                if (data.type === 'error') {
                     // remove this when API error handling PR is merged
-                    variables.errorFunc(inst)
+                    variables.errorFunc(data)
                     return
                 }
+				// update the query cache, which previously contained a dummy instance, with the real instance info
+				queryClient.setQueryData('widgets', (previous) => ({
+					...previous,
+					pages: previous.pages.map((page, index) => {
+						if (index == 0) return { ...page, pagination: page.pagination.map((inst) => {
+							if (inst.id == 'tmp') inst = data
+							return inst
+						}) }
+						else return page
+					}),
+					modified: Math.floor(Date.now() / 1000)
+				}))
                 console.log(variables)
-                variables.successFunc(inst)
+                variables.successFunc(data)
             },
             onError: (err, variables, context) => {
                 variables.errorFunc(err)
@@ -21,7 +65,7 @@ export default function useImportInstance() {
         }
     )
 
-    const importInstance = async (inst_id, onSuccess, onError) => {
+    const importInstance = async (onSuccess, onError) => {
         try {
             const input = document.createElement('input')
             input.type = 'file'
@@ -35,9 +79,7 @@ export default function useImportInstance() {
                         widget_id: instance.widget.id,
                         name: instance.name,
                         qset: instance.qset,
-                        is_draft: true
-                    },
-                    {
+                        is_draft: true,
                         successFunc: onSuccess,
                         errorFunc: onError
                     })

src/components/my-widgets-page.scss

@@ -303,6 +303,9 @@
 				width: 100%;
 				bottom: 0;
 				text-align: center;
+				background-color: #fafafa;
+				height: 54px;
+				box-sizing: border-box;
 
 				p {
 					font-weight: bold;
@@ -426,7 +429,7 @@
 					left: -105px;
 					top: 0;
 					background-color:#fff;
-					width: 105px;
+					width: 120px;
 					gap: 10px;
 					box-shadow:1px 3px 10px #dbdbdb;
 					border-radius: 4px;
@@ -959,6 +962,30 @@
 				}
 			}
 		}
+
+		#embed_dialog {
+			position: absolute;
+			top: -50%;
+			left: 50%;
+			margin: -250px -387px;
+			width: 675px;
+			height: 535px;
+			z-index: 2;
+			box-shadow: 0px 0px 1000px #000, 0px 0px 10px #000;
+			opacity: 0;
+			transition: all 0.3s ease;
+			background: #fff;
+			overflow-x: hidden;
+
+			&.show {
+				opacity: 1;
+				box-shadow: none;
+				text-align: left;
+				top: 50%;
+				width: 800px;
+				z-index: 10;
+			}
+		}
 	}
 
 	.hide {

src/components/my-widgets-selected-instance.jsx

@@ -241,7 +241,7 @@ const MyWidgetSelectedInstance = ({
 		exportType(type, inst.id, onExportFailure)
 	}
 
-	const importClickHandler = () => {
+	const importQsetClickHandler = () => {
 		importQset(inst.id, onImportSuccess, onImportFailure)
 	}
 
@@ -447,7 +447,7 @@ const MyWidgetSelectedInstance = ({
 								<polyline points='10 10 90 50 10 90' fill='none' stroke='black' strokeWidth='5px'/>
 							</svg>
 							<div className={`sub-menu ${showImportOptions ? 'show' : ''}`}>
-								<div onClick={() => importClickHandler()}>
+								<div onClick={() => importQsetClickHandler()}>
 									Import Qset
 								</div>
 							</div>

src/components/my-widgets-side-bar.jsx

@@ -27,16 +27,16 @@ const MyWidgetsSideBar = ({ instances, isFetching, selectedId, onClick, beardMod
 	const handleSearchCloseClick = () => setSearchText('')
 
 	const onClickImport = () => {
-		importInstance(selectedId, onImportSuccess, onImportFailure)
+		importInstance(onImportSuccess, onImportFailure)
 	}
 
 	const onImportSuccess = (inst) => {
-		toast('success', 'Widget imported successfully')
-		onClick(inst.id)
+		toast('Widget imported successfully', 'success')
+		onClick(inst, 0)
 	}
 
 	const onImportFailure = (err) => {
-		toast('error', 'Widget import failed')
+		toast('Widget import failed', 'error')
 	}
 
 	let widgetInstanceElementsRender = null

src/components/support-selected-instance.jsx

@@ -97,7 +97,7 @@ const SupportSelectedInstance = ({inst, currentUser, embed = false}) => {
 	}
 
 	const exportClickHandler = () => {
-		exportType('qset', updatedInst.id, onExportFailure)
+		exportType('instance', updatedInst.id, onExportFailure)
 	}
 
 	const onExportFailure = (err) => {
@@ -291,7 +291,7 @@ const SupportSelectedInstance = ({inst, currentUser, embed = false}) => {
 				</button>
 				<button className='action_button'
 					onClick={() => exportClickHandler()}>
-						<span>Export Qset</span>
+						<span>Export Instance</span>
 					</button>
 				<button className='action_button delete'
 					onClick={() => updatedInst.is_deleted ? onUndelete(updatedInst.id) : onDelete(updatedInst.id)}>