Added a basic theme install API call in AdminX settings

refs https://github.com/TryGhost/Team/issues/3432

ghost/admin-x-settings/src/components/settings/site/ThemeModal.tsx

@@ -63,7 +63,22 @@ const ThemeToolbar: React.FC<ThemeToolbarProps> = ({
                             {icon: 'mobile', iconColorClass: 'text-grey-500', link: true, size: 'sm'}
                         ]}
                     />
-                    <Button color='green' label={`Install ${selectedTheme?.name}`} />
+                    <Button
+                        color='green'
+                        label={`Install ${selectedTheme?.name}`}
+                        onClick={async () => {
+                            const data = await api.themes.install(selectedTheme.ref);
+                            const installedTheme = data.themes[0];
+                            setThemes([
+                                ...themes.map(theme => ({...theme, active: false})),
+                                installedTheme
+                            ]);
+                            showToast({
+                                message: `Theme installed - ${installedTheme.name}`
+                            });
+                            setCurrentTab('installed');
+                        }}
+                    />
                 </div>
             </div>
         );
@@ -174,4 +189,4 @@ const ChangeThemeModal = NiceModal.create(() => {
     );
 });
 
-export default ChangeThemeModal;
+export default ChangeThemeModal;

ghost/admin-x-settings/src/utils/api.ts

@@ -168,6 +168,7 @@ export interface API {
         browse: () => Promise<ThemesResponseType>;
         activate: (themeName: string) => Promise<ThemesResponseType>;
         delete: (themeName: string) => Promise<void>;
+        install: (repo: string) => Promise<ThemesResponseType>;
         upload: ({file}: {file: File}) => Promise<ThemesResponseType>;
     };
 }
@@ -416,6 +417,13 @@ function setupGhostApi({ghostVersion}: GhostApiOptions): API {
                 });
                 return;
             },
+            install: async (repo) => {
+                const response = await fetcher(`/themes/install/?source=github&ref=${encodeURIComponent(repo)}`, {
+                    method: 'POST'
+                });
+                const data: ThemesResponseType = await response.json();
+                return data;
+            },
             upload: async ({file}: {file: File}) => {
                 const formData = new FormData();
                 formData.append('file', file);