Create advanced view switch

Feature #14365

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/views-components/sharing-dialog/advanced-view-switch.tsx b/src/views-components/sharing-dialog/advanced-view-switch.tsx
new file mode 100644 (file)
index 0000000..0d9e143
--- /dev/null
+++ b/src/views-components/sharing-dialog/advanced-view-switch.tsx
@@ -0,0 +1,25 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+
+export interface AdvancedViewSwitchInjectedProps {
+    toggleAdvancedView: () => void;
+    advancedViewOpen: boolean;
+}
+
+export const connectAdvancedViewSwitch = (Component: React.ComponentType<AdvancedViewSwitchInjectedProps>) =>
+    class extends React.Component<{}, { advancedViewOpen: boolean }> {
+
+        state = { advancedViewOpen: false };
+
+        toggleAdvancedView = () => {
+            this.setState(({ advancedViewOpen }) => ({ advancedViewOpen: !advancedViewOpen }));
+        }
+
+        render() {
+            return <Component {...this.state} {...this} />;
+        }
+    };
+    
\ No newline at end of file

diff --git a/src/views-components/sharing-dialog/sharing-dialog-component.tsx b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
index a303cbfb7799beb84d9fc47a855dcc3db675b05f..1392e001404f539c82f1405ea298c6819a4f05f2 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-component.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-component.tsx
@@ -10,6 +10,7 @@ import { DialogActions } from '~/components/dialog-actions/dialog-actions';
 export interface SharingDialogDataProps {
     open: boolean;
     saveEnabled: boolean;
+    advancedEnabled: boolean;
     children: React.ReactNode;
 }
 export interface SharingDialogActionProps {
@@ -18,7 +19,7 @@ export interface SharingDialogActionProps {
     onAdvanced: () => void;
 }
 export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
-    const { children, open, saveEnabled, onAdvanced, onClose, onSave } = props;
+    const { children, open, advancedEnabled, saveEnabled, onAdvanced, onClose, onSave } = props;
     return <Dialog
         {...{ open, onClose }}
         fullWidth
@@ -31,13 +32,15 @@ export default (props: SharingDialogDataProps & SharingDialogActionProps) => {
         </DialogContent>
         <DialogActions>
             <Grid container spacing={8}>
-                <Grid item>
-                    <Button
-                        color='primary'
-                        onClick={onAdvanced}>
-                        Advanced
+                {advancedEnabled &&
+                    <Grid item>
+                        <Button
+                            color='primary'
+                            onClick={onAdvanced}>
+                            Advanced
                     </Button>
-                </Grid>
+                    </Grid>
+                }
                 <Grid item xs />
                 <Grid item>
                     <Button onClick={onClose}>

diff --git a/src/views-components/sharing-dialog/sharing-dialog-content.tsx b/src/views-components/sharing-dialog/sharing-dialog-content.tsx
index 619f247854a47ec9bf139ec35cce0474f9edfd00..b74306b8ad3479eec66bc8fd3aeb2862a79b9448 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog-content.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog-content.tsx
@@ -8,11 +8,15 @@ import { SharingInvitationForm } from './sharing-invitation-form';
 import { SharingManagementForm } from './sharing-management-form';
 import { Grid } from '@material-ui/core';
 
-export const SharingDialogContent = () =>
+export const SharingDialogContent = (props: { advancedViewOpen: boolean }) =>
     <Grid container direction='column' spacing={24}>
-        <Grid item>
-            <SharingManagementForm />
-        </Grid>
+        {props.advancedViewOpen &&
+            <>
+                <Grid item>
+                    <SharingManagementForm />
+                </Grid>
+            </>
+        }
         <Grid item>
             <SharingInvitationForm />
         </Grid>

diff --git a/src/views-components/sharing-dialog/sharing-dialog.tsx b/src/views-components/sharing-dialog/sharing-dialog.tsx
index 407db31ea80d04b587f4d7176a445e71f8687909..06514d4913c8a458c62dfb42018042683b8108c9 100644 (file)
--- a/src/views-components/sharing-dialog/sharing-dialog.tsx
+++ b/src/views-components/sharing-dialog/sharing-dialog.tsx
@@ -12,21 +12,25 @@ import { RootState } from '~/store/store';
 
 import SharingDialogComponent, { SharingDialogDataProps, SharingDialogActionProps } from './sharing-dialog-component';
 import { SharingDialogContent } from './sharing-dialog-content';
+import { connectAdvancedViewSwitch, AdvancedViewSwitchInjectedProps } from './advanced-view-switch';
 
-const mapStateToProps = (_: RootState, props: WithDialogProps<string>): SharingDialogDataProps => ({
+const mapStateToProps = (_: RootState, { advancedViewOpen, ...props }: WithDialogProps<string> & AdvancedViewSwitchInjectedProps): SharingDialogDataProps => ({
     ...props,
     saveEnabled: false,
-    children: <SharingDialogContent />,
+    advancedEnabled: !advancedViewOpen,
+    children: <SharingDialogContent {...{ advancedViewOpen }} />,
 });
 
-const mapDispatchToProps = (_: Dispatch, props: WithDialogProps<string>): SharingDialogActionProps => ({
+const mapDispatchToProps = (_: Dispatch, { toggleAdvancedView, ...props }: WithDialogProps<string> & AdvancedViewSwitchInjectedProps): SharingDialogActionProps => ({
     ...props,
     onClose: props.closeDialog,
     onSave: () => { console.log('save'); },
-    onAdvanced: () => { console.log('advanced'); },
+    onAdvanced: toggleAdvancedView,
 });
 
 export const SharingDialog = compose(
+    connectAdvancedViewSwitch,
     connectSharingDialog,
     connect(mapStateToProps, mapDispatchToProps)
 )(SharingDialogComponent);
+