@strapi/admin 4.5.0-beta.0 → 4.5.1

package/admin/src/content-manager/components/RelationInputDataManager/utils/normalizeRelations.js

@@ -32,34 +32,13 @@ export const normalizeRelation = (relation, { shouldAddLink, mainFieldName, targ
 
 export const normalizeRelations = (
   relations,
-  { modifiedData = {}, shouldAddLink = false, mainFieldName, targetModel }
+  { shouldAddLink = false, mainFieldName, targetModel } = {}
 ) => {
-  return {
-    ...relations,
-    data: {
-      pages:
-        [
-          ...(relations?.data?.pages.reverse() ?? []),
-          ...(modifiedData?.connect ? [{ results: modifiedData.connect }] : []),
-        ]
-          ?.map((page) =>
-            page?.results
-              .filter(
-                (relation) =>
-                  !modifiedData?.disconnect?.find(
-                    (disconnectRelation) => disconnectRelation.id === relation.id
-                  )
-              )
-              .map((relation) =>
-                normalizeRelation(relation, {
-                  shouldAddLink,
-                  mainFieldName,
-                  targetModel,
-                })
-              )
-              .filter(Boolean)
-          )
-          ?.filter((page) => page.length > 0) ?? [],
-    },
-  };
+  return [...relations].map((relation) =>
+    normalizeRelation(relation, {
+      shouldAddLink,
+      mainFieldName,
+      targetModel,
+    })
+  );
 };

package/admin/src/content-manager/components/RelationInputDataManager/utils/normalizeSearchResults.js

@@ -1,12 +1,16 @@
 import { normalizeRelation } from './normalizeRelations';
 
 export const normalizeSearchResults = (relations, { mainFieldName }) => {
+  const { data } = relations;
+  const { pages = [] } = data ?? {};
+
   return {
     ...relations,
-    data: {
-      pages: [...(relations?.data?.pages ?? [])]?.map((page) =>
+    data: pages
+      .map((page) =>
         page?.results.map((relation) => normalizeRelation(relation, { mainFieldName }))
-      ),
-    },
+      )
+      .filter(Boolean)
+      .flat(),
   };
 };

package/admin/src/content-manager/components/RelationInputDataManager/utils/select.js

@@ -82,6 +82,7 @@ function useSelect({
 
   return {
     componentId,
+    isComponentRelation: Boolean(componentUid),
     queryInfos: {
       ...queryInfos,
       endpoints: {

package/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -48,7 +48,7 @@ const RepeatableComponent = ({
   const [collapseToOpen, setCollapseToOpen] = useState('');
   const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
-  const { getComponentLayout } = useContentTypeLayout();
+  const { getComponentLayout, components } = useContentTypeLayout();
   const componentLayoutData = useMemo(
     () => getComponentLayout(componentUid),
     [componentUid, getComponentLayout]
@@ -73,7 +73,7 @@ const RepeatableComponent = ({
       if (componentValueLength < max) {
         const shouldCheckErrors = hasMinError;
 
-        addRepeatableComponentToField(name, componentUid, shouldCheckErrors);
+        addRepeatableComponentToField(name, componentLayoutData, components, shouldCheckErrors);
 
         setCollapseToOpen(nextTempKey);
       } else if (componentValueLength >= max) {
@@ -84,8 +84,9 @@ const RepeatableComponent = ({
       }
     }
   }, [
+    components,
     addRepeatableComponentToField,
-    componentUid,
+    componentLayoutData,
     componentValueLength,
     hasMinError,
     isReadOnly,

package/admin/src/content-manager/hooks/__test__/usePrev.test.js

@@ -0,0 +1,26 @@
+import { renderHook } from '@testing-library/react-hooks';
+
+import { usePrev } from '../usePrev';
+
+describe('usePrev', () => {
+  const setup = () => renderHook(({ state }) => usePrev(state), { initialProps: { state: 0 } });
+
+  it('should return undefined on initial render', () => {
+    const { result } = setup();
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('should always return previous state after each update', () => {
+    const { result, rerender } = setup();
+
+    rerender({ state: 2 });
+    expect(result.current).toBe(0);
+
+    rerender({ state: 4 });
+    expect(result.current).toBe(2);
+
+    rerender({ state: 6 });
+    expect(result.current).toBe(4);
+  });
+});

package/admin/src/content-manager/hooks/index.js

@@ -5,3 +5,4 @@ export { default as useLayoutDnd } from './useLayoutDnd';
 export { default as usePluginsQueryParams } from './usePluginsQueryParams';
 export { default as useSyncRbac } from './useSyncRbac';
 export { default as useWysiwyg } from './useWysiwyg';
+export { usePrev } from './usePrev';

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -6,21 +6,19 @@ const getRelationModel = (targetModel, models) => models.find((model) => model.u
 const formatLayouts = (initialData, models) => {
   const data = createMetasSchema(initialData, models);
 
-  const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
-  const ctUid = data.contentType.uid;
+  const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, models);
   const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
-  Object.keys(data.components).forEach((compoUID) => {
-    const formattedCompoEditLayout = formatLayoutWithMetas(
-      data.components[compoUID],
-      ctUid,
+  Object.keys(data.components).forEach((componentUid) => {
+    const formattedComponentEditLayout = formatLayoutWithMetas(
+      data.components[componentUid],
       models
     );
 
-    set(data, ['components', compoUID, 'layouts', 'edit'], formattedCompoEditLayout);
+    set(data, ['components', componentUid, 'layouts', 'edit'], formattedComponentEditLayout);
   });
 
   return data;
@@ -73,8 +71,8 @@ const createMetasSchema = (initialData, models) => {
   return data;
 };
 
-const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
-  const formatted = contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
+const formatLayoutWithMetas = (contentTypeConfiguration, models) =>
+  contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
     const row = current.map((attribute) => {
       const fieldSchema = get(contentTypeConfiguration, ['attributes', attribute.name], {});
 
@@ -85,20 +83,17 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
       };
 
       if (fieldSchema.type === 'relation') {
-        const targetModelUID = fieldSchema.targetModel;
-        const targetModelSchema = getRelationModel(targetModelUID, models);
+        const targetModelSchema = getRelationModel(fieldSchema.targetModel, models);
         const targetModelPluginOptions = targetModelSchema.pluginOptions || {};
 
-        const queryInfos = ctUid
-          ? generateRelationQueryInfosForComponents(
-              contentTypeConfiguration,
-              attribute.name,
-              models
-            )
-          : generateRelationQueryInfos(contentTypeConfiguration, attribute.name, models);
-
         set(data, 'targetModelPluginOptions', targetModelPluginOptions);
-        set(data, 'queryInfos', queryInfos);
+        set(data, 'queryInfos', {
+          shouldDisplayRelationLink: shouldDisplayRelationLink(
+            contentTypeConfiguration,
+            attribute.name,
+            models
+          ),
+        });
       }
 
       return data;
@@ -109,9 +104,6 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
     return acc;
   }, []);
 
-  return formatted;
-};
-
 const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   const formatted = contentTypeConfiguration.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
@@ -120,11 +112,7 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
     const type = fieldSchema.type;
 
     if (type === 'relation') {
-      const queryInfos = {
-        defaultParams: {},
-      };
-
-      acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas, queryInfos });
+      acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });
 
       return acc;
     }
@@ -158,26 +146,10 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   return formatted;
 };
 
-const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models) => {
+const shouldDisplayRelationLink = (contentTypeConfiguration, fieldName, models) => {
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  return {
-    defaultParams: {},
-    shouldDisplayRelationLink,
-  };
-};
-
-const generateRelationQueryInfosForComponents = (contentTypeConfiguration, fieldName, models) => {
-  const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
-
-  return {
-    defaultParams: {
-      component: contentTypeConfiguration.uid,
-    },
-    shouldDisplayRelationLink,
-  };
+  return getDisplayedModels(models).includes(targetModel);
 };
 
 const getDisplayedModels = (models) =>
@@ -187,7 +159,6 @@ export default formatLayouts;
 export {
   formatLayoutWithMetas,
   formatListLayoutWithMetas,
-  generateRelationQueryInfos,
-  generateRelationQueryInfosForComponents,
+  shouldDisplayRelationLink,
   getDisplayedModels,
 };

package/admin/src/content-manager/hooks/usePrev.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * @type {<T>(value: T) => T | undefined}
+ */
+export const usePrev = (value) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -1,11 +1,16 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useInfiniteQuery } from 'react-query';
 
 import { axiosInstance } from '../../../core/utils';
 
-export const useRelation = (cacheKey, { relation, search }) => {
-  const [searchParams, setSearchParams] = useState({});
+import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
+export const useRelation = (cacheKey, { name, relation, search }) => {
+  const [searchParams, setSearchParams] = useState({});
+  const [currentPage, setCurrentPage] = useState(0);
+  /**
+   * This runs in `useInfiniteQuery` to actually fetch the data
+   */
   const fetchRelations = async ({ pageParam = 1 }) => {
     try {
       const { data } = await axiosInstance.get(relation?.endpoint, {
@@ -15,6 +20,8 @@ export const useRelation = (cacheKey, { relation, search }) => {
         },
       });
 
+      setCurrentPage(pageParam);
+
       return data;
     } catch (err) {
       return null;
@@ -37,12 +44,32 @@ export const useRelation = (cacheKey, { relation, search }) => {
     }
   };
 
+  const { onLoad: onLoadRelationsCallback, normalizeArguments = {} } = relation;
+
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
     cacheTime: 0,
     enabled: relation.enabled,
+    /**
+     * @type {(lastPage:
+     * | { data: null }
+     * | { results: any[],
+     *     pagination: {
+     *      page: number,
+     *      pageCount: number,
+     *      pageSize: number,
+     *      total: number
+     *     }
+     *   }
+     * ) => number}
+     */
     getNextPageParam(lastPage) {
-      // the API may send an empty 204 response
-      if (!lastPage || lastPage.pagination.page >= lastPage.pagination.pageCount) {
+      const isXToOneRelation = !lastPage?.pagination;
+
+      if (
+        !lastPage || // the API may send an empty 204 response
+        isXToOneRelation || // xToOne relations do not have a pagination
+        lastPage?.pagination.page >= lastPage?.pagination.pageCount
+      ) {
         return undefined;
       }
 
@@ -50,17 +77,83 @@ export const useRelation = (cacheKey, { relation, search }) => {
       return lastPage.pagination.page + 1;
     },
     select: (data) => ({
-      pages: data.pages.map((page) => ({ ...page, results: [...(page.results ?? [])].reverse() })),
+      ...data,
+      pages: data.pages.map((page) => {
+        if (!page) {
+          return page;
+        }
+
+        const { data, results, pagination } = page;
+        const isXToOneRelation = !!data;
+        let normalizedResults = [];
+
+        // xToOne relations return an object, which we normalize so that relations
+        // always have the same shape
+        if (isXToOneRelation) {
+          normalizedResults = [data];
+        } else if (results) {
+          normalizedResults = [...results].reverse();
+        }
+
+        return {
+          pagination,
+          results: normalizedResults,
+        };
+      }),
     }),
   });
 
+  const { pageGoal } = relation;
+
+  const { status, data, fetchNextPage, hasNextPage } = relationsRes;
+
+  useEffect(() => {
+    /**
+     * This ensures the infiniteQuery hook fetching has caught-up with the modifiedData
+     * state i.e. in circumstances where you add 10 relations, the browserState knows this,
+     * but the hook would think it could fetch more, when in reality, it can't.
+     */
+    if (pageGoal > currentPage && hasNextPage && status === 'success') {
+      fetchNextPage({
+        pageParam: currentPage + 1,
+      });
+    }
+  }, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
+
+  useEffect(() => {
+    if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
+      // everytime we fetch, we normalize prior to adding to redux
+      const normalizedResults = normalizeRelations(data.pages.at(-1).results, normalizeArguments);
+
+      // this is loadRelation from EditViewDataManagerProvider
+      onLoadRelationsCallback({
+        target: { name, value: normalizedResults },
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, onLoadRelationsCallback, name, data]);
+
   const searchRes = useInfiniteQuery(
     ['relation', cacheKey, 'search', JSON.stringify(searchParams)],
     fetchSearch,
     {
       enabled: Object.keys(searchParams).length > 0,
+      /**
+       * @type {(lastPage:
+       * | { data: null }
+       * | { results: any[],
+       *     pagination: {
+       *      page: number,
+       *      pageCount: number,
+       *      pageSize: number,
+       *      total: number
+       *     }
+       *   }
+       * ) => number}
+       */
       getNextPageParam(lastPage) {
-        if (lastPage.pagination.page >= lastPage.pagination.pageCount) {
+        if (!lastPage?.pagination || lastPage.pagination.page >= lastPage.pagination.pageCount) {
           return undefined;
         }
 

package/admin/src/content-manager/pages/App/reducer.js

@@ -14,6 +14,9 @@ const initialState = {
   singleTypeLinks: [],
 };
 
+/**
+ * Known as content-manager_app in the redux store
+ */
 const mainReducer = (state = initialState, action) =>
   produce(state, (draftState) => {
     switch (action.type) {

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -201,7 +201,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.move.field'),
                   defaultMessage: 'Move {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               onClick={(e) => e.stopPropagation()}
               ref={refs.dragRef}
@@ -223,7 +223,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.edit.field'),
                   defaultMessage: 'Edit {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               type="button"
             >
@@ -237,7 +237,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.delete.field'),
                   defaultMessage: 'Delete {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               type="button"
             >

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -16,7 +16,7 @@ const FlexGap = styled(Flex)`
 
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
-  const { settings } = modifiedData;
+  const { settings, metadatas } = modifiedData;
 
   return (
     <>
@@ -122,7 +122,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           >
             {sortOptions.map((sortBy) => (
               <Option key={sortBy} value={sortBy}>
-                {sortBy}
+                {metadatas[sortBy].list.label || sortBy}
               </Option>
             ))}
           </Select>

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -104,7 +104,7 @@ const SortDisplayedFields = ({
           >
             {listRemainingFields.map((field) => (
               <MenuItem key={field} onClick={() => handleAddField(field)}>
-                {field}
+                {metadatas[field].list.label || field}
               </MenuItem>
             ))}
           </SimpleMenu>

package/admin/src/core/apis/CustomFields.js

@@ -16,7 +16,6 @@ const ALLOWED_TYPES = [
   'string',
   'text',
   'time',
-  'timestamp',
   'uid',
 ];
 

package/admin/src/core/store/configureStore.js

@@ -1,14 +1,29 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import createReducer from './createReducer';
 
 const configureStore = (appMiddlewares, appReducers) => {
+  let composeEnhancers = compose;
+
   const middlewares = [];
 
   appMiddlewares.forEach((middleware) => {
     middlewares.push(middleware());
   });
 
-  return createStore(createReducer(appReducers), {}, applyMiddleware(...middlewares));
+  // If Redux Dev Tools  are installed, enable them
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    typeof window === 'object' &&
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  ) {
+    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
+  }
+
+  return createStore(
+    createReducer(appReducers),
+    {},
+    composeEnhancers(applyMiddleware(...middlewares))
+  );
 };
 
 export default configureStore;

package/admin/src/hooks/useFetchMarketplacePlugins/index.js

@@ -2,10 +2,10 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchMarketplacePlugins } from './utils/api';
 
-const useFetchMarketplacePlugins = (notifyLoad) => {
+const useFetchMarketplacePlugins = (notifyLoad, params) => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
+  return useQuery(['list-marketplace-plugins', params], () => fetchMarketplacePlugins(params), {
     onSuccess() {
       if (notifyLoad) {
         notifyLoad();

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -2,8 +2,10 @@ import axios from 'axios';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
-const fetchMarketplacePlugins = async () => {
-  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
+const fetchMarketplacePlugins = async (params = {}) => {
+  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
+    params,
+  });
 
   // Only keep v4 plugins
   const filteredResponse = {

package/admin/src/hooks/useFetchMarketplaceProviders/index.js

@@ -1,11 +1,11 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplacePlugins } from './utils/api';
+import { fetchMarketplaceProviders } from './utils/api';
 
-const useFetchMarketplaceProviders = (notifyLoad) => {
+const useFetchMarketplaceProviders = (notifyLoad, params) => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {
+  return useQuery(['list-marketplace-providers', params], () => fetchMarketplaceProviders(params), {
     onSuccess() {
       if (notifyLoad) {
         notifyLoad();

package/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js

@@ -2,10 +2,12 @@ import axios from 'axios';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
-const fetchMarketplacePlugins = async () => {
-  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`);
+const fetchMarketplaceProviders = async (params = {}) => {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`, {
+    params,
+  });
 
   return data;
 };
 
-export { fetchMarketplacePlugins };
+export { fetchMarketplaceProviders };

package/admin/src/index.js

@@ -9,6 +9,7 @@ import appReducers from './reducers';
 window.strapi = {
   backendURL: process.env.STRAPI_ADMIN_BACKEND_URL,
   isEE: false,
+  telemetryDisabled: process.env.STRAPI_TELEMETRY_DISABLED ?? false,
   features: {
     SSO: 'sso',
   },

package/admin/src/pages/App/index.js

@@ -91,7 +91,7 @@ function App() {
           try {
             const deviceId = await getUID();
 
-            fetch('https://analytics.strapi.io/track', {
+            await fetch('https://analytics.strapi.io/track', {
               method: 'POST',
               body: JSON.stringify({
                 event: 'didInitializeAdministration',

package/admin/src/pages/HomePage/assets/corner-ornament.svg

@@ -0,0 +1,48 @@
+<svg width="148" height="148" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g opacity=".8" fill-rule="evenodd" clip-rule="evenodd">
+        <path opacity=".15" d="M110.81 37H73.97V74.1h36.84V37Z" fill="url(#a)"/>
+        <path opacity=".07" d="M36.84 0H0v37.08h36.84V0Z" fill="url(#b)"/>
+        <path opacity=".07" d="M73.92 73.95H37.08v37.08h36.84V73.95Z" fill="url(#c)"/>
+        <path opacity=".07" d="M147.99 110.92h-37.3V148H148v-37.08Z" fill="url(#d)"/>
+        <path opacity=".15" d="M73.83 37H36.84L73.83 0v37Z" fill="url(#e)"/>
+        <path opacity=".15" d="M110.6 111.02v-37h36.98l-36.99 37Z" fill="url(#f)"/>
+        <path opacity=".4" d="M73.83 0v37h36.98v37.01h37V3a3 3 0 0 0-3-3H73.82Z" fill="url(#g)"/>
+    </g>
+    
+    <defs>
+        <linearGradient id="a" x1="91.31" y1="83.31" x2="118.24" y2="56.59" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="b" x1="40.99" y1="13.88" x2=".01" y2="11.64" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="c" x1="54.41" y1="120.25" x2="81.35" y2="93.52" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="d" x1="128.24" y1="157.22" x2="155.17" y2="130.17" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#A8B8FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="e" x1="54.24" y1="46.21" x2="81.12" y2="19.38" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="f" x1="126.28" y1="74.05" x2="124.94" y2="111.07" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3253EA"/>
+        </linearGradient>
+        
+        <linearGradient id="g" x1="73.37" y1="36.87" x2="132.87" y2="66.74" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7A92FF"/>
+            <stop offset="1" stop-color="#3858EA"/>
+        </linearGradient>
+    </defs>
+</svg>