feat: add code snippets to your files teams folders (#2817)

* feat: add code snippets to your files teams folders

* feat: add built js

Author: niross

dataworkspace/dataworkspace/apps/core/utils.py

@@ -1489,7 +1489,14 @@ def get_user_s3_prefixes(user):
 
 
 def get_team_prefixes(user):
-    return [f'teams/{x["schema_name"]}/' for x in get_team_schemas_for_user(user)]
+    return [
+        {
+            "name": x["name"],
+            "env_var": f"S3_PREFIX_TEAM_{clean_db_identifier(x['name']).upper()}",
+            "prefix": f'teams/{x["schema_name"]}/',
+        }
+        for x in get_team_schemas_for_user(user)
+    ]
 
 
 def update_user_tool_access_policy(user, access_point_id):

dataworkspace/dataworkspace/static/js/bundles/yourfiles.2e3320d0c45a8054b2c0.js

@@ -8,6 +8,7 @@ import { getBreadcrumbs, getFolderName } from "./utils";
 import { AddFolderPopup, UploadFilesPopup } from "./popups";
 import { DeleteObjectsPopup } from "./popups/DeleteObjects";
 import { ErrorModal } from "./popups/ErrorModal";
+import { TeamsPrefixMessage } from "./TeamsPrefixMessage";
 
 const popupTypes = {
   ADD_FOLDER: "addFolder",
@@ -251,8 +252,8 @@ export default class App extends React.Component {
 
       const teamsFolders =
         params.Prefix === rootPrefix
-          ? this.props.config.teamsPrefixes.map((prefix) => ({
-              Prefix: prefix,
+          ? this.props.config.teamsPrefixes.map((team) => ({
+              Prefix: team.prefix,
               isSharedFolder: true,
               isSelected: false,
             }))
@@ -501,6 +502,11 @@ export default class App extends React.Component {
               bucketName={this.state.bucketName}
             />
           ) : null}
+          {this.state.currentPrefix.startsWith("teams/") ?
+            <TeamsPrefixMessage
+              team={this.props.config.teamsPrefixes.find(t => this.state.currentPrefix.startsWith(t.prefix))}
+              bucketName={this.state.bucketName}
+            /> : null}
         </div>
       </div>
     );

dataworkspace/dataworkspace/static/js/bundles/yourfiles.70fed0402f7640f5dcc1.js

@@ -0,0 +1,49 @@
+import React from "react";
+export function TeamsPrefixMessage({ team, bucketName }) {
+  const relativePath = team.prefix.replace(/^teams/, '');
+  return (
+    <div className="govuk-inset-text">
+      <p className="govuk-body">
+        Files in the <code>{relativePath}</code> folder are not
+        automatically accessible from your tools in the same way other files
+        are. However, they can be manually accessed. For example, after
+        uploading a file <code>{relativePath}file.csv</code>, you can
+        create a Pandas DataFrame in a JupyterLab Python notebook by running the
+        following code.
+      </p>
+      <code>
+        <pre>
+          {`import os
+import pandas as pd 
+import boto3 
+
+client = boto3.client('s3', region_name='eu-west-2') 
+response = client.get_object(
+    Bucket='${bucketName}', 
+    Key=os.environ['${team.env_var}'] + 'file.csv' ) 
+df = pd.read_csv(response['Body'])
+  `}
+        </pre>
+      </code>
+      <p className="govuk-body govuk-!-margin-top-2">
+        You can also create a tibble from this file in R by running the
+        following code.
+      </p>
+
+      <code>
+        <pre>{`library("aws.s3")
+library("readr")
+filename <- "file.csv"
+conn = s3connection(paste(c(
+    "s3://${bucketName}/",
+    Sys.getenv("${team.env_var}"), filename), 
+    collapse=""
+))
+
+tb = read_csv(conn)
+close(conn)
+        `}</pre>
+      </code>
+    </div>
+  )
+}

dataworkspace/dataworkspace/static/js/bundles/yourfiles.bfc1dceee24b64203abb.js

@@ -1,46 +1,20 @@
 {
   "status": "done",
   "assets": {
-    "builder.58dd439c3a0d51aa7543.js.LICENSE.txt": {
-      "name": "builder.58dd439c3a0d51aa7543.js.LICENSE.txt",
-      "path": "builder.58dd439c3a0d51aa7543.js.LICENSE.txt",
-      "publicPath": "/__django_static/js/bundles/builder.58dd439c3a0d51aa7543.js.LICENSE.txt"
+    "yourfiles.70fed0402f7640f5dcc1.js": {
+      "name": "yourfiles.70fed0402f7640f5dcc1.js",
+      "path": "yourfiles.70fed0402f7640f5dcc1.js",
+      "publicPath": "/__django_static/js/bundles/yourfiles.70fed0402f7640f5dcc1.js"
     },
-    "viewer.08734df7339e28c342cc.js.LICENSE.txt": {
-      "name": "viewer.08734df7339e28c342cc.js.LICENSE.txt",
-      "path": "viewer.08734df7339e28c342cc.js.LICENSE.txt",
-      "publicPath": "/__django_static/js/bundles/viewer.08734df7339e28c342cc.js.LICENSE.txt"
-    },
-    "yourfiles.c93bfed2dd8a9c6f4718.js.LICENSE.txt": {
-      "name": "yourfiles.c93bfed2dd8a9c6f4718.js.LICENSE.txt",
-      "path": "yourfiles.c93bfed2dd8a9c6f4718.js.LICENSE.txt",
-      "publicPath": "/__django_static/js/bundles/yourfiles.c93bfed2dd8a9c6f4718.js.LICENSE.txt"
-    },
-    "builder.58dd439c3a0d51aa7543.js": {
-      "name": "builder.58dd439c3a0d51aa7543.js",
-      "path": "builder.58dd439c3a0d51aa7543.js",
-      "publicPath": "/__django_static/js/bundles/builder.58dd439c3a0d51aa7543.js"
-    },
-    "viewer.08734df7339e28c342cc.js": {
-      "name": "viewer.08734df7339e28c342cc.js",
-      "path": "viewer.08734df7339e28c342cc.js",
-      "publicPath": "/__django_static/js/bundles/viewer.08734df7339e28c342cc.js"
-    },
-    "yourfiles.c93bfed2dd8a9c6f4718.js": {
-      "name": "yourfiles.c93bfed2dd8a9c6f4718.js",
-      "path": "yourfiles.c93bfed2dd8a9c6f4718.js",
-      "publicPath": "/__django_static/js/bundles/yourfiles.c93bfed2dd8a9c6f4718.js"
+    "yourfiles.70fed0402f7640f5dcc1.js.LICENSE.txt": {
+      "name": "yourfiles.70fed0402f7640f5dcc1.js.LICENSE.txt",
+      "path": "yourfiles.70fed0402f7640f5dcc1.js.LICENSE.txt",
+      "publicPath": "/__django_static/js/bundles/yourfiles.70fed0402f7640f5dcc1.js.LICENSE.txt"
     }
   },
   "chunks": {
-    "builder": [
-      "builder.58dd439c3a0d51aa7543.js"
-    ],
-    "viewer": [
-      "viewer.08734df7339e28c342cc.js"
-    ],
     "yourfiles": [
-      "yourfiles.c93bfed2dd8a9c6f4718.js"
+      "yourfiles.70fed0402f7640f5dcc1.js"
     ]
   },
   "publicPath": "/__django_static/js/bundles/"