Merge branch 'rename-handler' of https://github.com/boxyhq/ui into re…

…name-handler
boxyhq · Aug 21, 2023 · f96f15f · f96f15f
2 parents 927ae26 + be83de5
commit f96f15f
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 46 deletions.
diff --git a/overrides/react/src/shared/types.ts b/overrides/react/src/shared/types.ts
@@ -5,7 +5,7 @@ export type SVGProps = SVGAttributes<SVGSVGElement>;
 export interface IconButtonProps {
   Icon: (props: { svgElmtProps: SVGProps; classNames: string }) => JSX.Element;
   label?: string;
-  onClick: (event: any) => void;
+  handleClick: (event: any) => void;
   iconClasses: string;
 }
 
@@ -55,7 +55,7 @@ export interface ToggleSwitchProps {
   label: string;
   checked: boolean;
   disabled: boolean;
-  onChange: (event: Event) => void;
+  handleChange: (event: Event) => void;
 }
 
 export interface CardProps {

diff --git a/overrides/vue/vue3/src/shared/types.ts b/overrides/vue/vue3/src/shared/types.ts
@@ -5,7 +5,7 @@ export type SVGProps = SVGAttributes;
 export interface IconButtonProps {
   Icon: Component<{ svgElmtProps: SVGProps; classNames: string }>;
   label?: string;
-  onClick: (event: any) => void;
+  handleClick: (event: any) => void;
   iconClasses: string;
 }
 
@@ -55,7 +55,7 @@ export interface ToggleSwitchProps {
   label: string;
   checked: boolean;
   disabled: boolean;
-  onChange: (event: Event) => void;
+  handleChange: (event: Event) => void;
 }
 
 export interface CardProps {

diff --git a/src/shared/IconButton/index.lite.tsx b/src/shared/IconButton/index.lite.tsx
@@ -14,7 +14,7 @@ export default function IconButton(props: IconButtonProps) {
   return (
     <button
       type='button'
-      onClick={(event) => props.onClick(event)}
+      onClick={(event) => props.handleClick(event)}
       class={styles.btn}
       aria-label={props.label}>
       <props.Icon svgElmtProps={{ 'aria-hidden': true }} classNames={state.classes.iconClasses} />

diff --git a/src/shared/ToggleSwitch/index.lite.tsx b/src/shared/ToggleSwitch/index.lite.tsx
@@ -8,7 +8,7 @@ export default function ToggleSwitch(props: ToggleSwitchProps) {
       <input
         type='checkbox'
         class={`${styles.input} ${styles['sr-only']}`}
-        onChange={(event) => props.onChange(event)}
+        onChange={(event) => props.handleChange(event)}
         checked={props.checked}
         disabled={props.disabled}
       />

diff --git a/src/shared/types.ts b/src/shared/types.ts
@@ -5,7 +5,7 @@ export type SVGProps = JSX.SvgSVGAttributes<SVGSVGElement>;
 export interface IconButtonProps {
   Icon: (props: { svgElmtProps: SVGProps; classNames: string }) => JSX.Element;
   label?: string;
-  onClick: (event: any) => void;
+  handleClick: (event: any) => void;
   iconClasses: string;
 }
 
@@ -55,7 +55,7 @@ export interface ToggleSwitchProps {
   label: string;
   checked: boolean;
   disabled: boolean;
-  onChange: (event: Event) => void;
+  handleChange: (event: Event) => void;
 }
 
 export interface CardProps {

diff --git a/src/sso/connections/ConnectionList/index.lite.tsx b/src/sso/connections/ConnectionList/index.lite.tsx
@@ -38,6 +38,9 @@ export default function ConnectionList(props: ConnectionListProps) {
         icon: cssClassAssembler(props.classNames?.icon, defaultClasses.icon),
       };
     },
+    switchToEditView(connection: any) {
+      return () => props.onActionClick(connection);
+    },
     connectionDisplayName(connection: SAMLSSORecord | OIDCSSORecord) {
       if (connection.name) {
         return connection.name;
@@ -173,7 +176,7 @@ export default function ConnectionList(props: ConnectionListProps) {
                               Icon={PencilIcon}
                               iconClasses={state.classes.icon}
                               data-testid='edit'
-                              onClick={(event) => props.onActionClick(connection)}
+                              handleClick={() => state.switchToEditView(connection)}
                             />
                           </span>
                         </td>

diff --git a/src/sso/connections/ConnectionsWrapper/index.lite.tsx b/src/sso/connections/ConnectionsWrapper/index.lite.tsx
@@ -1,4 +1,4 @@
-import { Show, useStore } from '@builder.io/mitosis';
+import { Show, onMount, useStore } from '@builder.io/mitosis';
 import ConnectionList from '../ConnectionList/index.lite';
 import type { ConnectionData, ConnectionsWrapperProp, OIDCSSORecord, SAMLSSORecord } from '../types';
 import cssClassAssembler from '../../utils/cssClassAssembler';
@@ -37,6 +37,9 @@ export default function ConnectionsWrapper(props: ConnectionsWrapperProp) {
         button: cssClassAssembler(props.classNames?.button, defaultClasses.button),
       };
     },
+    switchToCreateView() {
+      state.view = 'CREATE';
+    },
     switchToEditView(connection: ConnectionData<any>) {
       state.view = 'EDIT';
       state.connectionToEdit = connection;
@@ -64,7 +67,7 @@ export default function ConnectionsWrapper(props: ConnectionsWrapperProp) {
                     linkText='Access SP Metadata'
                     variant='button'></Anchor>
                 </Show>
-                <Button name='Add Connection' handleClick={(event) => (state.view = 'CREATE')} />
+                <Button name='Add Connection' handleClick={state.switchToCreateView} />
               </div>
             </Card>
             <Spacer y={4} />
@@ -82,7 +85,7 @@ export default function ConnectionsWrapper(props: ConnectionsWrapperProp) {
                     linkText='Access SP Metadata'
                     variant='button'></Anchor>
                 </Show>
-                <Button name='Add Connection' handleClick={(event) => (state.view = 'CREATE')} />
+                <Button name='Add Connection' handleClick={state.switchToCreateView} />
               </div>
             </Card>
           </ConnectionList>

diff --git a/src/sso/connections/CreateConnection/saml/index.lite.tsx b/src/sso/connections/CreateConnection/saml/index.lite.tsx
@@ -271,12 +271,7 @@ export default function CreateSAMLConnection(props: CreateConnectionProps) {
         {/* TODO: bring translation support */}
         <div class={defaultClasses.formAction}>
           <Show when={typeof props.cancelCallback === 'function'}>
-            <Button
-              type='button'
-              name='Cancel'
-              handleClick={(event) => props.cancelCallback?.()}
-              variant='outline'
-            />
+            <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
           </Show>
           <Button type='submit' name='Save' />
         </div>

diff --git a/src/sso/connections/EditConnection/oidc/index.lite.tsx b/src/sso/connections/EditConnection/oidc/index.lite.tsx
@@ -467,7 +467,7 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
                     <Button
                       type='button'
                       name='Cancel'
-                      handleClick={(event) => props.cancelCallback?.()}
+                      handleClick={props.cancelCallback}
                       variant='outline'
                     />
                   </Show>
@@ -484,11 +484,7 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
                   </p>
                 </div>
                 <Show when={!state.displayDeletionConfirmation}>
-                  <Button
-                    variant='destructive'
-                    name='Delete'
-                    handleClick={(event) => state.askForConfirmation()}
-                  />
+                  <Button variant='destructive' name='Delete' handleClick={state.askForConfirmation} />
                 </Show>
                 <Show when={state.displayDeletionConfirmation}>
                   <div class={defaultClasses.confirmationDiv}>
@@ -502,7 +498,7 @@ export default function EditOIDCConnection(props: EditOIDCConnectionProps) {
                         name='Confirm'
                         handleClick={(event) => state.deleteSSOConnection(event)}
                       />
-                      <Button variant='outline' name='Cancel' handleClick={(event) => state.onCancel()} />
+                      <Button variant='outline' name='Cancel' handleClick={state.onCancel} />
                     </div>
                   </div>
                 </Show>

diff --git a/src/sso/connections/EditConnection/saml/index.lite.tsx b/src/sso/connections/EditConnection/saml/index.lite.tsx
@@ -159,7 +159,7 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
           />
         </div>
         <div>
-          <form onSubmit={(event) => state.saveSSOConnection(event)} method='post'>
+          <form onSubmit={state.saveSSOConnection} method='post'>
             <Show when={state.formVariant === 'advanced'}>
               <Show when={!state.isExcluded('name')}>
                 <div class={defaultClasses.field}>
@@ -389,12 +389,7 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
             <Spacer y={4} />
             <div class={defaultClasses.formAction}>
               <Show when={typeof props.cancelCallback === 'function'}>
-                <Button
-                  type='button'
-                  name='Cancel'
-                  handleClick={(event) => props.cancelCallback?.()}
-                  variant='outline'
-                />
+                <Button type='button' name='Cancel' handleClick={props.cancelCallback} variant='outline' />
               </Show>
               <Button type='submit' name='Save' />
             </div>
@@ -407,11 +402,7 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
                   </p>
                 </div>
                 <Show when={!state.displayDeletionConfirmation}>
-                  <Button
-                    variant='destructive'
-                    name='Delete'
-                    handleClick={(event) => state.askForConfirmation()}
-                  />
+                  <Button variant='destructive' name='Delete' handleClick={state.askForConfirmation} />
                 </Show>
                 <Show when={state.displayDeletionConfirmation}>
                   <div class={defaultClasses.confirmationDiv}>
@@ -420,12 +411,8 @@ export default function EditSAMLConnection(props: EditSAMLConnectionProps) {
                       permanently delete the Connection.
                     </p>
                     <div class={defaultClasses.promptAction}>
-                      <Button
-                        variant='destructive'
-                        name='Confirm'
-                        handleClick={(event) => state.deleteSSOConnection(event)}
-                      />
-                      <Button variant='outline' name='Cancel' handleClick={(event) => state.onCancel()} />
+                      <Button variant='destructive' name='Confirm' handleClick={state.deleteSSOConnection} />
+                      <Button variant='outline' name='Cancel' handleClick={state.onCancel} />
                     </div>
                   </div>
                 </Show>

diff --git a/src/sso/connections/ToggleConnectionStatus/index.lite.tsx b/src/sso/connections/ToggleConnectionStatus/index.lite.tsx
@@ -92,16 +92,16 @@ export default function ToggleConnectionStatus(props: ToggleConnectionStatusProp
               <Button
                 variant={props.connection.deactivated ? 'primary' : 'destructive'}
                 name='Confirm'
-                handleClick={(event) => state.onConfirm()}></Button>
+                handleClick={state.onConfirm}></Button>
               <Spacer x={1.5} />
-              <Button name='Cancel' variant='outline' handleClick={(event) => state.onCancel()}></Button>
+              <Button name='Cancel' variant='outline' handleClick={state.onCancel}></Button>
             </div>
           </div>
         </Show>
         <Show when={!state.displayPrompt}>
           <ToggleSwitch
             label={state.connectionStatus}
-            onChange={(event) => state.askForConfirmation()}
+            handleChange={state.askForConfirmation}
             checked={!props.connection.deactivated}
             disabled={state.displayPrompt}
           />