feat: added duplicate feature

src/api/index.js

@@ -150,7 +150,7 @@ export async function createAndUpdateFile(
   path,
   fileName,
   content,
-  sha,
+  sha = null,
 ) {
   const { githubConfig, octokit } = useOctokitStore();
   const { head } = session;

src/assets/main.css

@@ -67,3 +67,7 @@ html {
     padding-inline: 0px;
   }
 }
+
+.z-index {
+  z-index: 1;
+}

src/components/file/CreateFile.vue

@@ -4,8 +4,10 @@ import {
   createAndUpdateFile,
   fetchSchemaFromURL,
   getBranchFileStructure,
+  getFileDetails,
 } from "@/api/index.js";
 import {
+  decodeString,
   encodeString,
   getSchemaDetails,
   stringifyIfNeeded,
@@ -33,6 +35,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  duplicateFile: {
+    type: Object,
+    default: null,
+  },
   addNewFileClick: Function,
   updateDetails: Function,
 });
@@ -59,7 +65,24 @@ const addOrEditFile = async () => {
     name: filePath.value,
   });
 
-  if (existingFile) {
+  if (props.duplicateFile) {
+    const loader = useLoader().show();
+    const fileDetails = await getFileDetails(
+      props.session,
+      props.duplicateFile.title,
+      false,
+    );
+    fileContent.value = decodeString(fileDetails.content);
+    if (fileDetails.encoding !== "none") {
+      createFile(existingFile?.sha);
+    } else {
+      snackbar.value = {
+        text: "File is large and cannot be duplicated by Git Clerk",
+        status: "error",
+      };
+    }
+    loader.hide();
+  } else if (existingFile) {
     onSelectFile(existingFile);
   } else {
     const fullPath = updatedFilePath.value + filePath.value;
@@ -162,7 +185,7 @@ const close = () => {
   currPathDirStructure.value = [];
 };
 
-const createFile = async () => {
+const createFile = async (sha = null) => {
   if (!filePath.value) {
     snackbar.value = {
       text: "Please add a filename",
@@ -182,6 +205,7 @@ const createFile = async () => {
     fullFilePath,
     filePath.value,
     fileContent.value,
+    sha,
   );
   if (snackbar.value.status === "success") {
     await router.push(`/${props.session.number}/${encodeString(fullFilePath)}`);
@@ -207,10 +231,10 @@ const getSelectedFileFolder = (name) => {
 
 <template>
   <div v-if="props.open" class="d-flex justify-center border-b create-file">
-    <v-row>
-      <v-col cols="12" class="d-flex">
+    <v-row class="mr-0">
+      <v-col cols="12" class="d-flex pr-0">
         <div
-          class="px-6 py-6 border-b-thin session-create-field d-flex w-100 align-center justify-center"
+          :class="`px-6 ${props.duplicateFile ? 'py-4' : 'py-6'} border-b-thin session-create-field d-flex w-100 align-center justify-center`"
         >
           <v-combobox
             v-model="filePath"
@@ -250,13 +274,21 @@ const getSelectedFileFolder = (name) => {
               </v-list-item>
             </template>
           </v-combobox>
-          <v-btn
-            @click="addOrEditFile"
-            icon="mdi-plus"
-            variant="flat"
-            color="primary"
-            size="large"
-          ></v-btn>
+          <div class="d-flex align-center ga-2">
+            <v-btn
+              @click="addOrEditFile"
+              :icon="props.duplicateFile ? 'mdi-content-copy' : 'mdi-plus'"
+              variant="flat"
+              color="primary"
+              size="large"
+            ></v-btn>
+            <v-btn
+              variant="text"
+              icon="mdi-close"
+              @click="close"
+              class="px-1 rounded-circle"
+            ></v-btn>
+          </div>
         </div>
       </v-col>
     </v-row>

src/components/file/DuplicateFile.vue

@@ -0,0 +1,59 @@
+<script setup>
+import Tooltip from "@/components/global/Tooltip.vue";
+import { defineProps, ref } from "vue";
+import CreateFile from "@/components/file/CreateFile.vue";
+
+const props = defineProps({
+  file: {
+    type: Object,
+    default: {},
+  },
+  session: {
+    type: Object,
+    default: {},
+  },
+  size: {
+    type: String,
+    default: "large",
+  },
+  text: {
+    type: String,
+    default: "",
+  },
+  callBack: Function,
+});
+
+const duplicateFile = ref(false);
+
+const duplicateFileClick = async (state = true) => {
+  duplicateFile.value = state;
+};
+</script>
+
+<template>
+  <Tooltip text="Duplicate File">
+    <v-btn
+      color="blue-grey-darken-4"
+      :icon="props.text ? false : 'mdi-content-copy'"
+      prepend-icon="mdi-content-copy"
+      :size="props.size"
+      :text="props.text"
+      variant="text"
+      :disabled="props.file?.status === 'removed'"
+      @click="duplicateFileClick"
+      class="text-capitalize font-weight-medium"
+    ></v-btn>
+  </Tooltip>
+  <div
+    v-if="duplicateFile"
+    class="position-absolute top-0 left-0 w-100 bg-grey-lighten-4 z-index"
+  >
+    <CreateFile
+      :updateDetails="() => {}"
+      :addNewFileClick="duplicateFileClick"
+      :open="duplicateFile"
+      :session="props.session"
+      :duplicateFile="duplicateFile"
+    />
+  </div>
+</template>

src/components/file/index.js

@@ -2,3 +2,4 @@ export { default as DeleteFile } from "./Delete.vue";
 export { default as ActionTabFileList } from "./ActionTabFileList.vue";
 export { default as ActionTabFileEditor } from "./ActionTabFileEditor.vue";
 export { default as CreateFile } from "./CreateFile.vue";
+export { default as DuplicateFile } from "./DuplicateFile.vue";

src/views/FileEditView.vue

@@ -143,16 +143,18 @@ onMounted(async () => {
   const loader = useLoader().show();
   updateNavButtonConfig();
   await updateFileDetails();
-  initEOXJSONFormMethod(jsonFormInstance, isSchemaBased, previewURL);
-  if (isSchemaBased.value) {
-    hideHiddenFieldsMethod(jsonFormInstance);
+  if (file.value.encoding !== "none") {
+    initEOXJSONFormMethod(jsonFormInstance, isSchemaBased, previewURL);
+    if (isSchemaBased.value) {
+      hideHiddenFieldsMethod(jsonFormInstance);
+    }
+    addPostMessageEventMethod({
+      previewURL,
+      updatedFileContent,
+      jsonFormInstance,
+      isSchemaBased,
+    });
   }
-  addPostMessageEventMethod({
-    previewURL,
-    updatedFileContent,
-    jsonFormInstance,
-    isSchemaBased,
-  });
   loader.hide();
 });
 
@@ -174,7 +176,21 @@ onUnmounted(() => {
     v-if="fileContent !== null && schemaMetaDetails.schema"
     :class="`bg-white ${!previewURL && 'px-4 px-sm-12 py-4 py-sm-8 non-preview-height'} d-block file-editor ${schemaMetaDetails.generic && 'file-editor-code'}`"
   >
-    <v-row no-gutters :class="previewURL ? 'd-block d-sm-flex' : ''">
+    <div
+      class="d-flex align-center align-self-center justify-center flex-column py-12"
+      v-if="file.encoding === 'none'"
+    >
+      <p class="text-sm-body-2 text-blue-grey-darken-2">
+        Sorry about that, but we can’t show files that are this big right now.
+      </p>
+      <router-link
+        class="text-sm-body-2 text-blue-darken-2 font-weight-bold"
+        :href="file.download_url"
+        target="_blank"
+        >View Raw</router-link
+      >
+    </div>
+    <v-row v-else no-gutters :class="previewURL ? 'd-block d-sm-flex' : ''">
       <v-col :cols="previewURL ? 3 : 12" class="overflow-x-auto">
         <eox-jsonform
           :schema="schemaMetaDetails.schema"

src/views/SessionView.vue

@@ -10,7 +10,12 @@ import {
 import OctIcon from "@/components/global/OctIcon.vue";
 import ListPlaceholder from "@/components/global/ListPlaceholder.vue";
 import ListPagination from "@/components/global/ListPagination.vue";
-import { DeleteFile, ActionTabFileList, CreateFile } from "@/components/file";
+import {
+  DeleteFile,
+  ActionTabFileList,
+  CreateFile,
+  DuplicateFile,
+} from "@/components/file";
 import { encodeString, AUTOMATION } from "@/helpers/index.js";
 import "@eox/jsonform";
 import Automation from "@/components/session/Automation.vue";
@@ -157,8 +162,9 @@ const handleAutomationClose = () => {
         </div>
       </template>
 
-      <template v-slot:append>
-        <DeleteFile :file :session :call-back="updateDetails" />
+      <template v-slot:append v-if="!session.closed_at">
+        <DuplicateFile :file :session :callBack="updateDetails" />
+        <DeleteFile :file :session :callBack="updateDetails" />
       </template>
     </v-list-item>