@plutonhq/core-frontend 0.1.23 → 0.1.25

package/src/components/Settings/IntegrationSettings/IntegrationSettings.module.scss

@@ -36,3 +36,19 @@
       }
    }
 }
+
+@media only screen and (max-width: 768px) {
+   .integrations {
+      .field {
+         width: 100%;
+      }
+   }
+   .integrationSelect {
+      width: 100%;
+      margin-bottom: 30px;
+
+      :global([class*='_dropdown_']) {
+         width: 100%;
+      }
+   }
+}

package/src/components/Settings/IntegrationSettings/IntegrationSettings.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import classes from './IntegrationSettings.module.scss';
-import Input from '../../common/form/Input/Input';
-import ActionModal from '../../common/ActionModal/ActionModal';
-import { useValidateIntegration } from '../../../services/settings';
 import SMTPSettings from './SMTPSettings';
+import NtfySettings from './NtfySettings';
+import Icon from '../../common/Icon/Icon';
+import Select from '../../common/form/Select/Select';
+import { isMobile } from '../../../utils';
 
 interface IntegrationSettingsProps {
    settingsID: number;
@@ -12,12 +13,9 @@ interface IntegrationSettingsProps {
 }
 
 const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSettingsProps) => {
-   const [testEmail, setTestEmail] = useState('');
-   const [showEmailTestModal, setShowEmailTestModal] = useState<'' | 'smtp'>('');
+   const [tab, setTab] = useState<'smtp' | 'ntfy'>('smtp');
    const integrationSettings = settings?.integration || {};
-   const { smtp } = integrationSettings || {};
-
-   const validationMutation = useValidateIntegration();
+   const { smtp, ntfy } = integrationSettings || {};
 
    const onIntegrationUpdate = (key: string, intSettings: Record<string, any>) => {
       console.log('onIntegrationUpdate :', key, intSettings);
@@ -26,42 +24,47 @@ const IntegrationSettings = ({ settingsID, settings, onUpdate }: IntegrationSett
 
    return (
       <div className={classes.integrations}>
-         <div>
-            <SMTPSettings
-               settings={smtp}
-               onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
-               showTestModal={(type) => setShowEmailTestModal(type)}
-            />
-         </div>
-         {showEmailTestModal && (
-            <ActionModal
-               title={`Test SMTP Integration`}
-               message={
-                  <>
-                     <Input
-                        label="Send Test Email to this email"
-                        full={true}
-                        fieldValue={testEmail}
-                        onUpdate={(val) => setTestEmail(val)}
-                        type="email"
-                        placeholder="test@test.com"
-                     />
-                  </>
-               }
-               errorMessage={validationMutation.error?.message}
-               successMessage={validationMutation.isSuccess ? 'Test email sent. Integration validated successfully.' : ''}
-               closeModal={() => setShowEmailTestModal('')}
-               width="400px"
-               secondaryAction={{ title: 'Close', action: () => setShowEmailTestModal('') }}
-               primaryAction={{
-                  title: `Send Test Email`,
-                  type: 'default',
-                  icon: 'email',
-                  isPending: validationMutation.isPending,
-                  action: () => validationMutation.mutate({ settingsID, type: 'smtp', settings: settings, test: { email: testEmail } }),
-               }}
+         {isMobile() ? (
+            <Select
+               customClasses={classes.integrationSelect}
+               options={[
+                  { label: 'SMTP', value: 'smtp', icon: 'email' },
+                  { label: 'Ntfy', value: 'ntfy', icon: 'ntfy' },
+               ]}
+               fieldValue={tab}
+               full={true}
+               onUpdate={(val) => setTab(val as 'smtp' | 'ntfy')}
             />
+         ) : (
+            <>
+               <ul className={classes.tabs}>
+                  <li className={`${tab === 'smtp' ? classes.tabActive : ''}`} onClick={() => setTab('smtp')}>
+                     <Icon type="email" size={14} /> SMTP
+                     {smtp?.connected && <Icon type="check-circle-filled" size={12} />}
+                  </li>
+                  <li className={`${tab === 'ntfy' ? classes.tabActive : ''}`} onClick={() => setTab('ntfy')}>
+                     <Icon type="ntfy" size={14} /> Ntfy
+                     {ntfy?.connected && <Icon type="check-circle-filled" size={12} />}
+                  </li>
+               </ul>
+            </>
          )}
+         <div>
+            {tab === 'smtp' && (
+               <SMTPSettings
+                  settingsID={settingsID}
+                  settings={integrationSettings}
+                  onUpdate={(iSettings) => onIntegrationUpdate('smtp', iSettings)}
+               />
+            )}
+            {tab === 'ntfy' && (
+               <NtfySettings
+                  settingsID={settingsID}
+                  settings={integrationSettings}
+                  onUpdate={(iSettings) => onIntegrationUpdate('ntfy', iSettings)}
+               />
+            )}
+         </div>
       </div>
    );
 };

package/src/components/Settings/IntegrationSettings/NtfySettings.tsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import classes from './IntegrationSettings.module.scss';
+import { IntegrationSettings, NtfySettingsType } from '../../../@types';
+import Icon from '../../common/Icon/Icon';
+import Select from '../../common/form/Select/Select';
+import Input from '../../common/form/Input/Input';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useValidateIntegration } from '../../../services';
+import PasswordField from '../../common/form/PasswordField/PasswordField';
+
+interface NtfySettingsProps {
+   settingsID: number;
+   settings: IntegrationSettings;
+   onUpdate: (settings: NtfySettingsType) => void;
+}
+
+const NtfySettings = ({ settingsID, settings, onUpdate }: NtfySettingsProps) => {
+   const [ntfySettings, setNtfySettings] = useState<NtfySettingsType>(settings?.ntfy || { authType: 'token', authToken: '', connected: false });
+   const [errorFields, setErrorFields] = useState<{ authToken: string }>({ authToken: '' });
+   const [showTestModal, setShowTestModal] = useState(false);
+   const [testUrl, setTestUrl] = useState('');
+   const validationMutation = useValidateIntegration();
+
+   const authType = ntfySettings.authType || 'token';
+
+   const updateNtfySettings = (updated: NtfySettingsType) => {
+      setNtfySettings(updated);
+      onUpdate(updated);
+   };
+
+   const validateSettings = (e: React.FormEvent) => {
+      e.preventDefault();
+
+      const newErrors = { authToken: '' };
+
+      if (!ntfySettings?.authToken) {
+         newErrors.authToken = 'Required';
+      }
+      setErrorFields(newErrors);
+      const hasErrors = Object.values(newErrors).some((error) => error !== '');
+      if (!hasErrors) {
+         setShowTestModal(true);
+      }
+   };
+
+   return (
+      <div>
+         <div className={classes.field}>
+            <Select
+               label="Auth Type*"
+               fieldValue={authType}
+               options={[{ label: 'Token', value: 'token' }]}
+               onUpdate={(val) => updateNtfySettings({ ...ntfySettings, authType: val })}
+               inline={true}
+            />
+         </div>
+         <div className={classes.field}>
+            <PasswordField
+               label="Auth Token*"
+               fieldValue={ntfySettings.authToken}
+               onUpdate={(val) => updateNtfySettings({ ...ntfySettings, authToken: val })}
+               error={errorFields?.authToken}
+            />
+         </div>
+         <div className={classes.field}>
+            <button className={classes.validateBtn} onClick={validateSettings} type="button">
+               <Icon type="check" size={10} /> {ntfySettings.connected ? 'Re-validate Ntfy' : 'Validate Ntfy'}
+            </button>
+         </div>
+         {showTestModal && (
+            <ActionModal
+               title={`Test Ntfy Integration`}
+               message={
+                  <>
+                     <Input
+                        label="Send Test Notification to this topic"
+                        full={true}
+                        inline={false}
+                        fieldValue={testUrl}
+                        onUpdate={(val) => setTestUrl(val)}
+                        type="text"
+                        placeholder="test/topic url. Eg: https://ntfy.sh/testtopic"
+                     />
+                  </>
+               }
+               errorMessage={validationMutation.error?.message}
+               successMessage={validationMutation.isSuccess ? 'Test notification sent. Integration validated successfully.' : ''}
+               closeModal={() => setShowTestModal(false)}
+               width="400px"
+               secondaryAction={{ title: 'Close', action: () => setShowTestModal(false) }}
+               primaryAction={{
+                  title: `Send Test Notification`,
+                  type: 'default',
+                  icon: 'send',
+                  isPending: validationMutation.isPending,
+                  action: () =>
+                     testUrl &&
+                     validationMutation.mutate({ settingsID, type: 'ntfy', settings: { ...settings, ntfy: ntfySettings }, test: { url: testUrl } }),
+               }}
+            />
+         )}
+      </div>
+   );
+};
+
+export default NtfySettings;

package/src/components/Settings/IntegrationSettings/SMTPSettings.tsx

@@ -3,42 +3,47 @@ import Input from '../../common/form/Input/Input';
 import Icon from '../../common/Icon/Icon';
 import { isValidEmail } from '../../../utils/helpers';
 import { SmtpSettingsType } from '../../../@types/settings';
+import { IntegrationSettings } from '../../../@types';
 import classes from './IntegrationSettings.module.scss';
+import ValidateEmailIntegration from './ValidateEmailIntegration';
 
 interface SMTPSettingsProps {
-   settings: SmtpSettingsType;
+   settingsID: number;
+   settings: IntegrationSettings;
    onUpdate: (settings: SmtpSettingsType) => void;
-   showTestModal: (type: 'smtp') => void;
 }
 
-const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps) => {
+const SMTPSettings = ({ settingsID, settings, onUpdate }: SMTPSettingsProps) => {
+   const [showTestModal, setShowTestModal] = useState(false);
    const [errorFields, setErrorFields] = useState<{ server: string; port: string; senderEmail: string }>({
       server: '',
       port: '',
       senderEmail: '',
    });
 
+   const smtpSettings = settings?.smtp || { server: '', port: 587, senderEmail: '', username: '', password: '', connected: false };
+
    const validateSettings = (e: React.FormEvent) => {
       e.preventDefault();
 
       const newErrors = { server: '', port: '', senderEmail: '' };
 
-      if (!settings?.server) {
+      if (!smtpSettings?.server) {
          newErrors.server = 'Server is required';
       }
-      if (!settings?.port) {
+      if (!smtpSettings?.port) {
          newErrors.port = 'Port is required';
       }
-      if (!settings?.senderEmail) {
+      if (!smtpSettings?.senderEmail) {
          newErrors.senderEmail = 'Sender Email is required';
-      } else if (!isValidEmail(settings.senderEmail)) {
+      } else if (!isValidEmail(smtpSettings.senderEmail)) {
          newErrors.senderEmail = 'Invalid email';
       }
 
       setErrorFields(newErrors);
       const hasErrors = Object.values(newErrors).some((error) => error !== '');
       if (!hasErrors) {
-         showTestModal('smtp');
+         setShowTestModal(true);
       }
    };
 
@@ -47,16 +52,16 @@ const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps)
          <div className={classes.field}>
             <Input
                label="SMTP Server*"
-               fieldValue={(settings?.server || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, server: val })}
+               fieldValue={(smtpSettings?.server || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, server: val })}
                error={errorFields?.server}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP PORT*"
-               fieldValue={(settings?.port || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, port: parseInt(val, 10) })}
+               fieldValue={(smtpSettings?.port || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, port: parseInt(val, 10) })}
                error={errorFields?.port}
             />
          </div>
@@ -64,32 +69,36 @@ const SMTPSettings = ({ settings, onUpdate, showTestModal }: SMTPSettingsProps)
             <Input
                label="Sender Email*"
                type="email"
-               fieldValue={(settings?.senderEmail || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, senderEmail: val })}
+               fieldValue={(smtpSettings?.senderEmail || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, senderEmail: val })}
                error={errorFields?.senderEmail}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP Username"
-               fieldValue={(settings?.username || '') as string}
-               onUpdate={(val) => onUpdate({ ...settings, username: val })}
+               fieldValue={(smtpSettings?.username || '') as string}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, username: val })}
             />
          </div>
          <div className={classes.field}>
             <Input
                label="SMTP Password"
-               fieldValue={(settings?.password || '') as string}
+               fieldValue={(smtpSettings?.password || '') as string}
                type="password"
-               onUpdate={(val) => onUpdate({ ...settings, password: val })}
+               onUpdate={(val) => onUpdate({ ...smtpSettings, password: val })}
             />
          </div>
 
          <div className={classes.field}>
             <button className={classes.validateBtn} onClick={validateSettings} type="button">
-               <Icon type="check" size={10} /> {settings?.connected ? 'Re-validate SMTP' : 'Validate SMTP'}
+               <Icon type="check" size={10} /> {smtpSettings?.connected ? 'Re-validate SMTP' : 'Validate SMTP'}
             </button>
          </div>
+
+         {showTestModal && (
+            <ValidateEmailIntegration settingsID={settingsID} settings={settings} integrationType="smtp" onClose={() => setShowTestModal(false)} />
+         )}
       </div>
    );
 };

package/src/components/Settings/IntegrationSettings/ValidateEmailIntegration.tsx

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import Input from '../../common/form/Input/Input';
+import ActionModal from '../../common/ActionModal/ActionModal';
+import { useValidateIntegration } from '../../../services';
+import { INTEGRATIONS_AVAILABLE, IntegrationSettings, IntegrationTypes } from '../../../@types';
+
+interface ValidateEmailIntegrationProps {
+   settingsID: number;
+   settings: IntegrationSettings;
+   integrationType: IntegrationTypes;
+   onClose: () => void;
+}
+
+const ValidateEmailIntegration = ({ settingsID, settings, integrationType, onClose }: ValidateEmailIntegrationProps) => {
+   const [testEmail, setTestEmail] = useState('');
+   const validationMutation = useValidateIntegration();
+   const integrationName = INTEGRATIONS_AVAILABLE[integrationType as IntegrationTypes].name;
+
+   return (
+      <ActionModal
+         title={`Test ${integrationName} Integration`}
+         message={
+            <>
+               <Input
+                  label="Send Test Email to this email"
+                  full={true}
+                  inline={false}
+                  fieldValue={testEmail}
+                  onUpdate={(val) => setTestEmail(val)}
+                  type="email"
+                  placeholder="test@test.com"
+               />
+            </>
+         }
+         errorMessage={validationMutation.error?.message}
+         successMessage={validationMutation.isSuccess ? `Test email sent. ${integrationName} validated successfully.` : ''}
+         closeModal={onClose}
+         width="400px"
+         secondaryAction={{ title: 'Close', action: onClose }}
+         primaryAction={{
+            title: 'Send Test Email',
+            type: 'default',
+            icon: 'email',
+            isPending: validationMutation.isPending,
+            action: () =>
+               testEmail &&
+               validationMutation.mutate({
+                  settingsID,
+                  type: integrationType,
+                  settings: { ...settings },
+                  test: { email: testEmail },
+               }),
+         }}
+      />
+   );
+};
+
+export default ValidateEmailIntegration;

package/src/components/Storage/EditStorage/EditStorage.tsx

@@ -39,7 +39,7 @@ const EditStorage = ({ close, storage }: EditStorageProps) => {
       storage.storageFields.forEach((field: storageOptionField) => {
          if (field.required) {
             (groupedFields.required as storageOptionField[]).push(field);
-         } else {
+         } else if (!field.authFieldType) {
             (groupedFields.optional as storageOptionField[]).push(field);
          }
       });